el-table懒加载树形表格修改数据后重新加载节点

最新推荐文章于 2025-04-10 14:13:56 发布

南桥追光

最新推荐文章于 2025-04-10 14:13:56 发布

阅读量3.9k

点赞数 3

分类专栏： vue element-UI

本文链接：https://blog.youkuaiyun.com/qq_34122822/article/details/110130950

版权

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

element-UI

3 篇文章

订阅专栏

表格组件

 <el-table ref="singleTable"
                  v-loading="tableLoading"
                  row-key="id"
                  :data="dataList"
                  :load="load"
                  lazy
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  :tree-props="{children: 'children'}">
          <el-table-column
            type="index"
            align="center"
            width="50">
            <template slot-scope="scope">
              <el-radio :label="scope.row" v-model="currentRow">&nbsp;</el-radio>
            </template>
          </el-table-column>
          ...
          </el-table>

load 函数

      load(tree, treeNode, resolve) {
        let parentId = tree.id || 0;
        getAreaTree({parentId: parentId}).then(data => {
          for (let item of data) {
            item.hasChildren = true;
          }
          resolve(data);
        });
      },

手动触发重新加载的函数

      // 修改数据后重新加载节点
      reloadNode(id) {
        const { lazyTreeNodeMap, treeData } =  this.$refs.singleTable['store'].states
        this.$set(lazyTreeNodeMap, id, []);

        this.load({id:id}, null, data => {
          this.$set(treeData[id], "loading", false);
          this.$set(treeData[id], "loaded", true);
          this.$set(treeData[id], "expanded", true);
          if (data.length) {
            this.$set(lazyTreeNodeMap, id, data);
          } else {
            treeData[id].hasChildren = false;
          }
        });
      },