最近在做项目的时候，发现一个小问题v-table里面的v-check改变了选项，但是页面并没有变化（没有触发重新渲染）

<el-table :data="tableData">
<el-table-column align="center" >
            <template slot-scope="scope">
               <el-select   v-model="scope.row.type">
                 <el-option label="选项一" key="1" value="1"></el-option>
                 <el-option label="选项二" key="0" value="0"></el-option>
               </el-select>
            </template> 
          </el-table-column>  
 </el-table>

this.tableData = [{id: ‘1’, type:‘0’}, {id: ‘2’, type:‘1’}, {id: ‘3’, type:‘1’}]
后来看了一下代码，发现是list里面的对象改变，但没有重新渲染导致

Vue中能触发重新渲染的方法有
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
同时也可以用vue官方文档中说的
this.$set(obj, ‘opt1’, ‘2’)

对于上面的例子，可以这样重新渲染

<template slot-scope="scope">
               <el-select   v-model="scope.row.type" @change="changeWay(scope.row,scope.$index)">
                 <el-option label="选项一" key="1" value="1"></el-option>
                 <el-option label="选项二" key="0" value="0"></el-option>
               </el-select>
            </template> 

methods: {
    changeWay(data,index){
    // 方法1
    // this.tableData.push({ events: [], name: '' })
	// this.tableData.splice(this.tableData.length - 1, 1)

	// 方法2
    this.$set(this.tableData, index, data);
    },
 }

注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength)