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

场景：

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

原理：

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

解决方式：

    <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

1、利用vue中重写的数组方法
splice，split，concat…

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

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

changeTableData(){
		this.tamptime = new Date().valueOf()
		this.tabledata = newtabledata
	}
1
2
3
4

3、使用$set()

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