ElementUI中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>

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>

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