vue3 + ts + vite + element-plus 限制element-plus table多选数量，其它禁用，不能选中

效果图：

完整的小样例：

<template>

  <div>

    <el-table :data="allnews" style="width: 100%;" @selection-change="handleSelectionChange">

      <el-table-column align="center" type="selection" width="55" :selectable="selectable" />

      <el-table-column align="center" label="序号" width="80" type="index" />

      <el-table-column align="center" prop="name" label="栏目" width="140" />

    </el-table>

  </div>

</template>

<script lang="ts" setup>

import { reactive, ref } from "vue"

//模拟数据

const allnews = ref([{ id: "110", name: "111" }, { id: "112", name: "000" }, { id: "113", name: "000" }])

//复选框勾选上之后，赋予新的数组数据

const checkboxdata = ref([] as any)

//勾选时某一行的数据

const handleSelectionChange = (val: any) => {

  console.log(val);

  checkboxdata.value = [...val]

}

//超出选择条数时禁用勾选

const selectable = (row: any, index: number) => {

  //根据实际情况，真实数据的id改变其中的id名称，这里的id是数据里面的id，真实数据极少有直接是id名字的

  index = checkboxdata.value.findIndex((item: any) => item.id === row.id)

  //需要限制多少条随便写

  if (checkboxdata.value.length >= 2) {

    //勾选取消后需要重新返回勾选状态

    if (index !== -1) {

      return true

    } else {

      return false

    }

  } else {

    return true

  }

}

</script>

<style>

/* 不需要全选按钮,将其藏起来 */

/* 注意：不要放在style标签有 scoped 的属性里面，单独开一个纯净的style标签 */

.el-table__header .el-checkbox {

  display: none;

}

</style>