VUE 使用IView的Table 实现table tree，在增删改查后不整体刷新表格数据，只更新当前节点的数据

最新推荐文章于 2024-09-15 07:25:01 发布

荒烟蔓草

最新推荐文章于 2024-09-15 07:25:01 发布

阅读量1.9k

点赞数

分类专栏： vue table 编辑文章标签： vue tablet treeview

本文链接：https://blog.csdn.net/gavinoldmen/article/details/116228324

版权

vue 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

table 编辑

2 篇文章 1 订阅

订阅专栏

该博客详细介绍了如何在Vue中利用IView的Table组件实现表格树形数据的增删改操作，并在操作后仅更新当前节点的数据，避免整体刷新表格。主要步骤包括获取更新后的数据，使用递归更新数据源，以及调用不同的方法处理新增、编辑和删除操作。通过这种方式，可以提高用户体验并减少不必要的数据加载。

摘要由CSDN通过智能技术生成

VUE 使用IView的Table 实现table tree，在增删改查后不整体刷新表格数据，只更新当前节点的数据

整体实现思路

增删改等操作后，通过当前行的数据ID，通过接口获取当前行数据更新后保存到数据库的最新数据（与table数据源返回的数据相同）对象，将table历史的数据源赋值给临时变量。对临时变量的数据通过递归进行更新，数据更新完成后在赋值给table数据源

table标签

其中 table 数据源为familyList

        <Table ref="thisTab"
          row-key="ID"
          :load-data="handleLoadData"
          :columns="columnsList"
          :data="familyList"
        ></Table>

添加table数据更新方法

    
    //获取当前节点更新后的数据数据
    GetRowNewData(row, callback) {
      var _row = row;
      post("/api/GetList", {
        PID: row.PID,
      }).then(res => {
        if (res.Code == 0) {
          res.Datas.forEach(function(info,i){
            if(info.ID == _row.ID){
              callback(info);
              return false;
            }
          });
        }
      });
    },
    UpdateTableData(row, type,arry) {
      this.handleClearCurrentRow();//清空选择的行
      //因为新增和删除判断的都是父级节点ID，所以要特殊处理
      if(arry.length == 0){//数组等于0时只能是新增
        if(type=="Add"){
          arry.push(row);
          arry.ChildCont= arry.length;
        }
      }else if(row.PID == "0" && type != "Edit"){//父节点id= 0 时
        if(type=="Add"){
          arry.push(row);
          arry.ChildCont= arry.length;
        }else if(type=="Del"){
          arry.forEach(function(v,i){
            if(v.ID==row.ID){
              arry.splice(i, 1);
              arry.ChildCont--;
            }
          });
        }
      }
      else if(arry.length>0){
        for(var i = 0;i<arry.length;i++){
            if(type=="Add"){
              if(arry[i].ID==row.PID){
                if(arry[i].children.length==0){//目前为叶节点，直接打开
                  arry[i]._loading = false;//是否直接展开
                }
                else{
                  arry[i].children.push(row);
                }
                arry[i].ChildCont++;
                return false;
              }else if(arry[i].children.length>0){
                this.UpdateTableData(row,type,arry[i].children);
              }
            }else if(type=="Edit"){
              if(arry[i].ID==row.ID){
                //console.log("赋值前：info.Name："+arry[i].Name+" row.Name："+row.Name);
                if(arry[i]._loading!=undefined){
                  row._loading = arry[i]._loading;
                }
                if(arry[i].children.length>0){
                  row.children = arry[i].children;
                }
                arry[i]=row;
                //console.log("赋值前：info.Name："+arry[i].Name+" row.Name："+row.Name);
                return false;
              }else if(arry[i].children.length>0){
                this.UpdateTableData(row,type,arry[i].children);
              }
            }else if(type=="Del"){
              if(arry[i].ID==row.PID){
                arry[i].children.forEach(function(v,j){
                  if(v.ID==row.ID){
                    arry[i].children.splice(j, 1);
                    arry[i].ChildCont--;
                    return false;
                  }
                });
                if(arry[i].ChildCont==0){
                  delete arry[i]._loading;
                }
              }else if(arry[i].children.length>0){
                this.UpdateTableData(row,type,arry[i].children);
              }
            }
        };
      }
    }

新增后调用方法

根据 _this.GetRowNewData方法获取当前行数据更新后保存到数据库的最新数据（与table数据源返回的数据相同），此时data返回的是当前行的最新数据

            _this.GetRowNewData(_row, function(data){
              _this.familyListTemp = JSON.parse(JSON.stringify(_this.familyList));
              _this.UpdateTableData(data,"Add",_this.familyListTemp);
              _this.familyList = JSON.parse(JSON.stringify(_this.familyListTemp));
              _this.$forceUpdate();
            })

编辑后调用方法

根据 _this.GetRowNewData方法获取当前行数据更新后保存到数据库的最新数据（与table数据源返回的数据相同），此时data返回的是当前行的最新数据

            //更新后的数据
            _this.GetRowNewData(_row, function(data){
              _this.familyListTemp = JSON.parse(JSON.stringify(_this.familyList));
              _this.UpdateTableData(data,"Edit",_this.familyListTemp);
              _this.familyList = JSON.parse(JSON.stringify(_this.familyListTemp ));
              _this.$forceUpdate();
            });

删除后调用方法

                  _this.familyListTemp = JSON.parse(JSON.stringify(_this.familyList));
                  _this.UpdateTableData(row,"Del",_this.familyListTemp);
                  _this.familyList = JSON.parse(JSON.stringify(_this.familyListTemp));