el-table toggleRowSelection多选表格,切换不同数据修改多行选中状态
el-table toggleRowSelection多选表格,切换不同数据修改多行选中状态
·
elementui[el-table]toggleRowSelection多选表格,切换不同数据修改多行的选中状态
修改多行状态思路: 选中状态->清空状态->选中其他状态
- 官方案例:点击按钮切换选中状态之后清空状态。
// 官方案例
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="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: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-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)
})
更多推荐
已为社区贡献1条内容
所有评论(0)