1. 需求描述
- 控制表格的多選，最多只能選擇5條數(shù)據(jù)，并且其他項(xiàng)禁用
2. 需求描述
<!--
@selection-change 當(dāng)選擇項(xiàng)發(fā)生變化時會觸發(fā)該事件
-->
<template>
<el-table
ref="multipleTableRef"
v-loading="loading"
:data="tableList"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="selection" width="60" :selectable="selectable" />
<!-- 其他數(shù)據(jù)表格列 -->
</el-table>
</template>
<script setup lang="ts">
import { toRefs, ref } from 'vue';
// 已選擇的數(shù)據(jù)行
const multipleSelection = ref([]);
/** 控制表格只能選擇5條數(shù)據(jù) */
const selectable = (row) => {
if (multipleSelection.value.includes(row)) {
// 已選擇的行，可取消選擇
return true;
} else if (multipleSelection.value.length >= 5 && !row.selected) {
// 超過最大選擇條數(shù)，且當(dāng)前行未被選中時，禁用
return false;
} else {
// 其他情況下可選
return true;
}
};
const handleSelectionChange = (val: any) => {
multipleSelection.value = val;
};
</script>
<style lang="less" scoped>
// 隱藏全選按鈕
/deep/ .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>
文章來源地址http://www.zghlxwxcb.cn/news/detail-601723.html
文章來源：http://www.zghlxwxcb.cn/news/detail-601723.html
到了這里，關(guān)于vue3-element-plus，控制表格多選的數(shù)量的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
