vue中的el-table多选 选中一定数量不可再选

在Vue.js中，`el-table`组件结合Element UI库提供了一种动态表格的功能，包括多选功能。如果你想要限制用户只能选择特定数量的选项而不允许继续添加，你可以通过以下步骤实现：

1. 定义数据结构：首先，在data里维护一个数组，用于存储选中的项，并设置一个计数器变量记录已选的数量。

data() {
  return {
    selectedItems: [], // 存储选中的表格行
    maxSelectedCount: 10, // 设置最大选择数量
  };
}

2. 使用v-model绑定selectedItems数组：在`<el-checkbox>`或`<el-checkbox-group>`上使用v-model，当用户选择或取消选择时更新selectedItems数组。

3. 添加事件处理：监听`selection-change`事件，检查当前选中数量是否超过限制。如果超出，则阻止后续的选择并给出提示。

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <!-- ... -->
    <el-table-column type="selection" />
    <!-- ... -->
  </el-table>
</template>

<script>
methods: {
  handleSelectionChange(val) {
    if (val.length > this.maxSelectedCount) {
      val.splice(this.maxSelectedCount);
      alert('已达到最大选择数量！');
    }
  },
}
</script>

4. 表格列模板：为了显示已选数量，可以在表头添加一个计算属性列，显示当前已选数量。

<template>
  <el-table-column label="已选数量" width="120">
    <template slot-scope="scope">
      <span>{{ selectedItems.length }}</span>
    </template>
  </el-table-column>
</template>