Vue element table按钮实现当行expand详情(右箭头)

文章目录

前文
按钮触发展开
点击一行触发
总结

前文

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%">

总结

本次总结如下，谢谢观看~

Vue element table按钮实现当行expand详情(右箭头)相关推荐

动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
vue element table 相关页面跳转实例代码
vue element table 相关页面跳转实例代码 <el-table-column width="100px" align="center" la ...
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
一.效果图目前10种筛选类型看看是否是你需要的,本文可能有点长 ,我尽可能的给讲清楚,包括源码附上二.无聊发言点击当前行跳转部分数据后缀追加图标某列数据根据状态增加颜色标识三.前言实现 ...
html表格选择一行,vue + element table表格如何默认选中第一行
有一个dialog的对话框,我想要在进入对话框的时候默认选中table的第一个页面dialog部分: :model="zzc" :inline="true" ...
vue element table列表删除某一页的最后一条数据之后页面不自动跳到上一页
项目场景:element 分页器提示:这里简述项目相关背景: 例如:项目场景:删除某一页的最后一条数据之后页面不自动跳到上一页解决方案: <el-pag ...
vue element table 修饰
<template><el-table border stripe ...
vue element table switch开关组件
<template><el-table:data="tableData"style="width: 100 ...
vue element table
el-table绑定数据框数据 el-table-column绑定key template slot-socpe用来接收该行的数据,用来定制化一些操作 <template><!--d ...
vue + element table 实现搜索关键字高亮展示
本文主要用来记录实现搜索功能后如何高亮显示关键字,不介绍搜索功能的实现,文末附带的参考连接有更为详细的介绍,有需要的同学可以进行参考 // 搜索框 <div @keyup.enter=&quo ...

Vue element table按钮实现当行expand详情(右箭头)

文章目录

前文

按钮触发展开

点击一行触发

总结

Vue element table按钮实现当行expand详情(右箭头)相关推荐

最新文章

热门文章