vue+elementUI表格某一行修改局部刷新实现

log:

使用elementUI表格，想修改某一行数据然后不想全量刷新，只想刷新当前修改的行内容

实现过程：

表格操作列代码：

1.主要是获取下标和行内容：scope.$index,

<el-table-column width="200" label="操作" prop="datafile" fixed="right">

          <template slot-scope="scope">
            <el-button
              @="openTopic(scope.$index,)"
              type="text"
              size="small"
            >
              修改
            </el-button>
          </template>
</el-table-column>

2.点击修改会弹出一个框，实现代码：

data() {
    return {

      table_row : "",
      table_index:"",
      form: {
        id: "",
        name:"",
        ......
    },  
methods: {
    openTopic(index,row) {
      //打开dialog编辑框
       = true;
      //获取到的行内容放到表单里
       = row;
      //重新存一份行内容
      this.table_row = row;
      //下标存起来
      this.table_index=index;

    },
}

3.再弹框修改完内容后提交代码：

页面部分：
<div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormupdate = false">取 消</el-button>
          <el-button type="primary" @click="updateUser()">更 新</el-button>
</div>



js部分：
updateUser() {
      this.$("/fzyh/update/xs/yh", ).then((res) => {
        if ( == 200) {
           = false;
          (this.table_index, this.table_row)

          if ([this.table_index] !=this.table_row[this.table_index]){
              this.$set(, this.table_index, this.table_row);
              this.table_index="";
              this.table_row="";
              ={};
            };
          this.$("修改成功!");
        } else {
           = false;
          this.$("新增失败,失败原因：", );
        }
      });
    },