ElementUI中table组件懒加载效果，并默认展开第一层的数据_el-table 默认展开第一层

效果图

1.html 代码

<el-table
    :border="true"
    ref="multipleTable"
    :data="leftData"
    stripe  // 是否为斑马纹
    :show-header="true"  //是否显示表头
    row-key="deptId"  // 确保唯一性
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"  // 表格树结构
    lazy  // 是否懒加载子节点数据
    :load="lazyLoading"  // 懒加载
    :default-expand-all="true"  //是否默认展开所有行
>
    <el-table-column label="部门名称" prop="deptName" :show-overflow-tooltip="true" > </el-table-column>
</el-table>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. js代码

<script>
// 点击树获取下级数据接口（封装的后端接口）
import { getDeptList, } from "@/api/business/template.js";
  export default {
    data() {
      return {
        // 表格数据列表
        leftData: [],
        //传参
        queryParams: { deptId: undefined, },
      }
    },
    mounted() {
      this.expanded()
    },
    methods: {
      /** 点击树获取下级数据 */
      lazyLoading(tree, treeNode, resolve) {
        this.queryParams.deptId = tree.deptId;
        getDeptList(this.queryParams).then((res) => {
          tree.children = res.data;
          this.initData(tree.children);
          resolve(tree.children);
        });
      },
      /** 展开表格树结构第一层 */
      expanded(){
        const els = document.getElementsByClassName('el-table__expand-icon el-table__expand-icon--expanded');
        this.$nextTick(()=>{
            els[0].click()
        })
      },
      //初始化数据
      initData(data) {
        data.forEach((item) => {
          item.hasChildren = true; //树结构hasChildren
           // 判断是否是叶子节点，如果是则设置hasChildren=false,不显示表格树结构图标
          if (item.isLeaf == "1") {
            return Object.assign(item, { hasChildren: false });
          }
          if (item.children && item.children.length) {
            this.initData(item.children);
          }
        });
      },
    }
  }
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

[‘来源地址: https://segmentfault.com/a/1190000040719215?sort=newest’]