项目开发遇到的场景：
1.比如表格最多只能选择四条，选择好四条后，其余的勾选框将不能选择，超过四条将给出提示。
2.点击全选，是会把所有的表格项都选上，点击提交给出提示不能提交，然后用户需要取消部分选中的数据，被取消的数据因为不符合个数将不能再次被选中，直到符合个数才不会提示和可以勾选。
3.不影响并且不影响已经触发其它禁用条件的数据。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue开发：element-ui表格复选超出数量后剩下的全部禁止选择，并且不影响已经触发其它禁用条件的数据</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
padding: 50px;
}
</style>
</head>
<!-- element-ui表格复选超出数量后剩下的全部禁止选择 -->
<!-- https://blog.csdn.net/z294286540/article/details/127675314 -->
<body>
<div id="app">
<template>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" @select="selectLengthChange" @select-all="selectLengthChange">
<el-table-column type="selection" width="55" :selectable="checkedSelectable">
</el-table-column>
<el-table-column prop="name" label="姓名" >
</el-table-column>
</el-table>
<el-button @click="submit" style="margin: 50px;">提交数据</el-button>
</template>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tableData: [{
name: '王小虎1',
type: '1',
id: 1,
}, {
name: '王小虎2',
type: '2',
id: 2,
}, {
name: '王小虎3',
type: '3',
id: 3,
}, {
name: '王小虎4',
type: '3',
id: 4,
}, {
name: '王小虎5',
type: '1',
id: 5,
}, {
name: '王小虎6',
type: '3',
id: 6,
}, {
name: '王小虎7',
type: '3',
id: 7,
}, {
name: '王小虎8',
type: '3',
id: 8,
}],
// 选中的id集合
checkedIds: [],
// 选中的最大个数
maxLength: 4,
}
},
created() {
},
methods: {
// 将勾选的数据放入集合中
handleSelectionChange(val) {
this.checkedIds = Array.from(val, ({ id }) => id);
},
// type为1的数据不能选择和超过最大选择数量的都不能选择
checkedSelectable(row, index) {
if (this.checkedIds.length >= this.maxLength) {
return this.checkedIds.includes(row.id);
}
return +row.type != 1;
},
// 超出个数提示
selectLengthChange(selection, row) {
if (selection.length > this.maxLength) {
this.$message.error(`每次最多提交${this.maxLength}条`);
}
},
submit() {
if (this.checkedIds.length > this.maxLength) {
this.$message.error(`每次最多提交${this.maxLength}条`);
return;
};
this.$message.success(`提交成功`);
console.log(this.checkedIds, '提交的数据')
},
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。