在vuejs表格中,我在列出数据的表格中具有倒数计时功能,但是我无法在每一行的表行中分别启动多个倒数计时,我为上面的此过程打开了一个jsfiddle文档,我会非常如果你看bi很高兴。预先感谢...
new Vue({
el: '#q-app',
data: function () {
let now = new Date();
return {
countdown: null,
data: [
{
name: 'calories',
calories: 159,
fat: 6.0,
carbs: 24,
tarih: "2020-11-11"
},
{
name: 'fat',
calories: 237,
fat: 9.0,
carbs: 37,
tarih: "2020-11-11 11:00"
},
{
name: 'carbs',
calories: 518,
fat: 26.0,
carbs: 65,
tarih: "2020-11-11 11:00"
},
{
name: 'protein',
calories: 305,
fat: 3.7,
carbs: 67,
tarih: "2019-07-11 11:00"
}
],
// date:moment(now).format('YYYY-MM-DD HH:mm'),
columns: [
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
{ name: 'tarih', label: 'Protein (g)', field: row => {
let datem = moment(row.tarih).format('YYYY-MM-DD HH:mm')
let selfi = this;
setInterval(function () {
selfi.countdown=countdown(new Date(datem).getTime());
}, 1000);
}
},
],
}
},
methods:{
},
mounted(){
}
})
答案 0 :(得分:0)
这是一种实现方法:https://jsfiddle.net/fzr36qwc/1/
基本上,我为每一行设置一个倒数字段。然后,我使用setInterval定期更新这些值。
new Vue({
el: '#q-app',
props:[
'datam'
],
data: function () {
return {
data: [
{
name: 'calories',
calories: 159,
fat: 6.0,
carbs: 24,
tarih: "2020-11-11",
sodium: 87,
calcium: '14%',
iron: '1%',
countdown: null,
},
{
name: 'fat',
calories: 237,
fat: 9.0,
carbs: 37,
tarih: "2020-11-11 11:00",
sodium: 129,
calcium: '8%',
iron: '1%',
countdown: null,
},
{
name: 'carbs',
calories: 518,
fat: 26.0,
carbs: 65,
tarih: "2020-11-11 11:00",
sodium: 54,
calcium: '12%',
iron: '6%',
countdown: null,
},
{
name: 'protein',
calories: 305,
fat: 3.7,
carbs: 67,
tarih: "2020-11-11 11:00",
sodium: 413,
calcium: '3%',
iron: '8%',
countdown: null,
}
],
// date:moment(now).format('YYYY-MM-DD HH:mm'),
columns: [
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
{ name: 'tarih', label: 'Protein (g)', field: 'countdown'},
],
}
},
methods:{
updateCountdowns() {
Object.values(this.data).forEach(row => {
let datem = moment(row.tarih).format('YYYY-MM-DD HH:mm');
row.countdown = countdown(new Date(datem).getTime()).toString();
})
}
},
mounted(){
// Update once at the beginning
this.updateCountdowns()
// Then update each second
setInterval(this.updateCountdowns, 1000)
}
})