!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>编程技术>ElementUI 树形表格 el-table 无效问题解决

ElementUI 树形表格 el-table 无效问题解决

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

上面是 ElementUI 官方对树形数据表格的介绍。实际使用时发现**无效**,需注意一下几点:

  1. 对象数组 data 中必须包含 children 子节点,如果不是 children 可以通过 tree-props 定义
  2. row-key 一般指向 data 中的 id 属性,该属性不能为 null 或 undefined 等,你也可以指定为其他属性,比如 menu_id,但同样不能为 null 或 undefined 等,且需要唯一。
  3. 如果未启用懒加载,data 数据中不可添加 hasChildren 属性,否则不会显示下拉箭头并不会显示子项目
  4. 懒加载方式必须指定 lazy 及 load 函数,否则点击下拉按钮不起作用
  5. 如果不希望指定列显示下拉箭头,设置该列 <code>el-table-column</code> 属性为 type=””

推荐的数据结构

注意:如发现问题,建议使用官网的数据测试,调整 id, children, hasChildren 的值观察效果以排查解决问题。

给TA打赏
共{{data.count}}人
人已打赏
编程技术

ElementUI el-table 使用 Sortable.js 排序错误解决

2022-9-3 16:30:44

编程技术

宝塔面板 MySQL 无法启动,备份好你的数据库

2022-9-3 16:31:08

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 admin@s9h.cn 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索