vue数据更新table内容不更新解决方法

北巷`2023-08-09 13:54

场景：

table组件绑定的数据变化时，页面没有重新渲染，常见于子组件中使用table组件

原理：

创建实例时数组在vue中没有被监听到，属于非响应式数据，数组的下标变化无法监听到

解决方式：

js 复制代码

    <el-table
          :key="tamptime"
          stripe
          border
          fit
          height="450"
          :data="tabledata"
          style="width: 100%"
        >
          <el-table-column
            v-for="i in pretabledatacolumn"
            :key="i.index"
            show-overflow-tooltip
            :prop="i"
            :label="i"
            width="230"
          />
        </el-table>

data(){
    return {
        tabledata:[],
        pretabledatacolumn:[],
        tamptime:new Date().valueOf()
    }
}
methods:{
	changeTableData(){
		this.tabledata = []
	}
}

1、利用vue中重写的数组方法

splice，split，concat...

js 复制代码

changeTableData(){
	this.tabledata.splice(1,0)
}

2、为table绑定一个key，数据变化时更改key值,或者使用v-if绑定一个不重复的值触发组件渲染

js 复制代码

changeTableData(){
		this.tamptime = new Date().valueOf()
		this.tabledata = newtabledata
	}

3、使用$set()

js 复制代码

changeTableData(){
	this.$set(tabledata,1,'newvalue')
	}