对订单表格的时间列,动态检验时间是否过期并用颜色标记.

关键点是在render中的渲染函数动态绑定class/style.

小问题是表格数据本身是确定的不再变化,我们又需要跟随时间变化.
所以首选需要一个定时器(定时器不能放在表格里会导致计时器不断累加)
其次需要一个能动态的变量
最后判断函数给出

代码如下

需要的变量

		// 
	    // 用来更新表格时间style
	    dynamic: false,
	    // 计时器
	    Refresh_setInterval: null

定时器

		list({...}).then((res) => {
	        {...}
	    }).finally(() => {
	        // 清除之前的定时器
	        clearInterval(this.Refresh_setInterval)
	        this.Refresh_setInterval = setInterval(() => {
	        // 表格中有数据时
	         if (this.tableData.length > 0) {
	           // 时间的p标签动态监听dynamic
	           this.dynamic = !this.dynamic
	         }
	       }, 3000)
	    })

动态绑定

        {
          title: '时间',
          align: 'center',
          render: (h, params) => {
            return h(
              'p',
              { // 动态判断是否超时 两边是一样的
                'style': this.dynamic ? this.decide(params.row.time) : this.decide(params.row.time)
              }, params.row.time
            )
          }
        },

判断函数

		decide(time) {
	      // 计算超时时间
	      let decideTime = parseInt(new Date().getTime() / 1000) - time
	      if (decideTime > 30 * 60) {
	        // 超时30分钟
	        return 'color:red'
	      } else {
	        return ''
	      }
	    }

结果

注1.值得一提的是js获取的是浏览器时间,浏览器会定时读取本地时间,所以测试时修改了电脑上的时间和js判断不一致是正常的,稍后浏览器会更新时间
注2.为什么不修改表格内不显示的数据,让表格重新渲染,因为表格重新渲染会导致多选部分也重新刷新.

本人学艺不精,在动态绑定部分代码不够优雅,如有指点可在评论区留言.