vue基于element-ui table做行内编辑

在做行内编辑的时候，直接对对象数组的属性赋值发现没有做响应式的
现象： 点击编辑的时候，没有切换输入框。f12后，输入框才切换出来

vue文档说明： https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

代码如下

注意一下，需要给数组里的对象增加一个显示隐藏属性

    // 给每个对象加个属性
    list.forEach(item => {
        item["show"] = false
    });
     // 深拷贝 这样labelList和tempLabelList不会指向同一list,修改其中之一不会导致另一个也改变
    this.tempLabelList =  JSON.parse(JSON.stringify(list));
    this.labelList = list;

对数组的的对象属性做响应式赋值

 handleEdit(index,cancel) {
                // 对数组元素直接辅助是没有做响应式的
                // https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96
                // row.show = true; 这样是不行的
                let data = this.labelList[index];
                if(cancel && cancel === 'cancel') {
                    data.name = this.tempLabelList[index].name;
                }
                data = {
                    id: data.id,
                    name: data.name,
                    show: !data.show
                }
                this.$set(this.labelList, index, data)
            },

新增，直接往list加入一个对象，并且编辑状态

addLabel() {
    let label = {
        show: true
    };
    this.labelList.unshift(label); 
},