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 // 不是响应性的

代码如下

 <template>
    <el-table :data="labelList" style="width: 100%" border stripe>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" align="center">
            <template slot-scope="scope">
                <el-input placeholder="名称" size="small" v-show="scope.row.show" v-model="scope.row.name"></el-input>
                <span v-show="!scope.row.show">{{scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
                <el-button v-if="!scope.row.show" size="mini" @click="handleEdit(scope.$index)">编辑</el-button>
                <el-button v-if="scope.row.show" size="mini" @click="handleEdit(scope.$index,'cancel')">取消</el-button>
                <el-button v-if="scope.row.show" size="mini" @click="saveLabel(scope.row)">保存</el-button>
                <el-button v-if="!scope.row.show" type="danger" size="mini" @click="deleteLabel(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

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

    // 给每个对象加个属性
    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); 
},