iview表格的中使用 v-for 遍历渲染的组件没有响应式刷新

参考代码：

            <template
              slot="timerange"
              slot-scope="{row}">
              <div class="select-date">
                <div
                  v-for="(item,index) of extraDateCount"
                  :key="index">
                  <TimePicker
                    format="HH:mm"
                    type="timerange"
                    placeholder="Select time"
                    style="width: 140px"/>
                  <Icon
                    type="md-add"
                    size="20"
                    color="#2d8cf0"
                    @click="addDateInput(row,index)"/>
                  <Icon
                    type="md-remove"
                    size="20"
                    color="#2d8cf0"/>
                </div>
              </div>
            </template>

方法实现：

    addDateInput (row, index) {
      this.count += 1
      console.log(row, index, '+++++++++++')
      this.$nextTick(() => {
        this.extraDateCount.push({ id: this.count })
        this.$set(this.table_data, index, row)//用来响应式刷新表格数据
      })
    }

换个思路？也可利用render函数解决

操作.gif

        {
          title: '时间段',
          key: 'timeRange',
          minWidth: 250,
          render: (h, params) => {
            var arr = this.extraDateCount// 数据数组
            var newArr = []
            arr.forEach((item, index) => {
              newArr.push(h('div', {
                style: {
                  position: 'relative',
                  padding: '5px 5px'
                }
              }, [
                h('span', (index + 1) + '、'),
                h('TimePicker', {
                  props: {
                    type: 'timerange',
                    editable: false,
                    placeholder: '选择时间',
                    // format: 'HH:mm-HH:mm',
                    transfer: true // 注意一定要添加该属性，否则表格会遮盖住组件浮框
                    // value: '10:12-12:00'
                  },
                  on: {
                    'on-change': (val) => {
                      console.log(val, 'iii')
                    }
                  }
                }),
                index === 0 ? '' : h('Icon', {
                  props: {
                    type: 'md-add',
                    size: 20
                  },
                  style: {
                    color: '#2d8cf0'
                  },
                  attrs: {
                    title: '其他项目中已存在该供应链计划'
                  },
                  on: {
                    click: async () => {
                      this.addDateInput()
                    }
                  }
                }),
                h('Icon', {
                  props: {
                    type: 'md-remove',
                    size: 20
                  },
                  style: {
                    color: '#2d8cf0'
                  },
                  attrs: {
                    title: '其他项目中已存在该供应链计划'
                  },
                  on: {
                    click: async () => {
                      this.deleteDateInput()
                    }
                  }
                })
              ]))
            })
            return h('div', newArr)
          }
        }

方法实现：

    addDateInput (row, index) {
      this.count += 1
      this.$nextTick(() => {
        this.extraDateCount.push({ id: this.count })
      })
    }