关于element ui table 树形数据不出现下拉箭头

最新推荐文章于 2024-03-20 14:14:24 发布
最新推荐文章于 2024-03-20 14:14:24 发布
阅读量4k 收藏 2
点赞数
分类专栏： element ui 文章标签： 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53612276/article/details/120078882
版权

数据中的 row-key 必须要有这个, 不然即使有children也不会显示的

在非懒加载的情况下设定 hasChildren 是无效的

如果要使用懒加载, 可以用 hasChildren 预先设定该行是否有子项且要设定号 lazy 和 load 方法,

不然下拉箭头也是不会显示的

C语言国粹
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element UI实现树形表格带复选框的示例代码
10-17
主要介绍了vue+element UI实现树形表格带复选框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue element table树形数据表格点击折叠icon无效的原因
天渺(喵)工作室
02-04 919
在vue2中使用element table表格树形数据折叠操作的时候，折叠icon箭头怎么点击都没有效果，出现这种情况 极有可能是以下情况 树形表格table的数据源talbeData的问题 //具体原因没有研究源代码，但是目前发现的主要原因就是此处的索引row-key导致的 ... tableData: [{ id: 1, date: '2016-05-02', name: '王小虎', addres..
element-ui懒加载树形表格,展开箭头未显示问题
大小都是愁的成长之路
11-28 2745
element-ui懒加载树形表格,展开箭头未显示问题 el-table箭头无法显示
elementui树形表格没有展开按钮
最新发布
读书人的博客
03-20 288
如果不用懒加载的话 数据中一定不要 hasChildren 这个属性，坑 ，巨坑 特此记录。
vue element table树形数据表格点击折叠icon icon消失，数据也并没有展示出来（已解决）
蓝胖子的博客
09-16 2367
vue element table树形数据表格点击折叠icon icon消失，数据也并没有展示出来（已解决）
elementUI el-table树形结构不展示问题
热门推荐
璐先生的博客
09-11 1万+
1、必须指定row-key 2、如果子节点key名称不为children，需要配置:tree-props={children:“xxxx”}字段key， 如果key名称为children tree-props可以省略。
el-tree 更改icon颜色（下拉箭头）解决无children的子级也会出现下拉箭头
qq_36413409的博客
11-04 2689
element-ui 我们只需要改变.el-tree-node__expand-icon.is-leaf这个类名重新设置成透明就可以了。我们可以看到 在数组织没有子级的也就是没有children的时候他也会有icon 只不过颜色是透明的！这是el-tree icon本来的颜色。
Element-UI 中 el-table 树形数据 tree-props使用避坑
web15870359587的博客
03-08 4922
element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据需要设置children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来 在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。 设置 Table 的 lazy 属性为 true.
element-ui树形数据不显示展开图标解决方案
it浅阳的博客
10-28 6116
问题描述： 在使用element-ui的下图组件时，出现有子节点的记录不能显示展开的图标 相关代码: <template> <div class="app-container"> <el-table :data="list" style="width: 100%" row-key="id" border lazy :load="getChildrens
VUE element Tree 没有子级时隐藏展开图标
weixin_43923808的博客
08-10 3447
element Tree
ElementUI中树形表格下拉卡死的问题解决
Huathy的博客
01-16 812
elementUI中树形表格下拉卡死问题的解决。其原因是后台返回了空数据，而空的id当成了el-table的row-key导致报错。
element-ui树形控件后台返回的数据+生成组织树的工具类
01-19
开发项目的时候遇到需要在表单中选择参会人员，根据不同部门下选择不同的人，在element-ui中有树形控件能满足这种情况，后台封装数据记录一下。     封装格式：     返回数据格式：     接收数据的pojo类： 2018年4月12日修改     本以为以上的数据结构能满足项目的使用，但是我错了，当时的数据库中只有不到10条的数据并且组织结构非常单一，随后同事导入了数据（6000多条），组织结构也不是如此单一的了，我在项目中固定了三层结构肯定是错的，要一个活的组织树。     网上有很多大牛写的方法，递归的、迭代的， 我在看了很多大牛写的方法以后，有了实现思想。     1.把所
使用element-ui table expand展开行实现手风琴效果
01-21
问题讲解： 在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图 可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后上次点击的行仍旧处在一个展开的状态，而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态，体验不是特别好，可以说有点糟糕了，但是我后来在后面的
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
主要介绍了Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）的方法，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
详解vue-cli+element-ui树形表格(多级表格折腾小计)
10-17
主要介绍了vue-cli + element-ui 树形表格（多级表格折腾小计），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element ui table（表格）实现点击一行展开功能
10-17
主要给大家介绍了关于element ui table（表格）实现点击一行展开功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui树形表格展开收起点击无反应
qq_37881606的博客
11-30 3679
element-ui树形表格展开收起点击无反应 多半是因为row-key出了问题 数据结构大概是下面这种： tableData: [{ id: null, date: '2016-05-02' }, { id: null, date: '2016-05-04' }, { id: null, date: '2016-05-01' child
elementui表格嵌套下拉显示不同子数据
抓住那个肯德基
07-01 1042
使用elementui表格组件，实现下拉显示子数据，并且子数据与表格行数据关联 首先有一个父表格 使用 @expand-change=“expandChange” 父表绑定数据是list 子表绑定数据是父表当前下拉行数据的detailsList 当然list 和 detailsList都是自己定义的名称。 <el-table :data="list" border fit highlight-current-row @ex
element ui table树形表格复选框
07-28
回答: 在Element UI的树形表格中，如果需要实现父级数据有复选框而子级数据没有复选框的效果，可以通过添加相应的类来控制样式，设置display: none来隐藏子级的复选框。可以利用Table Attributes属性中的cell-class-name属性，通过判断来筛选需要隐藏复选框的行。具体的代码如下所示: ```html <el-table @selection-change="handleSelectionChange" ref="multipleTable" row-key="id" :data="tableData" v-loading="listLoading" border class="table-wrap" stripe :cell-class-name="cellcb"> <el-table-column align="center" type="selection" :resizable="false" width="60" ></el-table-column> ... </el-table> ``` ```javascript ... methods: { // 隐藏子级复选框 cellcb(row) { // 此处判断条件可以根据业务需求进行调整 if (!row.row.children) { return 'myCell' } }, } ... ``` ```css <style lang="less"> .myCell .el-checkbox__input { display: none; } </style> ``` 这样就可以实现父级数据有复选框而子级数据没有复选框的效果。\[1\] 另外，如果需要一次性从后端接口获取显示的数据，可以使用Element UI的相关方法，例如@select、@select-all和@selection-change等事件来处理复选框的选择。具体的方法可以参考Element UI官方文档。\[2\] 如果需要实现懒加载函数，可以使用async/await来延迟加载数据。例如，可以使用async/await来延迟加载子级数据，并通过setNewRowData方法将加载的数据设置给对应的行。具体的代码如下所示: ```javascript async loadSearch(row, treeNode, resolve) { const loadData = \[ { id: 3100, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { id: 3200, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' } \] await setTimeout(() => { resolve(loadData) }, 2000) await this.setNewRowData(row, loadData) }, setNewRowData(row, loadData) { row.children = loadData } ``` 这样就可以实现懒加载函数的效果。\[3\] #### 引用[.reference_title] - *1* [Element ui 树形表格+复选框](https://blog.csdn.net/VanChaoi/article/details/117781083)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [第九篇 Elementui 树形表格多选问题-多级树形表格懒加载复选框勾选问题](https://blog.csdn.net/Yzt_199626/article/details/117089321)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值