el-table表格处理自定义添加行的展开

已于 2023-08-23 14:50:31 修改
阅读量698 收藏 1
点赞数
分类专栏： 前端二三事 文章标签： elementui 前端 javascript
于 2023-08-22 17:11:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45541930/article/details/132431515
版权
文章讲述了在使用el-table实现展开行功能时，遇到新增行没有唯一值的问题。解决方案是为每条数据添加UUID作为唯一标识，同时在数据回填时确保包含此字段。验证则通过ref获取表单进行自动处理。

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

这里写自定义目录标题

背景

通常使用el-table的展开行属性比较简单，从官网拿来就可以用，实现方式通过row-key绑定一条数据的唯一值，如id之类
在这里插入图片描述
expand-row-keys绑定一个数组，数组中值对应这一行的key，所以这一行对应的会展开
在这里插入图片描述
中间根据相关操作插入移除即可实现展开与收缩。具体方法忽略。
遇到的问题： 比如点击按钮新增一行，那么这些新增的空数据没有唯一值怎么样去控制

解决方式

对每一条数据增加一个唯一值，这里使用到uuid解决。当然uuid不会在后端保存，所以如果数据回填展示也用了这个组件，name在请求到的数据上需要提前加上该字段。补充：验证方式直接用ref获取到表单调用框架的验证即可

