标签：load index 表格 hasChildren tree ele 树形 element 加载

思路：
一、返回整体表格对象数组
二、遍历此对象数组，1.给控制有展开项的属性hasChildren赋值为true;2 给原始对象数组的每个对象加 id（这里为了防止展开时每行都会展开）
三、给表格加load执行函数，和lazy属性，以及:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 属性

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

table中的配置项为

<el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width:75vw; background:#000"
          stripe
          row-key="id"
          lazy
          :load="load"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >

原始表格处理代码为

this.tableData = menuTable.map((ele, index) => {
          ele.id = (this.currentPage - 1) * this.pageSize + index + 1 //控制哪一行展开
          if (ele.hasChild !== 0) {
            ele.hasChildren = true; // 表格可折叠展开
          }
          return ele;
        });
        console.log(this.tableData);

支持折叠行load执行函数为

    load(tree, treeNode, resolve) {
      console.log("表格折叠");
      console.log(tree);
      this.$api.menuManagement
        .menuListLoad({
          parentIds: [tree.menuId],
          ifSingleLevel: 1
        })
        .then(res => {
          if (res.code == 200) {
            res.data.forEach((i, index) => {
              i.id = tree.menuId + "-" + (index + 1);
            });
            resolve(res.data);
          }
        });
    },

标签：load,index,表格,hasChildren,tree,ele,树形,element,加载
来源： https://blog.csdn.net/sinat_34605342/article/details/111032915

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。