关于vue 的 filters 页面不更新的问题el-table

在我页面使用filters增加定时器格式后,table中的数据发生了变化,但是页面没有实时变化,

企业微信截图_17555063525091
代码

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>
posted on 2025-08-18 16:47  jv_coder  阅读(23)  评论(0)    收藏  举报