vue3 el-table多选限制选择数量

在Vue 3中，使用Element Plus创建一个带有多选限制的el-table组件，可以通过监听selection-change事件来实现。以下是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    :max-height="maxHeight"
    style="width: 100%"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const maxSelectionNum = 3; // 设置最多可选择的数量
const tableData = ref([
  // 数据填充
]);
const maxHeight = ref('400px'); // 表格的最大高度
 
const handleSelectionChange = (selection) => {
  if (selection.length > maxSelectionNum) {
    // 如果选择的数量超过了限制，取消最后一个选择
    tableData.value.splice(selection.length - maxSelectionNum, 1);
  }
};
</script>

在这个示例中，我们定义了一个maxSelectionNum变量来限制最多可选择的数量。每次选择变化时，handleSelectionChange事件处理函数会被触发，检查当前选择的数量是否超过了限制。如果超过了，就会取消最后一个选择的项。这样就能够实现多选限制的功能。