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

已于 2023-06-30 10:07:03 修改
阅读量2.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： elementui vue.js javascript
于 2023-06-30 10:03:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Cychronized/article/details/131469542
文章详细介绍了在Vue项目中使用ElementUI的el-table组件时，如何利用:expand-row-keys属性控制行展开和关闭，以及@expand-change事件处理行切换。同时，通过设置type=expand的el-table-column创建可展开的列，并利用data参数在父子table间传递数据，实现子表格的功能。

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

  • 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 7108
一、达到的效果如下图： 二、实现流程 2 <el-table :data="tableData" row-key="id" ref="evtTable"> <!-- align="left" --> <el-table-column type="expand"> <template slot-scope="props"> <el-table :dat
在ElementUI中改变el-table中的el-table-column样式
mingY的博客
09-17 2181
1.效果一览 2.实现思想： 使用作用域插槽：slot-scope="scope"；绑定class类'back'；v-if条件判断：如果scope.row.xh == 1,2,3 ,则给他绑定类，设置样式。不满足条件的则不绑定类，不设置样式。 3.实现代码： html代码： <el-table-column prop="xh" label="序号" width="80" align="center"> <template slot-scope="...
Element实现表格嵌套、多个表格共用一个表头的方法
11-21
一、分析需求 这里先上一张图说明 需求 ： 根据后端返回的数据 （ res 是一个数组，它的元素是一个对象，对象里面的 ext 属性是一个对象，它又包含了， default 、 free 和 pay 三个属性，且这三个都是数组格式。）：   渲染出一个这样子的 表格 ： res 数据： res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板）， res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第一列是运送到的地址的名字，这里定义的是 area 属性，但后端是未给到这个字段的，可自己处理数据添加该字段
ElementUI用el-table实现表格内嵌套表格
热门推荐
香菜的博客
11-20 1万+
el-table 实现表格内嵌套表格（宇宙无敌详细！！！一看就会！）
element ui el-table嵌套el-table,实现checkbox联动效果
最新发布
逆风优雅的博客
06-17 236
该代码实现了一个嵌套表格组件，外层表格展示车辆组信息，内层展开显示具体车辆数据。主要功能包括：1）通过el-table实现两级表格结构，外层显示groupName和车辆数量，内层展示车辆详情；2）支持复选框联动选择，处理了父子表格间的选中状态同步；3）使用el-dropdown实现下拉菜单功能。数据结构采用vehicleGroupTableData数组存储分组和车辆信息，通过handleNestedCheckboxChange和handleSelectionGroupChange方法维护选中状态的一致性，包
实现element-ui的表格嵌套表格
qq_40055200的博客
06-21 2123
<el-table v-loading="loading" :data="tableData" :row-class-name="tableRowClassName" @expand-change="expandChange" :header-cell-style="{background:'#EBECF0'}" @selection-change="handleSelectionChange" ..
【vue组件】使用element-ui table 实现嵌套表格 点击展开时获取数据
loyd3的博客
09-14 5161
然后，因为选中子table的单选框后，把展开的子table收齐再展开时，单选框的选中样式会丢失，这时我想的办法是根据之前选中的选项，调用toggleRowSelection这个方法，再把单选框选中。在上面代码中hasSelections 是判断是否有选中的选项，然后把展开子表格选中的id取出来，根据选中的id调用toggleRowSelection去点击。但这里会产生一个问题，用$set赋值后，页面会重新渲染，展开的table会收回去，我的想法是让展开的table保持展开的状态，
element-ui实现table表格的嵌套（table表格嵌套）功能实现
yehaocheng520的博客
12-12 2335
element-ui实现table表格的嵌套（table表格嵌套）功能实现
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 封装组件
ElementUI之el-table标题列中显示el-tooltip
yuanjinshenglife的专栏
05-29 2226
ElementUI之el-table标题列中显示el-tooltip
表格(el-table)里面嵌套表格(el-table)
song_song0927的博客
01-03 9579
表格内嵌套表格
Vue+ElementUI中表格嵌套的使用方法
m0_66722601的博客
02-21 6279
Vue+ElementUI中表格嵌套的使用方法
el-table实现嵌套表格的展示
小阮的笔记本
02-20 4039
el-table嵌套表格展示。表单存在子表，列表展示子表
Vue+Element-ui实现表格嵌套表格（表头不同）
wind的博客
03-21 3736
【代码】Vue+Element-ui实现表格嵌套表格（表头不同）
vue+elementUI实现表格嵌套
wangzhe123_的博客
09-05 8465
vue+elementUI实现表格嵌套功能
vue+elementUI table表格嵌套表单，功能包含联动下拉框、动态增加行
m0_67841039的博客
08-13 5330
vue+elementUI table表格嵌套表单，功能包含级联下拉框、动态增加行
Vue ElementUI中el-table表格嵌套样式问题
lemon今天学习了吗？的博客
02-05 5005
1、表格定义唯一值row-key="indexId"和类名:row-class-name="getRowClass"1、展开图标每条数据都展示了，实际上接口数据并不是都有children数组；1、两个表格嵌套，当父表格有children数组时子表格才展示；2、在表格嵌套后，打开子表格，高亮显示在经过子表格后对应不上；2、子表格数据少于父表格展示字段，且对应固定操作列不同；3、父表格的操作列固定在右侧影响了子表格的显示；4、滑动到表格底部时，父子表格的固定列对不齐；
使用element 实现一个嵌套表格
Rebirth_lemon的博客
05-10 671
在外层的table使用tableData的数据，设置第一列的表头，第二列之后的表头通过便利tableHead获取，在第二个el-table-column里边嵌套一个table，此时的scope.row就是tableData数组中的对象，使用嵌套表格，首先创建两个数组 tableHead 和 tableData 存储表头数据和表格数据，但是呢 没有数据的地方不能显示空白，要显示表格 讨论了一下得出来一个解决方案。今天和之前的同事聊天，说他们公司提了一个需求，类似于这样。第一次发 （下手轻点）
elementui el-table 拆分单元格
01-22
### ElementUI `el-table` 组件实现单元格拆分 在ElementUI框架中，为了实现更复杂的数据展示需求，可以利用自定义模板来完成单元格的拆分。通过作用域插槽（Scoped Slot），能够灵活控制表格内每一列的内容显示方式。 对于希望达到类似多级表头的效果或是更加复杂的布局结构而言，在创建表格时需先规划好数据模型以适应预期的设计[^1]。下面是一个简单的例子说明如何使用作用域插槽来自定义单元格内容： ```html <template> <div> <!-- 定义一个基础table --> <el-table :data="tableData"> <!-- 使用slot-scope绑定行数据到scope变量上 --> <el-table-column label="姓名年龄组合"> <template slot-scope="scope"> <!-- 自定义渲染逻辑 --> <span>{{ scope.row.name }} ({{ scope.row.age }}岁)</span> </template> </el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, address: '北京市' }, { name: '李四', age: 24, address: '上海市' } ] }; } }; </script> ``` 上述代码展示了怎样在一个单独的列里合并两个属性值作为输出；如果目标是将单个物理上的单元格视觉上分割成多个部分，则可以通过CSS样式调整或者嵌套其他HTML标签的方式达成目的。值得注意的是，这种做法并不改变实际DOM树中的td元素数量，而只是改变了其内部呈现形式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值