el-table 多选限制选择数量

`el-table`是Element UI库中的一个表格组件，它提供了一种方便的方式来展示数据并支持交互操作，比如多选功能。当需要对用户的选择进行数量限制时，可以利用`el-table-column`的`props`属性来实现。

首先，你需要在列配置中添加一个自定义的处理函数，例如：

<template>
  <el-table :data="tableData">
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 添加一个自定义列 -->
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button v-if="scope.$index <= maxSelectedCount" @click="handleSelect(scope.row)">选择</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      maxSelectedCount: 10, // 最大选择数
    };
  },
  methods: {
    handleSelect(row) {
      if (this.selectedRows.length < this.maxSelectedCount) { // 检查是否超过最大选择数
        this.selectedRows.push(row); // 添加到已选列表
      } else {
        alert('最多只能选择 ' + this.maxSelectedCount + ' 条'); // 提示超出限制
      }
    },
    selectedRows: [] // 存储已选行
  }
};
</script>

在这个例子中，我们检查当前选择的数量是否小于最大允许值。如果未达到限制，则将行添加到已选列表；如果已满，会弹出警告提示用户。