vue elementui表格获取某行数据(slot-scope和selection-change方法使用)
效果图:
1.当写后台管理页面时,使用element ui里的table表格时,表格中有操作按钮,获取当前行的数据时,我们可以使用 slot-scope="scope"来获取。
<el-table-column label="操作" align="center" prop="auditStatus" width="180" fixed="right"> <template slot-scope="scope"> <el-button type="text" size="large" @click="audit(scope.row)">审核</el-button> </template> </el-table-column>
audit(row){ console.log(row) },
打印可得当前行数据,你就可以处理这些数据了
2.但如果要实现的功能是在表头上了,例如图里的批量审核,那要怎么获取当前前勾选的这一行的数据呢?这时我们可以用表格中提供的@selection-change="handleSelectionChange" 的multipleSelection来实现。
<template> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="title" label="作品名称" align="center" width="160"> </el-table-column> <el-table-column prop="count" label="作品数量" align="center" min-width="160"> </el-table-column> <el-table-column prop="price" label="作品价格" align="center" min-width="160"> </el-table-column> </el-table> </template>
data(){ return { multipleSelection:[] } } //获取所有选择的项 handleSelectionChange(val) { console.log(val) this.multipleSelection = val; },
打印可得当前行数据,你就可以处理这些数据了
例如:
<el-form-item> <el-button type="primary" @click="batchTransferTip()">批量审核</el-button> </el-form-item>
//批量审核 batchTransferTip() { if (this.multipleSelection.length == 0) { this.common.messageTip("请选择要审核的作品", "error"); return false; } else { this.editboxName = "verify"; let planIdList = []; //遍历数据 for (let item of this.multipleSelection) { planIdList.push(item.id); } this.propData.id = planIdList; } },
注意:this.multipleSelection.length 为选择了多少项。
拿当前选中的行的数据,进行传值,实现批量审核功能。
ps:Vue element怎么获取table表格当前行数据和索引值
怎么拿表格当前行数据平时我们在使用表格时通过template的slot-scope="scope",使用scope.row拿到当前行的数据
<el-table max-height="290" :data="userTableData" border style="width: 100%"> <el-table-column label="名字"> <template slot-scope="scope"> {{scope.row.name}} </template> </el-table-column> <el-table-column label="年龄"> <template slot-scope="{row}"> {{row.age}} </template> </el-table-column> </el-table>
怎么拿表格当前行索引值
<el-table max-height="290" :data="userTableData" border style="width: 100%"> <el-table-column label="序号"> <template slot-scope="scope"> {{scope.$index+1}} </template> </el-table-column> </el-table>
到此这篇关于vue elementui表格获取某行数据(slot-scope和selection-change方法使用)的文章就介绍到这了,更多相关vue elementui表格获取某行数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
- Vue 使用 ElementUi el-upload 手动上传文件限制上传文件类型大小同名等进行限制
- vue中使用elementUI自定义校验及点击提交不生效问题解决办法
- vue使用elementUI组件实现分页效果
- Vue3项目中引入ElementUI并使用的示例详解
- Vue ElementUI在el-table中使用el-popover问题
- vue elementUi中的tabs标签页使用教程
- vue3项目如何使用样式穿透修改elementUI默认样式
- Vue使用ElementUI动态修改table单元格背景颜色或文本颜色
- VUE-ElementUI 时间区间选择器的使用
- Vue引入ElementUI并使用的详细过程
相关文章
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
这篇文章主要介绍了Vue中使用create-keyframe-animation与动画钩子完成复杂动画,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-04-04vue的el-select绑定的值无法选中el-option问题及解决
这篇文章主要介绍了vue的el-select绑定的值无法选中el-option问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论