---

html

<el-table 
	v-loading="loading"
	:data="tableList"
	:row-key="(row) => row.id"
	ref="refTable"
	border
	@selection-change="handleSelectionChange"
>
	<el-table-column type="selection" width="68" align="center" :selectable="handleSelectable" />
	<el-table-column label="姓名" prop="name" />
	<el-table-column label="性别" prop="sex" width="68" align="center">
	<el-table-column label="年龄" prop="age" width="68" align="center" />
</el-table>

---

变量

<script name="Index" setup>
// 表格数据
const tableList = ref([]);
// 默认选中数据，格式与表格数据一致
const list = ref([]);
// 限制数量值
const len = ref(5);
</script>

---

限制数量

/**
 * 限制多选数量
 * @param {Object} row 行数据
 */
function handleSelectable(row) {
  // 已选择的行，可取消选择
  if (tableList.value.includes(row)) {
    return true;
  } else if (tableList.value.length >= len.value && !row.selected) {
    // 超过最大选择条数，且当前行未被选中时，禁用
    return false;
  } else {
    return true;
  }
}

---

设置默认选中

/**
 * 设置表格默认选中
 * @param {Array} arr 表格数据
 */
function handleSetValue(arr, list) {
	list = jsMjShallClone(list);
	list = list.map(item => item.id);
	
	if (arr) {
		arr.forEach((item) => {
			if (list.includes(item.id)) {
				refTable.value.toggleRowSelection(item, true);
			} else {
				refTable.value.toggleRowSelection(item, false);
			}
		});
	} else {
		refTable.value.clearSelection();
	}
}

nextTick(() => {
	handleSetValue(tableList.value, list.value);
});

1、一定要注意nextTick，调了好久都没有成功，以为toggleRowSelection方法有误。后面才想到执行时机可能不对，于是便使用nextTick结果就成功了。如果在vue2，那么会报错，但是vue3不会，也没有效果，这就有点难搞咯！
2、jsMjShallClone是JSON深克隆方法，安装插件指令如下表

npm下载	yarn下载
npm install js-mj-utils	yarn add js-mj-utils

---

style隐藏全选框

<style lang="scss" scoped>
// 隐藏全选按钮
::v-deep .el-table__header-wrapper .el-checkbox {
	display: none;
}
</style>

因为限制了多选数量，所以肯定不能全选咯！万一全选比限制的数量多呢，所以多一事不如少一事，从根本上解决问题，釜底抽薪就好啦！