el-table表格展开行
高山景行，一尘不染
10-23 2042
效果： 代码： <el-table :data="tableData" border style="width: 100%"> > <el-table-column prop="auditRuleId" label="NO" width="180">&lt...
vue el-table表格合计自定义值
weixin_42066070的博客
03-01 1913
效果：总计一行最下面，总计里面的值从后端获取到的，不是前端计算。 思路： 1.利用el-table 里面的:summary-method="getSummaries" show-summary 这两个属性 代码如下 <el-table :data="typeList" :summary-method="getSummaries" show-summary row-key="id" ref...
如何将elementui的el-table的展开行事件用自定义的按钮控制，并且可以实现“展开”“收起”的切换
wzy_PROTEIN的博客
09-26 5919
需求是表格内每行点击展开按钮要展开内容，查看elementUI的官网有展开例子，但是官网的例子是点击表格前的箭头来控制展开收起的。
Vue使用el-table给每一行数据上面增加一行自定义合并行
最新发布
路虽远，行则必至！
04-11 504
如何需要合并同一个订单下的数据
el-table自定义展开行
weixin_48005976的博客
09-27 5839
el-table自定义展开行
el-table表格嵌套子表格，对当前展开行内容修改，当前行默认展开
m0_50873766的博客
06-07 2184
在设置type="expand"的el-table-column标签里插入<template slot-scope="props">来创建自定义模版，里面可以直接嵌入el-table表格，作为子表。如果数据是接口获取，完成操作后要刷新接口，获取最新数据，这样会发现，当前操作的子表默认不展开，如何刷新接口默认展开当前操作行；遇到子节点嵌套父节点，并带有表头，使用el-table树状结构，通常是不支持的。需要使用expand-row-keys属性，添加在父表，嵌套子表的位置。
element-ui中el-table点击其他自定义按钮展开table中某一行
茂茂的博客
02-17 5212
在日常开发中，我们遇见了会有点击某些按钮，使得表格行展开的需求，这时候去查看文档 element-ui（table） 这里官方提供了示例为在行最左侧有一个展开合并icon，但是点其他地方不能展开，我们又想点其他地方而展开 我们看见是在table-column上定了type为expand，而该列里面的自定义模板便是展开后显示的内容 我们想要实现点击自定义功能，继续查阅文档： 这里的expand-row-keys文档解释说可以设置当前已展开的行，那么我们可以给table绑定这个属性，在点击方法里面进行绑定
el-table表格的展开行，初始化的时候展开哪一行+设置点击行可展开功能
KMINLIKE的博客
09-14 1166
el-table展开行只是点击箭头展开，点击行没反应，这里做优化点击行也可以进行展开。的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的。需要默认展开行只需要在expands存入需要展开行的id就可以了。可以开启展开行功能，
vue el-table实现自定义表头
10-15
综上所述，通过Scoped Slot结合el-table和el-table-column组件，可以灵活地为Vue应用中的Element UI表格实现各种自定义表头需求。这样不仅可以提供更好的用户体验，还可以满足复杂业务逻辑的实现。需要注意的是，...
elementUI-使用el-table自定义transfer组件
08-14
在elementUI中使用el-table自定义完成transfer组件功能。内有注释使用说明
el-table树形表格表单验证(列表生成序号)
10-15
在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格...
el-table 树形表格 自定义展开图标_实践一个树形组件
weixin_39916355的博客
10-22 2381
想实践一个树形组件的起因是发现目前主流UI库在树形组件上都没有提供连接线(ant design有，但不知道为什么设计得发虚，就是各元素之间没有严格衔接上，见下图，而Vue生态圈中的Element UI和iView压根都不支持)。对我这种没有钛合金狗眼的人来说常常会看歪了。所以自己想禽兽，啊不，亲手尝试一个。仅仅实践最最基本的树形结构的展现、展开、折叠，不包含高级的多选、拖动、自定义渲染等功能。弄完...
elementui的el-table自定义控制展开事件，实现“展开”“收起”的切换（两种效果）【超级完整式代码】
lqlq54321的博客
01-25 3647
全网代码最全：elementui的el-table自定义控制展开事件，实现“展开”“收起”的切换（两种效果）
el-table自定义expand样式，设置展开按钮，在表格中存在多个展开框样式，并自定义el-table的sortTable功能
lk2913128603的博客
07-18 1346
el-table自定义expand样式，设置展开按钮，在表格中存在多个展开框样式，并自定义el-table的sortTable功能和全部展开功能
el-table实现自定义列表功能_el-table 自定义列
2401_85124130的博客
06-10 652
【代码】el-table实现自定义列表功能_el-table 自定义列。
element table 展开行 通过自定义按钮
qq_32555123的博客
09-08 881
【代码】element table 展开行 通过自定义按钮。
el-table expand行，自定义方法展开
lx233
03-31 1382
没想到自己写过的代码自己都不认识了 首先 ` <el-table-column type="expand" width="50">` 然后，自定义展开 @click="showList(scope.row)" 然后方法 这里设置了只能打开一行 if (this.lastRow) { this.$refs.multipleTable1.toggleRowExpansion(this.lastRow, false); } this.lastRow = row; ...
vue table表格之自定义行
weixin_46641145的博客
04-17 574
vue table表格之自定义行。
10行代码，实现 el-table 表格行的展开与收缩
tacity的博客
10-29 1378
4、这时我在想如果能实现展开，就证明路没问题了，但没法关闭，是因为表格没有再次渲染，想实现表格的再次渲染其实很简单，只要表格内的数据变化就行了，于是创造了一个变量const tableKey = ref(0)，每次点击后都实现+1 的效果，tableKey.value++;3、这时候我神奇的发现，文字可以点击了，也可以展开下面的行了，但是再次点击却无法关闭，我觉得这是el-table的一个bug，其实本可以这么简单就实现点击的，但是官方文档却给了几个语焉不详的变量，实在不知道是为什么。
el-table表格展开行 并且默认展开一行
09-15
在Vue.js的Element UI库中，`el-table`组件提供了一个强大的功能，即表格展开行（expand row）。当你需要显示部分数据的详细信息，而不是直接展示所有内容时，可以利用这个特性。默认展开一行通常是通过设置表头的属性来实现的。 例如，在`<el-table>`标签内，你可以设置`default-expanded-row-keys`属性，它是一个数组，包含了默认展开的行的key值。每个表格行都有一个唯一标识，通常由`index`或自定义的`key`属性提供。 这是一个简单的例子： ```html <template> <el-table :data="tableData" default-expanded-row-keys="['row1Key']" <!-- 这里假设row1Key对应的是第一行的键 --> > <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <!-- 添加一个列用于展开/折叠 --> <el-table-column type="expand"> <template slot-scope="{ $index, row }"> <p>这是第{{ $index + 1 }}行的详细信息</p> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, key: 'row1Key' }, // 其他数据... ] }; } }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值