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

已于 2023-08-23 14:50:31 修改
阅读量479 收藏 1
点赞数
分类专栏： 前端二三事 文章标签： elementui 前端 javascript
于 2023-08-22 17:11:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45541930/article/details/132431515
版权

这里写自定义目录标题

背景

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

解决方式

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

梦的方向!
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
elementUI-使用el-table自定义transfer组件
08-14
在elementUI中使用el-table自定义完成transfer组件功能。内有注释使用说明
el-table树形表格表单验证(列表生成序号)
10-15
在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格...
elementui的el-table自定义控制展开事件，实现“展开”“收起”的切换（两种效果）【超级完整式代码】
lqlq54321的博客
01-25 2335
全网代码最全：elementui的el-table自定义控制展开事件，实现“展开”“收起”的切换（两种效果）
el-table表格嵌套子表格，对当前展开行内容修改，当前行默认展开
最新发布
m0_50873766的博客
06-07 403
在设置type="expand"的el-table-column标签里插入<template slot-scope="props">来创建自定义模版，里面可以直接嵌入el-table表格，作为子表。如果数据是接口获取，完成操作后要刷新接口，获取最新数据，这样会发现，当前操作的子表默认不展开，如何刷新接口默认展开当前操作行；遇到子节点嵌套父节点，并带有表头，使用el-table树状结构，通常是不支持的。需要使用expand-row-keys属性，添加在父表，嵌套子表的位置。
element中的table表格点击某一个td展开新的一行
m0_70373529的博客
06-28 2646
还有就是给点击的那个td元素添加一个 标识（ columnshow:true,），当这个标识为true的时候就触发这个 toggleRowExpansion 方法。给这个拥有标识的元素的数据 添加一个状态传递给 toggleRowExpansion 控制行的展开与隐藏。设置点击某一个td元素展开下面的table表格数据最开始的就是需要先把 展开行的图标隐藏掉。给这个展开的el-table-column 设置宽度为1px 然后对图标进行隐藏。点击展开行最重要的方法就是table表格自带的一个api。
Element-ui中el-table展开行
m0_51431448的博客
05-17 7945
展开行在el-table中以及提供了，使用也很简单，不过就是它只能点击左侧箭头icon来控制展开收缩，我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合（因为点击icon的时候不会触发row-click），然后展开的时候就得通过设置expand-row-keys这个来控制收缩，注意使用这个必须要设置row-key
element table 展开行展开状态
weixin_45786429的博客
06-17 2064
如果设置table展开列只能有限展开一行时可以根据第二个参数的length来进行判断，如果允许同时展开多行时，这需要判断第二个参数数组中是否包含第一个参数的值，如果包含则是展开，如果不包含则是收起。expand-change会获取两个参数，第一个参数是当前行的数据，第二个参数是当前展开行的数组，注：展开时数组加一收起时数组减一。借助expand-change的入参实现。
el-table自定义展开行
weixin_48005976的博客
09-27 5315
el-table自定义展开行
Vue - Element el-table 行的展开与折叠
iotjin的专栏
11-24 3644
【代码】Vue - Element el-table 行的展开与折叠。
vue el-table实现行内编辑功能
10-15
首先，我们需要在`el-table`的表头部分自定义一个“新增”按钮，以便用户能够动态添加新的行数据。这可以通过使用`slot="header"`来完成。在`<template>`标签中定义一个按钮，绑定点击事件`@click`，当点击时调用...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
4. **调用导出功能**：在`el-table`中添加一个按钮或触发器，当用户点击时，调用`exportToExcel`函数，传入所有分页数据和表格的列定义。 至此，你已经成功地在Vue.js的`el-table`中实现了前端导出分页数据到Excel...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
element-ui中el-table点击其他自定义按钮展开table中某一行
茂茂的博客
02-17 4915
在日常开发中，我们遇见了会有点击某些按钮，使得表格行展开的需求，这时候去查看文档 element-ui（table） 这里官方提供了示例为在行最左侧有一个展开合并icon，但是点其他地方不能展开，我们又想点其他地方而展开 我们看见是在table-column上定了type为expand，而该列里面的自定义模板便是展开后显示的内容 我们想要实现点击自定义功能，继续查阅文档： 这里的expand-row-keys文档解释说可以设置当前已展开的行，那么我们可以给table绑定这个属性，在点击方法里面进行绑定
【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行
热门推荐
Sabrina_cc的博客
08-01 1万+
对于el-table自带展开行，功能已经实现，但是每次操作之后el-table的展开行都关闭了这样用户体验很不友好。这是el-table不是很友好的地方，每次页面刷新都会默认关闭所有的行。 希望：对于每次展开行的操作，操作之后该行继续展开。...
Element Plus ＜el-table＞ 组件之展开行Table在项目中使用
夏日漱石的博客
08-20 1804
Element Plus 组件之展开行Table在项目中使用
Table 展开行功能，打开展开项和关闭展开项
goods_yao的博客
10-27 4755
组件 Table 展开行功能，打开展开项和关闭展开项
element plus之el-table行融合+列融合+小计行+自定义控件+样式自定义方案
visket2008的专栏
11-04 6045
旨在解决项目过程中遇到基于el-table实现项目需要的在线类似Excel的编辑统计展示能力，如何应对行列融合、样式修正、小计行添加等需求如何处理。项目web端使用的是vue3+element plus，下面代码介绍等相关内容均以vue3+ts语法描述。
ElementUI el-table 的自定义合计行及自定义合并单元格
m0_68964998的博客
07-21 1611
这里我表格使用了heigth="63vh",固定了高度，开启合并行的时候合并行没有显示出来，需要给表格加上 ref="table'，再在生命周期update函数里加上以下代码。
elementui el-table折叠表格，点击主表数据展开从表明细
weixin_45616483的博客
07-25 5038
这个方法会传入一个参数，用console.info(val)可知，这是这个主表行的记录，根据主表id查询获取子表记录，用this.$set，将子表list放入主表中。用element-ui 的el-table实现：主表table可实现展开行显示关联的明细表table的列表数据，效果图如下。二.展开行时，会触发 expan-change事件，自定义一个expandChange方法，用于在展开行时加载明细表数据。三.若要同时实现点击主表行展开明细表，需要添加点击行时间。一.开启el-table展开行的功能。
el-table-column 自定义内容
03-10
作用域插槽允许你在 el-table-column 中使用自定义的模板，并且可以访问到当前行的数据。 以下是一个示例，展示了如何使用作用域插槽来自定义 el-table-column 的内容： ```html <el-table :data="tableData"> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值