Vue element table按钮实现当行expand详情(右箭头)
文章目录前文按钮触发展开点击一行触发总结前文 Vue element table提供了隐藏字段的详情功能,通过右箭头触发,官网上例子如下图。但是有时候因为需求变化,要求通过按钮触发,或者点击一行触发,这里简单分享下实现方法。按钮触发展开 在官网table methods提供了一个方法:toggleRowExpansion,同于切换某一行的展开状态,具体说明如下: 所以通过该方法,...
·
前文
Vue element table提供了隐藏字段的详情功能,通过右箭头触发,官网上例子如下图。但是有时候因为需求变化,要求通过按钮触发,或者点击一行触发,这里简单分享下实现方法。
按钮触发展开
在官网table methods提供了一个方法:toggleRowExpansion,同于切换某一行的展开状态,具体说明如下:
所以通过该方法,我们可以这样完成:如下图,需求是点击查看详情,就能触发最左边的箭头展示详情页面。
先在对应列的button里插入clickButton这个函数,传入row参数:
<el-button v-else type="primary" @click = 'clickButton(row)'>查看详情</el-button>
接着定义clickButton函数:
clickButton(row){
this.$refs.refTable.toggleRowExpansion(row)
}
看到了引入refTable的toggleRowExpansion方法,所以我们需要在对应的table再定义ref = “refTable”:
<el-table v-loading="listLoading" ref="refTable"
:data="DataList"
row-key="id" border fit highlight-current-row style="width: 100%">
到此为止,就可以简单地实现一个点击查看详情的功能了!
点击一行触发
关于点击一行查看详情也很简单,核心都是利用refTable.toggleRowExpansion(row)这个函数,区别就是要在table额外定义@row-click这个事件,如下:
<el-table
:data="DataList"
@row-click="clickButton" ref="refTable"
style="width: 100%">
总结
本次总结如下,谢谢观看~
更多推荐
已为社区贡献2条内容
所有评论(0)