element Table 展开行功能 (只展开一行)

最新推荐文章于 2024-06-07 10:54:39 发布
最新推荐文章于 2024-06-07 10:54:39 发布
阅读量5.4k 收藏 19
点赞数 5
分类专栏： 学习笔记 文章标签： elementui javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44010599/article/details/114888479
版权

参考了博主冰雪为融的文章：https://blog.csdn.net/lhjuejiang/article/details/103816027

我改了一下条件，只允许一行展开，点击展开其他行时已展开的行会关闭，感觉这样体验比较好，效果图如下：
在这里插入图片描述
在html处添加

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height
最低0.47元/天 解锁文章
mofuu
关注
  • 5
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue el-table expand只展开一行
且听风吟的博客
09-10 9404
el-table 有展开行功能，但是展开多行并不好看，所以设置 expand只展开一行。
Element table组件动态设置expand展开项以及同时只展开一项
lucky_fd的博客
04-21 1万+
场景一：table表格展开项过多，界面数据太繁杂影响查看。场景二：Element Table加载的数据发生变化时，会重新渲染界面，之前的展开项会自动关闭，用户需要手动去打开展开项，频繁的手动操作会极大的影响客户体验。
el-table表格嵌套子表格，对当前展开行内容修改，当前行默认展开
最新发布
m0_50873766的博客
06-07 519
在设置type="expand"的el-table-column标签里插入<template slot-scope="props">来创建自定义模版，里面可以直接嵌入el-table表格，作为子表。如果数据是接口获取，完成操作后要刷新接口，获取最新数据，这样会发现，当前操作的子表默认不展开，如何刷新接口默认展开当前操作行；遇到子节点嵌套父节点，并带有表头，使用el-table树状结构，通常是不支持的。需要使用expand-row-keys属性，添加在父表，嵌套子表的位置。
element-ui中的table只展开一行
...
12-19 575
<el-table :data="tableData" style="width: 100%" @expand-change="expandChange" :expand-row-keys="expands" :row-key="getRowKeys" > </el-table> export default { data() { return { tableData: [], //设置row-key只展示一行..
element表格展开行
m0_60599550的博客
11-09 880
想做一个表格，点击可以展开看详情，查了element组件发现可以用type="expand"，效果如下 但是我希望表格展开还是表格，因此改了一下所给的示例代码 <el-table :data="orderInfo" border fixed fit style="width:95.2%;margin:0px auto;" size="medium" > // 以下.
Element-ui中el-table展开行
m0_51431448的博客
05-17 8015
展开行在el-table中以及提供了，使用也很简单，不过就是它只能点击左侧箭头icon来控制展开收缩，我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合（因为点击icon的时候不会触发row-click），然后展开的时候就得通过设置expand-row-keys这个来控制收缩，注意使用这个必须要设置row-key
el-table expand-change 只展开一行，其他行关闭
Alan_ran的博客
04-25 5375
<el-table ref="form" :row-key="id" :expand-row-keys="expands" @expand-change="expandSelect"> </el-table> methods: { expandSelect(row, expandedRows) { this.expands = [] if (expandedRows.length > 0) { row ..
el-table展开行，仅展开单行，部分不可展开
weixin_49284272的博客
12-07 1163
但过多的展开会使得页面显得混乱，所以此类功能中常有要求，一次仅打开一行。自然就会出现禁止打开某一行的情况。饿了么的table展开行，通常可以用来展示一些详细信息，或者二级列表，表格等等内容。
element ui table（表格）实现点击一行展开功能
10-17
综上所述，Element UI的`el-table`组件结合`row-key`、`expand-row-keys`、`type="expand"`列以及`@row-click`事件，可以轻松实现点击表格行展开的功能。通过对数据结构的合理设计和适当的CSS样式调整，我们可以创建...
使用element-ui table expand展开行实现手风琴效果
10-17
这个属性用于指定每一行的唯一标识符，它是一个函数，接受当前行的数据对象`row`作为参数，返回该行的唯一键。例如，`getRowKeys`函数可以返回行的主键。 3. **expand-row-keys属性**： 用于存储当前已展开的行的...
vue element table 表格请求后台排序的方法
12-29
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 <el-...
elementUI 表格展开行
nothing_2020的博客
04-29 2671
这次要实现的是点击哪行展开哪行，其他行关闭（即 每次只展示一行） 效果图 ↓ <el-table :data="tableData" :expand-row-keys="expands" :row-key="getRowKeys" @expand-change="expandSelect" @row-click="clickRow" ref="expandTable" style="width: 100%"> <el-table-column type=
Element table只展开一行
浮梦一场
08-21 1094
Elemet UI table expand只展开一行 属性 运行效果图 <el-table @expand-change="expandChange" > expandChange(row,expandedRows){ if(expandedRows.length>1){ expandedRows.shift() ...
Element UI 表格展开@expand-change 每次只展开一行
文龙刚的博客
11-18 1564
Element UI 表格展开@expand-change 每次只展开一行
vue+element实现表格点击行可以展开功能
热门推荐
小太阳的博客
04-21 1万+
vue+element的例子上只提供了点击图标展开，现在需要点击表格的行也可以展开表格 实现功能如上图所示，不仅可以点击小标展开，也可以点击整行展开 这个功能的需求是：点击小标或者这一整行的时候，去请求后台数据，然后再展示 所以需要element里面的表格组件的四个属性 :row-key="getRowKeys" //可以不需要 :expand-row-keys="expands" // 可以...
如何将elementui的el-table的展开行事件用自定义的按钮控制，并且可以实现“展开”“收起”的切换
wzy_PROTEIN的博客
09-26 4794
需求是表格内每行点击展开按钮要展开内容，查看elementUI的官网有展开例子，但是官网的例子是点击表格前的箭头来控制展开收起的。
vue3+elementplus中的table表格双击某一个td展开新的一行，隐藏展开小图标
lixiaoxia0805的博客
03-07 614
vue3+elementplus中的table表格双击某一个td展开新的一行，隐藏展开小图标。3.绑定事件 ，双击打开/关闭详情，移上去出现文字提示（双击打开/关闭详情），移除隐藏提示。1.隐藏展开小图标，设置 width="1"，样式display: none;2.双击展开,给每排数据加一个标识columnshow。好了，就这样就可以啦！
element中的table使用展开行功能，特定条件下才能点开展开行以及点击整行展开，以及使用合计不显示问题
D浩DzD的博客
07-21 4191
在使用element中的table使用展开行功能时，官网给的示例中每行都可以展开，以及只能通过点击展开图标才能展开，但是需求中是点击整行展开，以及只有某些符合条件的行才有展开功能如下图所示通过设置type=“expand”和Scopedslot可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的Scopedslot相同。...
element实现表格点击行展开功能
weixin_44813417的博客
12-15 1208
<el-table :data="tableData" style="width: 100%" // 以下三项必写 :row-key="getRowKeys" :expand-row-keys="expands" @row-click="clickRowHandle" > // date中 expands: [] // 根据行的id判断 getRowKeys(row) { return row.id; }
element table 实现点击任何一处展开行功能
04-28
Element表格组件是一种非常常见的UI组件，通常用于展示数据并提供交互。其中一个常见的功能是“展开行”，即用户可以点击任何一行或列，以展开或显示更多相关信息。Element表格组件为了实现这个功能，可以使用“scoped slot”技术和v-if指令。 首先我们需要定义一个“slot”容器，以显示额外的信息，当用户点击时显示。在表格中，每一行都有一个相应的“slot”容器，可以用来显示行的详细信息。我们可以在表格的组件中使用“scope slot”技术来定义这个容器。例如，可以通过以下代码定义一个“slot”容器： <template slot-scope="{row}"> <div v-if="expanded[row.id]"> <p>{{row.description}}</p> </div> </template> 在这个例子中，我们定义了一个名为“slot”的模板，并使用了“scope slot”技术。这个模板的作用是显示一行的详细信息。注意到我们使用了“v-if”指令来控制容器的显示，这将在下一步中讲解。 接下来，我们需要在表格中定义“点击事件”，以展开行时触发。表格组件提供了“$emit”方法来触发事件。例如，我们可以在“mounted”生命周期钩子中定义如下的响应函数： mounted() { this.$nextTick(() => { this.$children[0].$on('row-click', this.toggleRowExpansion); }); }, 这里我们监听了子组件（即表格）中的“row-click”事件，并将事件传递给“toggleRowExpansion”函数。在这个函数中，我们可以通过记录哪些行被展开，来控制“v-if”指令的使用： toggleRowExpansion(row) { this.$set(this.expanded, row.id, !this.expanded[row.id]); }, 当用户点击行时，这个函数将查询哪一行被点击，并将其状态设置为“expanded”或“collapsed”。这个状态可以保存在“expanded”对象中，以便后续使用。 最后需要注意的一点是，在表格组件中，如果使用以上的方法来实现“展开行”的功能，需要使用“表格树”模式。这种模式下，每一行都必须包含一个唯一的“id”，并且父行和子行之间需要有一个“children”关系的定义。这些属性都是通过表格组件的“props”参数传入的。例如： <el-table :data="tableData" :row-key="row => row.id" :tree-props="{hasChildren: 'hasChildren', children: 'children'}"> ... </el-table> 这些参数告诉表格组件如何处理行数据，并让组件能够自动生成正确的“children”关系。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值