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

log:

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

实现过程:

表格操作列代码:

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



          

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

data() {
    return {

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

    },
}

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

页面部分:




js部分:
updateUser() {
      this.$axios.put("/fzyh/update/xs/yh", this.form).then((res) => {
        if (res.status == 200) {
          this.dialogFormupdate = false;
          console.log(this.table_index, this.table_row)

          if (this.form[this.table_index] !=this.table_row[this.table_index]){
              this.$set(this.form, this.table_index, this.table_row);
              this.table_index="";
              this.table_row="";
              this.form={};
            };
          this.$message.success("修改成功!");
        } else {
          this.dialogFormupdate = false;
          this.$message.error("新增失败,失败原因:", res.data);
        }
      });
    },

你可能感兴趣的:(测试开发,vue.js,elementui,javascript)