element-ui中el-table点击其他自定义按钮展开table中某一行

最新推荐文章于 2024-08-08 21:52:27 发布
最新推荐文章于 2024-08-08 21:52:27 发布
阅读量5k 收藏 6
点赞数 5
分类专栏： Vue html+css JS 文章标签： ui vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44029226/article/details/129085834
版权
JS 同时被 3 个专栏收录
43 篇文章 0 订阅
订阅专栏
Vue
14 篇文章 1 订阅
订阅专栏
html+css
7 篇文章 0 订阅
订阅专栏

element-ui中el-table点击其他自定义按钮展开table中某一行

在日常开发中，我们遇见了会有点击某些按钮，使得表格行展开的需求，这时候去查看文档
element-ui（table）
在这里插入图片描述
这里官方提供了示例为在行最左侧有一个展开合并icon，但是点其他地方不能展开，我们又想点其他地方而展开
在这里插入图片描述
我们看见是在table-column上定了type为expand，而该列里面的自定义模板便是展开后显示的内容
我们想要实现点击自定义功能，继续查阅文档：
在这里插入图片描述
这里的expand-row-keys文档解释说可以设置当前已展开的行，那么我们可以给table绑定这个属性，在点击方法里面进行绑定的值，而进行控制展开与否：
在这里插入图片描述
给想要点击的div上绑定click方法，并控制expands数组
在这里插入图片描述
此外，也需要给table绑定上row-key，因为这里会用row-key来对哪行展开进行控制

在这里插入图片描述
可以进行控制了后，我们发现前面的icon太丑了，不符合ui草图
在这里插入图片描述
我们粗暴点，先把icon隐藏掉
在这里插入图片描述
然后给这一列宽设置为1（设置为0我试过，在不同分辨率的屏幕会不一样）

在这里插入图片描述

然后这样就能完美实现了
在这里插入图片描述

