element 表格分页 限制多选条数_el-table 翻页如何限制多选数

效果图：

官方方法解释：

案例：

<template>
  <div>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          align="center"
          type="selection"
          :selectable="selectable"
          :reserve-selection="true"
          width="55">
      </el-table-column>
      <el-table-column min-width="200" prop="id" label="商品信息"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        tableData: [
          {id: 1},
          {id: 2},
          {id: 3},
          {id: 4},
          {id: 5},
          {id: 6},
          {id: 7},
          {id: 8},
          {id: 9},
        ],
        multipleSelectionList: [],
        limitNum: 2, //限制数量
      }
    },
    methods: {
      // 限制数量方法
      limitFn (list) {
        this.$refs.multipleTable.clearSelection();
        for (let i = 0; i < this.limitNum; i++) {
          this.$refs.multipleTable.toggleRowSelection(list[i]);
        }
      },
      // 判断复选框是否可以选择
      selectable (row) {
        let index = this.multipleSelectionList.findIndex(v => v.id === row.id)
        if (this.multipleSelectionList.length >= this.limitNum) {
          if (index !== -1) {
            return true
          } else {
            return false
          }
        } else {
          return true
        }
      },
      // 绑定表格key，用于翻页后也不会丢失表格状态
      getRowKey (row) {
        return row.id
      },
      // 回调表格选择的数据
      handleSelectionChange (list) {
        if (list.length > this.limitNum) {
          this.limitFn(list)
          return
        }
        this.multipleSelectionList = [...list];
      },
    }
  }
</script>

limitNum 就是需要限制的数量