table展示子级踩坑

已于 2024-05-23 15:15:57 修改
阅读量464 收藏
点赞数 2
文章标签： html 前端
于 2024-02-26 14:15:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiaochen1239/article/details/136297765
版权
本文介绍了如何在elemenui表格中通过tree-prop属性根据row的children属性判断是否显示子集，同时强调了后端数据返回时hasChildren字段的重要性以及设置row-key确保唯一性的必要性。还提到了懒加载时hasChildren字段的处理和避免渲染错误的方法。
摘要由CSDN通过智能技术生成

##elemenui中table通过row中是否有children进行判断是否展示子集，通过设置tree-prop的属性进行设置，子级的children的名字可以根据自己的子级名字进行替换，当然同样可以对数据处理成含有chilren的子级list。

问题：

 1.如果是根据后端返回的数据直接进行渲染的话那么返回的list中的每一个中都不能含有hasChildren，不然table渲染不出子级的数据，如果是使用懒加载需要设置hasChildren字段

2.需要进行设置row-key="唯一的值"否则会出现重复或者渲染，点击展示子集错误

展示效果

Xiaochen1239
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表格展示利器 Bootstrap Table实例代码
08-29
总之，Bootstrap Table 虽然在展示和管理数据方面表现出色，但在处理大量数据导出时，需要结合后台处理来优化性能。通过前端与后端的协同工作，我们可以提供一个既快速又高效的全量数据导出功能，满足用户的需求。
Vue基于iview table展示图片实现点击放大
11-19
在Vue.js应用中，使用iView UI库的Table组件展示数据时，我们有时需要处理图片显示并实现图片点击放大功能。这个过程涉及到Vue组件的使用、第三方库的集成以及自定义渲染函数。以下是一个详细步骤的说明： 1. **...
el-table-column 判断某列是否显示
qq_41737172的博客
05-09 3064
<el-table-column prop="swVersion" label="固件版本号" v-if="this.iotName == 'MQTT'? true:false"></el-table-column>
element ui 表格 点击某行折叠或展开 有数展示下拉图标
qq_46027468的博客
10-08 2091
实现的效果是这样的 这是表格demo <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" :row-class-name="getRowClassName" @row-click="rowClick" :row-key="rowKey" :expand-row-keys="nowExpand"&...
el-table 判断expand显示
weixin_44575130的博客
04-14 1408
el-table 判断expand显示 <el-table :data="tableData" :row-class-name="getRowClass"> <el-table-column type="expand"> <template slot-scope="props"> ... <template> <el-table-column> <el-table> // 判断表格是否有子项，无子项不显示展开按钮
element树形表格踩坑记
Shuang_gege的博客
04-14 1626
偶遇一项目需要element实现树形表格，按照文档实现表格展示后，发现子级表格无论如何都无法动态控制收缩或者展开，开始各种尝试，都无法解决，在论坛上也各种搜索，都没抓到要点，各种抓狂，最终经多番尝试后发现解决方案早就出现！不多说，直接上代码： 前端要求的效果差不多如下图： 代码的处理需要如下图进行处理： 在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。 通过指定 .
Antd 树表格 defaultExpandAllRows 踩坑
张兴华的博客
05-15 3969
问题背景 在使用 antdv 中树形表格时，设置了默认展开所有节点属性：:defaultExpandAllRows="true"。 但是在重新获取新的数据后（即经历了tableData置空再赋值），却没有再默认展开节点。 原因解析 defaultExpandAllRows这个属性仅仅是用来设置默认值的，只在第一次渲染的时候起作用，当我们获取了数据之后再重新加载时，这时已经是第N次渲染了，所以它并没有默认展开。 解决方案 方案一： 数据没有加载之前不渲染。 // 增加 v-if <a-table v
element组件踩坑记录
wxiao_xiao_miao的博客
09-18 2351
解决方法：在获取表格数据的时候，使用组件提供的 toggleRowSelection 方法，切换某一行的选中状态，进行多选框的回显，此方法也可实现切换分页时的回显，需要注意的是 使用 toggleRowSelection 方法 必须使用绑定table的原有数据，不可使用传入的参数，否则方法会无效。解决方法：可以给el-table绑定row-key属性，用来优化 Table 的渲染；解决方法：给 el-table 绑定 key 值，在需要更新时 this.num++，触发 el-table 的重新渲染。
element-ui table树结构 增删查改+全选 踩坑
qq_32439381的博客
05-28 2313
前提：项目表格是树结构，增删查改不能刷新整个表格，因为官网关于树结构表格的方法比较少，所以踩坑分享下 一、关于全选 坑：树结构里面它只勾选第一层的数据，子数据都是没有勾选的 解决方法：@select-all=“selectAll” 写个方法自己全选....不过这也是有坑的，这种方法只能在一次性拿到tableDatad的情况下使用。我试了异步加载树结构好像没拿到tableData，所以不能进行全选 代码： <el-table ref="table" :data="tableData"
react18踩坑记录
jsmeng626的博客
03-09 1206
react-router-dom5中,跳转路由地址刷新页面不刷新问题 react-router-dom6中Uncaught Error: useNavigate() may be used only in the context of a component. react-router-dom6嵌套路由正确写法 使用antd的table时Each child in a list should have a unique “key” prop react中使用useRoutes注册路由，跳转children
踩坑日记 - Sortable 拖动树表格排序
张兴华的博客
09-15 2440
以 Element 树表格为例，实现了树表格的同级之间排序（跨级也有代码，但还有问题） 踩坑点： onMove回调中 oldIndex 会随时变化，若想拿到最开始拖动的Row，需要使用onChoose 。 在onChoose需将 oldIndex 或者 oldRow 存储一下，供后续onMove和onEnd使用。 onMove 中可以使用return false 阻止拖动 因为是树形结构，所以回调中返回的 Index 并不准确，所以要预先在onChoose 时将树数据扁平化，才能根据返回的Index获.
uni-app table表格
10-26
在uni-app框架中，`table`组件是一种用于展示数据的常用元素，尤其在处理列表或者表格数据时。uni-app是一个跨平台的前端开发框架，它允许开发者使用Vue.js语法编写代码，一次编写，多端运行，包括iOS、Android、H5...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1180
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 412
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 251
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 780
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
html&css基础
antyuki的博客
07-09 743
/
el-table 给子级结构添加背景色
01-19
要给el-table的子级结构添加背景色，你可以使用以下方法： 1. 使用scoped样式表： ```html .el-table >>> .warning-row { background-color: #f5f7fa; } ``` 这样，当子级行具有`warning-row`类时，它们的背景色...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值