el-table实现至多勾选N个的选项

<template>
    <div>
        <!-- <el-table :data="tableData" ref="multipleTable" type="selection" style="width: 100%" :row-key="rowKey" @selection-change="handleSelectionChange"> -->
        <el-table :data="tableData" ref="multipleTable" type="selection" style="width: 100%" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="45" reserve-selection :selectable="rowSelectable"></el-table-column> -->
            <el-table-column type="selection" width="45" :selectable="rowSelectable"></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>
    </div>
</template>

<script>
import { data } from '../js/tableData.js';

export default {
    name: 'TableDemo',
    data() {
        return {
            tableData: data.map((v, i) => {
                v.id = i;
                return v;
            }),
            multipleSelection: [],
            maxAllowedNumber: 10,
            // rowKey: 'id',
        };
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 超出选择条数时禁用勾选
        // rowSelectable(row, index)
        rowSelectable(row) {
        // console.log('row', row, index);
        const selectedAry = this.$refs.multipleTable.store.states.selection; // 勾选了的行的数组，初始化，勾选都会触发，触发次数就是表格行的数量
        const isChecked = selectedAry.some((item) => item.id == row.id);
        return selectedAry.length < this.maxAllowedNumber || isChecked;
        },
    },
}
</script>

效果如下：