ViewUI 在 Table 组件中使用 render 渲染 Time 组件后，数据更新时 Time 显示的相对时间不会更新

Question

描述

这是一个 Demo : https://run.iviewui.com/hMBzQgse

点击按钮会更新 time 字段，我在 Table 中使用 render渲染 Time 组件以显示相对时间，这时候遇到了一个问题：

更新数据（实际业务中是异步加载数据）后， Time 组件显示的时间并不会更新，而是在 interval 设定的自动更新时间之后更新。

现在我应该怎么做才能做到更新数据后 Time 立刻进行更新呢？

我尝试过使用 ref ，试着通过手动调用所有 Time 组件的 setTime 手动更新时间。但似乎因为 ref 被渲染到了 Table 下的子组件当中，并没法在根组件中获取，可能是我方式不对。

备注

为防止 Demo 地址无法打开或者失效，这里直接贴一下代码：

<template>
  <Button @click="randData()">Random Data</Button>
  <Table :columns="columns1" :data="data1"></Table>
</template>
<script>  
  function randData(count) {
    let data = []
    count = count || 10
    for(let i = 1; i <= count; i++) {
      data.push({
        index: i,
        time: Date.now() - parseInt(5184000 * Math.random())
      })
    }
    return Object.freeze(data)
  }
  
  export default {
    data () {
      return {
        columns1: [
          { title: 'Index', key: 'index' },
          { title: 'timestamp', key: 'time' },
          { 
            title: 'Time',
            render: (h, { row }) => {
              return h('Time', { 
                props: { 
                  time: row.time,
                  interval: 5 // for quickly
                }
              })
            }
          }
        ],
        data1: randData()
      }
    },
    
    methods: {
      randData() {
        this.data1 = randData()
      }
    }
  }
</script>

Answer 1

fixed in https://github.com/view-desig...

v4.1.0 已修复：https://iviewui.com/docs/guid...