element的Table表格组件树形数据与懒加载简单使用

最新推荐文章于 2025-04-30 11:18:29 发布

小白_ysf

最新推荐文章于 2025-04-30 11:18:29 发布

阅读量2.5k

点赞数 8

分类专栏： Element 文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_41549971/article/details/135504019

版权

本文详细介绍了如何在Vue中使用ElementUI的el-table组件构建可懒加载的树形表格，包括数据结构、组件属性配置、事件处理以及解决新增、删除、修改后节点刷新的问题。

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

1. 代码实现

<template>
    <div>
        <!-- lazy 是否懒加载子节点数据 -->
        <!-- load 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 -->
        <!-- :default-expand-all="defaultExpandAll" 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效  -->
        <!-- expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 -->
        <!-- row-click 当某一行被点击时会触发该事件 -->
        <!-- expand-change 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）	 -->
        <el-table ref="tableRef" :data="deptList" row-key="deptId" :lazy="true" :load="load"
            :tree-props="{ children: 'children', hasChildren: 'existSub' }" :expand-row-keys="expandRowKeys"
            @row-click="(row, column, e) => clickRowLoad(row, column, e)" @expand-change="handleExpandChange">
            <el-table-column prop="deptName" label="名称" min-width="260" />
            <el-table-column prop="orderNum" label="排序" />
            <el-table-column label="创建时间" align="center" prop="createTime" min-width="200">
                <template slot-scope="scope">
                    <span>{
  { (scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" min-width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click.stop="clickHandle(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>