element怎么局部刷新行元素

elementUI怎么标题局部刷新行元素

新一次的需求有在表格内进行编辑保存的操作，我的想法是新增一个变量来控制行元素是否可以编辑，如下图代码：

<el-table-column align="center" label="* 展示原价" >
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.isEdit" size="medium" type="text" v-model="scope.row.originalPrice"></el-input>
                        <span v-else>{{scope.row.originalPrice}}</span>
                    </template>
                </el-table-column>

通过修改isEdit的值来进行切换，但是发现修改行内的数据，表格不会自动刷新，需要手动刷新，并且适用VUE的强制刷新$$forceUpdate()方法也完全不起作用，因此采用下面的方法
1.操作栏点击事件传入 index和row 数据

<el-table-column align="center" label="操作" width="80">
                    <template slot-scope="scope">
                        <span :class="['btn-edit',theme]" v-if="!scope.row.isEdit" @click="edit(scope.$index,scope.row)">编辑</span>
                        <span :class="['btn-edit',theme]" v-else @click="save(scope.$index,scope.row)">保存</span>
                        <span class="btn-del"  @click="del(scope.row.id)">删除</span>
                    </template>
                </el-table-column>

2.在方法里使用

 edit(index,row){
            row.isEdit=true;
            this.$set(this.$refs.multipleTable.tableData,index,row);
        },
              

this.$set(this.$refs.multipleTable.tableData,index,row);就是重点，multipleTable是表格定义的ref属性。