通过elementui的el-table实现table嵌套展示

VueElementUI中el-table的展开功能详解
原创 已于 2023-06-30 10:07:03 修改 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue.js #javascript

于 2023-06-30 10:03:41 首次发布
文章详细介绍了在Vue项目中使用ElementUI的el-table组件时，如何利用:expand-row-keys属性控制行展开和关闭，以及@expand-change事件处理行切换。同时，通过设置type=expand的el-table-column创建可展开的列，并利用data参数在父子table间传递数据，实现子表格的功能。

  • el-table属性：

:expand-row-keys: 可以控制行的展开和关闭，也可以控制只能有一行进行展开

@expand-change：是表格行的切换事件，具体方法如下

  • el-table-column属性：

 type="expand" ：表示如果有子table时可以展开

:data="props"是用来父子table传参的

  •    注册子表格

 

在子页面里需要定义参数data

在子表格里使用参数data

最终展示的效果：

 

el-table 列里面嵌套 el-table
weixin_42066070的博客
02-11 7199
一、达到的效果如下图： 二、实现流程 2 <el-table :data="tableData" row-key="id" ref="evtTable"> <!-- align="left" --> <el-table-column type="expand"> <template slot-scope="props"> <el-table :dat
el-table实现表头嵌套、表头单元格合并、内容区域单元格实现同值自动跨行
jianshe1992的博客
01-30 2401
先看效果图： 最近要用Vue+ElementUI实现这种表格样式，因为也是第一次对el-table做这种处理，所以并不知晓是不是有更优的解决方案。把自己的代码放上来，欢迎大家提供更简单的实现方法哈。 PS： 红框内容：表头嵌套，通过el-table-column嵌套即可实现； 蓝框内容：左侧为表头跨列；右侧为表头跨行。（右侧效果：如果用el-table-column嵌套，会造成"考试结果"占一行，"成绩"占两行。）我的方案有些繁琐，先通过header-cell-class-name设置class名，然后在
Element实现表格嵌套、多个表格共用一个表头的方法
11-21
一、分析需求 这里先上一张图说明 需求 ： 根据后端返回的数据 （ res 是一个数组，它的元素是一个对象，对象里面的 ext 属性是一个对象，它又包含了， default 、 free 和 pay 三个属性，且这三个都是数组格式。）：   渲染出一个这样子的 表格 ： res 数据： res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板）， res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第一列是运送到的地址的名字，这里定义的是 area 属性，但后端是未给到这个字段的，可自己处理数据添加该字段
element-ui表格中嵌套表头不同的表格
qq_44161722的博客
08-08 941
【代码】element-ui表格中嵌套表头不同的表格。
el-table 表格嵌套表格
最新发布
好记性，不如烂键盘。
10-21 299
下面是模拟数据与代码。
ElementUI用el-table实现表格内嵌套表格
热门推荐
香菜的博客
11-20 1万+
el-table 实现表格内嵌套表格（宇宙无敌详细！！！一看就会！）
实现element-ui的表格嵌套表格
qq_40055200的博客
06-21 2174
<el-table v-loading="loading" :data="tableData" :row-class-name="tableRowClassName" @expand-change="expandChange" :header-cell-style="{background:'#EBECF0'}" @selection-change="handleSelectionChange" ..
vue el-table实现自定义表头
10-15
自定义表头功能的实现，需要在el-table组件中使用template标签，并在其中嵌套el-table-column组件。el-table-column组件用于定义表格的列数据，而slot="header"则是在el-table-column内部使用，用于定义该列的表头。...
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
【2022-10-09】elementUI el-table组件封装（可传参、多级表头、slot的使用）已验证有效
lyx9611的博客
09-23 654
支持element表格：基础表格、多级表头【slot还需要验证一下】
【vue组件】使用element-ui table 实现嵌套表格 点击展开时获取数据
loyd3的博客
09-14 5366
然后，因为选中子table的单选框后，把展开的子table收齐再展开时，单选框的选中样式会丢失，这时我想的办法是根据之前选中的选项，调用toggleRowSelection这个方法，再把单选框选中。在上面代码中hasSelections 是判断是否有选中的选项，然后把展开子表格选中的id取出来，根据选中的id调用toggleRowSelection去点击。但这里会产生一个问题，用$set赋值后，页面会重新渲染，展开的table会收回去，我的想法是让展开的table保持展开的状态，
element-ui实现table表格的嵌套（table表格嵌套）功能实现
yehaocheng520的博客
12-12 2713
element-ui实现table表格的嵌套（table表格嵌套）功能实现
表格(el-table)里面嵌套表格(el-table)
song_song0927的博客
01-03 9709
表格内嵌套表格
Vue+ElementUI中表格嵌套的使用方法
m0_66722601的博客
02-21 6435
Vue+ElementUI中表格嵌套的使用方法
el-table实现嵌套表格的展示
小阮的笔记本
02-20 4275
el-table嵌套表格展示。表单存在子表，列表展示子表
Vue+Element-ui实现表格嵌套表格（表头不同）
wind的博客
03-21 3873
【代码】Vue+Element-ui实现表格嵌套表格（表头不同）
vue+elementUI实现表格嵌套
wangzhe123_的博客
09-05 8566
vue+elementUI实现表格嵌套功能
vue+elementUI table表格嵌套表单，功能包含联动下拉框、动态增加行
m0_67841039的博客
08-13 5466
vue+elementUI table表格嵌套表单，功能包含级联下拉框、动态增加行
Vue ElementUI中el-table表格嵌套样式问题
lemon今天学习了吗？的博客
02-05 5383
1、表格定义唯一值row-key="indexId"和类名:row-class-name="getRowClass"1、展开图标每条数据都展示了，实际上接口数据并不是都有children数组；1、两个表格嵌套，当父表格有children数组时子表格才展示；2、在表格嵌套后，打开子表格，高亮显示在经过子表格后对应不上；2、子表格数据少于父表格展示字段，且对应固定操作列不同；3、父表格的操作列固定在右侧影响了子表格的显示；4、滑动到表格底部时，父子表格的固定列对不齐；
ElementUI el-table树形结构不展示问题
03-15
### ElementUI el-table 树形结构不显示的原因及解决方案 #### 原因分析 ElementUI 的 `el-table` 组件支持通过设置 `tree-props` 属性来实现树形数据的展示功能。如果树形结构未正常显示，可能是由于以下几个原因： 1. **数据格式不符合要求** 树形数据显示依赖于数据源中的父子关系字段配置是否正确。通常需要指定 `children` 字段名称以及可选的 `hasChildren` 字段名称[^1]。 2. **缺少必要的属性配置** 如果未正确配置 `tree-props` 或者其子属性（如 `children` 和 `hasChildren`），则可能导致树形结构无法渲染。 3. **CSS 对齐问题** 即使数据和属性都已正确配置，某些情况下可能会因为 CSS 样式冲突而导致树形结构的第一列数据不对齐，从而影响视觉效果[^2]。 --- #### 解决方案 ##### 数据格式校验 确保传递给 `el-table` 的数据是一个数组，并且每项对象中包含用于表示子节点的数据字段。默认情况下，该字段名为 `children`，但如果实际使用的字段名不同，则需在 `tree-props` 中声明对应的键名。例如： ```javascript const tableData = [ { id: 1, name: 'Parent', children: [ { id: 2, name: 'Child' }, { id: 3, name: 'Child', children: [{ id: 4, name: 'Grandchild' }] } ] } ]; ``` 上述数据可以通过如下方式绑定到表格组件上： ```vue <template> <el-table :data="tableData" row-key="id" default-expand-all :tree-props="{children: 'children'}"> <el-table-column prop="name" label="Name"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'Parent', children: [ { id: 2, name: 'Child' }, { id: 3, name: 'Child', children: [{ id: 4, name: 'Grandchild' }] } ] } ] }; } }; </script> ``` 此处的关键在于设置了 `row-key` 并指定了唯一的标识符字段 `id`，同时通过 `default-expand-all` 让所有节点初始状态下均处于展开状态。 --- ##### 配置 `tree-props` 当自定义子节点字段名时，务必更新 `tree-props.children` 的值以匹配实际数据结构。例如，假设子节点字段为 `subItems` 而不是默认的 `children`，可以这样写： ```vue <el-table :data="tableData" row-key="id" :tree-props="{children: 'subItems'}"> <!-- 列定义 --> </el-table> ``` 此操作会告知组件如何解析嵌套层次结构。 --- ##### 处理样式对齐问题 对于由 CSS 导致的对齐异常情况，可通过覆盖默认样式修复。具体来说，在项目全局或局部引入以下样式片段即可解决问题： ```css .el-table__indent { display: inline-block; } ``` 这段代码的作用是调整左侧缩进区域的行为模式，使其与其他单元格内容保持一致排列。 --- ### 总结 综上所述，ElementUI 的 `el-table` 树形结构不显示的主要原因是数据格式错误、必要属性缺失或者样式干扰所致。针对这些问题分别采取验证数据合法性、完善组件参数设定以及优化前端表现的方法能够有效达成目标。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值