需求: 1.比如最多只能选中100条 2.选中达到100条后,其他没选中的是禁选的,已选中的可以去掉选中状态。 解决方法:
<el-table ref="table" row-key="id" border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="110" :reserve-selection="true" fixed :selectable="checkSelectable"></el-table-column>
</el-table>
data() {
return {
maxCount: 100,
selection: []
}
},
methods: {
handleSelectionChange(selection) {
if (selection.length >= this.maxCount) {
this.$message.warning('已超过' + this.maxCount + '条数据,请在下一批处理')
// 超出的数据改变选中状态
let tempArr = selection.slice(this.maxCount)
tempArr.forEach(ele => {
this.$refs.table.toggleRowSelection(ele, false)
})
// 截取前100位
selection = selection.slice(0, this.maxCount)
}
this.selection = selection
},
checkSelectable(row, index) {
let isSelected = this.$refs.table.selection.includes(row)
return !(this.$refs.table.selection.length >= this.maxCount) || isSelected
}
}