1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > el-table toggleRowSelection多选表格 切换不同数据修改多行选中状态

el-table toggleRowSelection多选表格 切换不同数据修改多行选中状态

时间:2023-09-10 03:42:53

相关推荐

el-table toggleRowSelection多选表格 切换不同数据修改多行选中状态

elementui[el-table]toggleRowSelection多选表格,切换不同数据修改多行的选中状态

修改多行状态思路: 选中状态->清空状态->选中其他状态

修改多行状态思路: 选中状态->清空状态->选中其他状态

官方案例:点击按钮切换选中状态之后清空状态。

// 官方案例<template><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><template slot-scope="scope">{{scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button><el-button @click="toggleSelection()">取消选择</el-button></div></template><script>export default {data() {return {tableData: [{date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],multipleSelection: []}},methods: {toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection = val;}}}</script>

尝试不同选中数据的发现:重复的数据选中的状态会被反选,未重复数据以添加的形式被选中,无法做到切换的效果。每次切换不同数据展现不同数据被选中的切换效果只能再加一步清空推荐使用第二个for循环方法

async toggleRowSelection (rows) {//切换的效果需要先清空数据await this.$refs.multipleTable.clearSelection()// 再重新选中 //1、使用forEach方法rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});}//2、或者使用for循环方法处理复杂字段 推荐使用for (let i = 0, len = arr.length; i < len; i++) {// that.$refs.collectTable.toggleRowSelection(that.peerData[arr[i]])that.$refs.multipleTable.toggleRowSelection(that.peerData.find(item => {return arr[i] === item.id // 注意这里寻找的字段要唯一,示例仅参考}))}},

记得注意渲染顺序,可用setTimeout与nextTick处理触发机制

setTimeout(() => {this.toggleRowSelection(newVal)}, 1000)//或者this.$nextTick(()=>{this.toggleRowSelection(newVal)})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。