关于vue 的 filters 页面不更新的问题el-table
在我页面使用filters增加定时器格式后,table中的数据发生了变化,但是页面没有实时变化,

代码
this.setIntervalTimes = setInterval(() => {
this.tableData.length &&
this.tableData.forEach((item) => {
if (item.waitDeadline) {
item.RemainMinutes =
(new Date(item.waitDeadline) - new Date()) / 1000;
if (item.RemainMinutes <= 0) {
item.RemainMinutes = 0;
clearInterval(this.setIntervalTimes);
} else {
item.RemainMinutes -= 1;
}
}
});
this.tableData = [...this.tableData];
}, 1000);
<el-table-column label="剩余时间" key="waitDeadline" show-overflow-tooltip width="95px"> <template v-slot="{ row }"> <p style="color: #e02020">{{ (0 >= row.RemainMinutes * 1 ? "已结束" : row.RemainMinutes) | manageTime }}</p> </template> </el-table-column>
原因在于表格中的RemainMinutes 是我forEach新增的属性,filter不能实时更新该属性值,导致页面不变。
在我更换了filter中实时处理table自有属性waitDeadline后,页面能实时变化。
<el-table-column
label="剩余时间"
key="waitDeadline"
show-overflow-tooltip
width="95px">
<template v-slot="{ row }">
<p style="color: #e02020">{{ row.waitDeadline | manageTime }}</p>
</template>
</el-table-column>
浙公网安备 33010602011771号