element ui表格点击整行选择_element ui table(表格)点击一行展开

本文介绍了如何在Element UI的表格组件中实现点击行展开功能。通过添加`row-key`、`:expand-row-keys`和`@row-click`属性,并在`rowClick`方法中处理展开和收起逻辑,可以实现点击表格行即展开详细信息。同时,文章提供了可运行的代码示例,解决了数据中缺少唯一标识和展开一行时其他行自动收起的问题。
摘要由CSDN通过智能技术生成

element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染。

element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击右箭头可以展开,我们的很多需求是点击某一行展开

那是不是无法实现呢?其实,借助element ui的一些属性,轻松实现点击某行展开,我们还是用2.0.9版本官网的例子,

3d95c42ae12f20c34789cc928fd23864.png

对齐改造,使之可以做到这点

:data="tableData5"

style="width: 100%"

row-key="id"

:expand-row-keys="expands"

@row-click="rowClick">

{ { props.row.name }}

{ { props.row.shop }}

{ { props.row.id }}

{ { props.row.shopId }}

{ { props.row.category }}

{ { props.row.address }}

{ { props.row.desc }}

<
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值