问题:
使用iview的table组件时,需要动态更新表头的数据,会出现如下错误:
You may have an infinite update loop in watcher with expression “columns“
在网上一通搜索后,大部分的解决办法都是修改源码,但是我个人觉得这并不是一个很好的解决办法,所以,经过我的苦思冥想加实际验证,最终在不修改源码的情况下解决掉了这个让认头大的bug,解决方式如下:(比较简单)
解决方式:
使用v-if
延迟加载table
组件,在数据更新时,浏览器将重新渲染Dom结构,代码如下
<template>
// 使用 v-if 延迟加载组件
<Table v-if="columns.length > 3" border :columns="columns" :data="tableData">
......
</Table>
</template>
<script>
export default {
......
methods: {
setTableHeadFunc (indexList) {
this.columns.splice(1, 0, ...indexList)
},
setTableDataFunc (data) {
// 避免动态修改表头时报错,在更新表头数据前,先将数据初始化
if (this.columns.length > 2) {
this.columns.splice(1, this.indexList.length)
}
// 避免动态修改表头时报错,表头数据初始化后需要在页面更新完成后再进行数据更新,否则还是会报错
this.$nextTick(() => {
// 处理表头数据和其他数据的业务逻辑
......
// 数据处理完成后调用函数,更新表头数据
this.setTableHeadFunc(newIndexList)
}
}
}
......
}
</script>
其实还有一种方法:去掉默认的表头,使用tableData的数据和自定义的样式来模拟实现表头的展示