茂茂睡不醒
关注
专栏目录
Element-ui中el-table展开行
m0_51431448的博客
05-17 8387
展开行在el-table中以及提供了，使用也很简单，不过就是它只能点击左侧箭头icon来控制展开收缩，我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合（因为点击icon的时候不会触发row-click），然后展开的时候就得通过设置expand-row-keys这个来控制收缩，注意使用这个必须要设置row-key
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI是一款基于Vue.js的开源UI组件库，它提供了丰富的界面组件，如表格（el-table）、按钮、提示、下拉菜单等，极大地简化了Web前端开发过程。然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置...
el-table自定义展开行
weixin_48005976的博客
09-27 5554
el-table自定义展开行
Element-ui的el-table表格嵌套如何默认展开行，试试这个吧！（芋道源码yudao-cloud 二开笔记）
最新发布
qq_31676725的博客
08-08 402
在el-table组件中有默认展开的属性expand-row-keys需要配合row-key使用，可能是我用的方式不对，用了不生效。所以我索性换一种解决方案。通过 Vue 的 ref 方法手动展开第一行。
el-table 点击行-显示当前展开行
qq_44109588的博客
03-06 952
【代码】el-table 点击行-显示当前展开行。
el-table展开行，点击展开接口获取数据，expand-row-keys获取展开项
Shining_F的博客
07-18 537
expand-row-keys获取展开项
element table 通过点击行 开关展开行
狗狗狗亮的博客
03-31 1666
还有一点就是，当 table的内容只有一行，并且这一行的开展内容过多而并且超出的table高度的，这个时候table不会自适应出现滚动条，但在第二次点击的时候会自适应出现滚动条。我这里是在请求事件里面将table的高度 减少1px ，就可以在第一次的时候自适应。展现的效果是手风琴模式的，通过点击行内容，控制行的展开与关闭。但需要注意的是，在搜索新的数据，或者翻页的时候，要记得把 expands 数据清空，不然会出现样式错误。现需要点击行就可以展开和关闭。本项目里，由于展开行里的内容，是另一请求返回的内容。
element table 展开行 通过自定义按钮
qq_32555123的博客
09-08 822
【代码】element table 展开行 通过自定义按钮。
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
element-ui组件table实现自定义筛选功能的示例代码
10-17
在本文中，我们将深入探讨如何使用element-ui组件库中的table组件实现一个自定义的筛选功能。element-ui是一个流行的Vue组件库，它提供了各种各样的UI组件，以帮助开发者快速构建高质量的Web界面。其中，table组件是...
element ui table（表格）实现点击一行展开功能
10-17
在Element UI中，`el-table` 是一个强大的表格组件，它可以方便地进行数据展示和交互。在本例中，我们要实现的功能是点击表格的一行展开显示更多详细信息。以下是如何利用Element UI的`el-table`组件实现这个功能的...
使用element-ui table expand展开行实现手风琴效果
10-17
主要介绍了使用element-ui table expand展开行实现手风琴效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
如何将elementui的el-table的展开行事件用自定义的按钮控制，并且可以实现“展开”“收起”的切换
wzy_PROTEIN的博客
09-26 5204
需求是表格内每行点击展开按钮要展开内容，查看elementUI的官网有展开例子，但是官网的例子是点击表格前的箭头来控制展开收起的。
el-table 自定义展开按钮 ,并触发懒加载事件
weixin_58572700的博客
05-07 590
找到这个元素,直接修改css即可隐藏。
el-table表格处理自定义添加行的展开
qq_45541930的博客
08-22 587
对每一条数据增加一个唯一值，这里使用到uuid解决。当然uuid不会在后端保存，所以如果数据回填展示也用了这个组件，name在请求到的数据上需要提前加上该字段。通常使用el-table的展开行属性比较简单，从官网拿来就可以用，实现方式通过row-key绑定一条数据的唯一值，如id之类。expand-row-keys绑定一个数组，数组中值对应这一行的key，所以这一行对应的会展开。比如点击按钮新增一行，那么这些新增的空数据没有唯一值怎么样去控制。中间根据相关操作插入移除即可实现展开与收缩。
【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行
热门推荐
Sabrina_cc的博客
08-01 1万+
对于el-table自带展开行，功能已经实现，但是每次操作之后el-table的展开行都关闭了这样用户体验很不友好。这是el-table不是很友好的地方，每次页面刷新都会默认关闭所有的行。 希望：对于每次展开行的操作，操作之后该行继续展开。...
element-ui el-table表格展开行 对当前行操作，当前行默认展开
qq_69775429的博客
04-20 640
点击上下架状态但是展开行依旧是展开的。页面初始化展开某一行的话。
element-ui中el-table展开
07-15
在Element UI中，要展开`el-table`表格的行，你可以使用`expand-row-keys`属性来控制展开的行。首先，你需要在表格的数据中添加一个属性用于标识是否展开该行，比如命名为`expanded`。然后，在`el-table`组件上添加`expand-row-keys`属性，并将其绑定到一个数组，用于存储展开的行的唯一标识。最后，在表格的列配置中，使用`scoped-slot`来自定义展开的内容。 下面是一个示例代码： ```html <template> <el-table :data="tableData" :expand-row-keys="expandedRows" @expand-change="handleExpandChange" > <!-- 自定义展开内容 --> <template v-slot="{ row }"> <el-form :inline="true"> <el-form-item label="姓名"> {{ row.name }} </el-form-item> <el-form-item label="年龄"> {{ row.age }} </el-form-item> <!-- 其他表单项 --> </el-form> </template> <!-- 表格列配置 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <!-- 其他列配置 --> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, expanded: false }, { name: '李四', age: 20, expanded: false }, // 其他数据 ], expandedRows: [] // 存储展开的行的唯一标识 }; }, methods: { handleExpandChange(row, expanded) { // 当展开行变化时更新expandedRows数组 if (expanded) { this.expandedRows.push(row); // 将展开的行添加到数组中 } else { const index = this.expandedRows.findIndex(item => item === row); if (index > -1) { this.expandedRows.splice(index, 1); // 从数组中移除收起的行 } } } } }; </script> ``` 这是一个基本的示例，你可以根据你的实际需求自定义展开内容和其他列配置。请注意，你需要根据实际情况修改表格数据和列配置的属性名。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

茂茂睡不醒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值