ElementUI表格如何获取当前行的数据？

话不多说，先上ElementUI的部分表格html代码：

                    <el-tableref="multipleTable":data="musics"tooltip-effect="dark"><el-table-columntype="selection"width="45"></el-table-column><el-table-columnlabel="编号"width="50"prop="musicId"></el-table-column><el-table-columnlabel="歌曲名字"width="auto"prop="musicName"></el-table-column><el-table-columnprop="musicAlbumName"label="专辑名字"width="auto"></el-table-column><el-table-columnprop="musicMp3Url"label="歌曲URL"show-overflow-tooltip></el-table-column><el-table-columnprop="musicAlbumPicUrl"label="专辑URL"show-overflow-tooltip></el-table-column><el-table-columnprop="musicArtistName"label="歌手"show-overflow-tooltip></el-table-column><el-table-columnprop="date"label="创建日期":formatter="dateSwitch"width="auto"></el-table-column><el-table-columnlabel="操作"show-overflow-tooltip><template slot-scope="scope"><el-button type="primary" size="min" plain @click="edit(scope.row)">编辑</el-button><el-button type="danger" size="min"  plain @click="del(scope.row.musicId)">删除</el-button></template></el-table-column></el-table>

假如这时候表格中的数据是已经显示过的，要想拿到当前表格中指定行数的数据时，则需要在
template标签中添加这个属性即可 slot-scope=“scope” 同时写出一个点击事件的方法例如上述的编辑按钮
其中 scope.row就是拿到当前行的所有数据，如果要想拿到制定数据，则需要指定你当前行指定需要的数据的字段就好，如：scope.row.musicId

<script>import moment from 'moment'export default {data() {return {music: {musicName: '',musicAlbumName: '',musicAlbumPicUrl: '',musicMp3Url: '',musicArtistName:'',date:'',musicId:'',},}methods: {//日期转换dateSwitch(row,column,currData){return moment(currData).format("YYYY-MM-DD")},//跳转页面toPage(currPage){// let that = this// this.axios.get("/music/findByPage?pageNum=" + currPage).then(function (respData) {//     that.musics = respData.data.list,//     that.currentPage = respData.data.pageNum//     that.totalSize = respData.data.total// })this.axios.get("/music/findByPage?pageNum=" + currPage).then((respData) => {this.musics = respData.data.list,this.currentPage = respData.data.pageNum,this.totalSize = respData.data.total})},//编辑edit(music){this.music = musicthis.updateDialogVisible = true;},//删除del(musicId){let that = thisthis.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$http("/music/deleteById?musicId=" + musicId).then(function (respDate) {if (respDate.data == "success") {that.$message({type: 'success',message: '删除成功!'});that.toPage(that.currentPage);} else {that.$message({type: 'error',message: '删除失败!'});that.toPage(that.currentPage);}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}}
</script>

ElementUI表格如何获取当前行的数据？相关推荐

ant table表格整行点击事件并获取当前行的数据
实现效果:点击表格中某一行,或者点击表格中某一行的一个字段,获取当前行的 item 下标数据,并用 Link 标签传参,下一个页面接收的实现. 如果使用 router 跳转路由传参,需要导入 impo ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
layui数据表格，操作当前行，数据重载（刷新表格数据）
最近项目中使用到layui前段框架,在修改完当前行的数据,并同步到数据库后,页面展示的还是旧数据虽然刷新页面可以解决问题,但这小问题还是让人不爽,人类总是懒惰的,绝不自己点刷新(狗头) 清空学生信息 ...
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据目录布局代码 ...
Antd之获取table每一行数据
先看效果图第一步:在你的action外面套一个template 第二步:获取当前行的数据第三步:测试分别点击两个查看按钮,打印出不同的数据
elementui表格获取mysql数据_vue+element-ui表格封装tag使用slot插槽标签
我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性.在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性.首先了解什么是插槽. 插槽省去官方的复杂 ...
elementUI 表格合并相同数据的列
elementUI 表格如何合并相同数据的列? 在编写表格table中,会出现合并数据相同的列这种需求,如图: 实现方法添加span-method 方法,elementUI提供了span-meth ...
layui循环数据并渲染_layui使用表格渲染获取行数据的例子
需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据. 解决办法: 在render中增加字段: done: function (res, curr, count) { // ...
ElementUI表格数据批量选中操作
ElementUI表格数据批量选中操作最近做项目时碰到个需求,要对表格中的数据批量处理,花了点时间最终解决了这个问题 elementui表格中封装了多选框,在el-column中选择type为sel ...
layui当前表格第一行_layui使用表格渲染获取行数据的例子
需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据. 解决办法: 在render中增加字段: done: function (res, curr, count) { // ...

ElementUI表格如何获取当前行的数据？

ElementUI表格如何获取当前行的数据？相关推荐

最新文章

热门文章