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

最新推荐文章于 2025-03-11 14:17:15 发布

David__Cui

最新推荐文章于 2025-03-11 14:17:15 发布

阅读量2.2k

点赞数 2

文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/a476613958/article/details/130411060

版权

文章展示了如何在Vue.js中使用ElementUI的el-table组件创建带有树结构的表格，并实现懒加载功能。通过点击树节点获取下级数据，利用getDeptList接口动态加载子节点，同时处理数据以展示树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述
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>

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>