elementUI table 怎么控制复选框只能选中两个？

Question

怎么控制表中的复选框只能选中两个，当选中第三个时自动取消第一个选中的复选框；代码怎么实现呢

Answer 1

演示效果

首先在 el-table 标签上添加，

ref="multipleTable" @select="select" @select-all="selectAll"

再在 methods 中添加以下方法，即可

select(selection, row) {

    console.log('当用户手动勾选数据行的 Checkbox 时触发的事件', selection, row)

    // 选择项大于2时

    if (selection.length > 2) {

        let del_row = selection.shift();

        // console.log('把数组的第一个元素从其中删除后', selection);

        this.$refs.multipleTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

    }

},

selectAll(selection) {

    console.log('当用户手动勾选全选 Checkbox 时触发的事件', selection)

    // 选择项大于2时

    if (selection.length > 2) {

        selection.length = 2;

    }

},