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

最新推荐文章于 2025-10-28 09:37:24 发布

原创

最新推荐文章于 2025-10-28 09:37:24 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #tablet #treeview

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

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.handleClear