使用vue3和element-plus的table表格如何设置选中禁用

<el-table
 ref="tableRef"
 :data="tableData"
 :show-header="false" 
 @select="selectRow"
 @selection-change="handleSelectionChange">
  <el-table-column
                type="selection"
                width="55"
                :selectable="selectable"
                >

data.rows.forEach((row) => {
 if(row.choose) {
 		// 给表格数据赋值的时候 设置表格已选中的数据
 		// toggleRowSelection 这个属性是element-ui的详细查手册
         tableRef.value.toggleRowSelection(row, true)
     }
 })
 

// 这个方法主要是为了设置表格当前行是禁用状态可以可选择状态
const selectable = (row, index) => {
  return row.choose ? false : true
}

需要三部分配合使用才能完成

效果贴图 因为涉及业务代码不太方便贴图后期 写个小demo完善一下.

还有一种情况是要支持多选选中的数量。我这里是最大上限选中10条。当已经选中10条后其他的禁用选择，如果是9条又要开放选择。

// html
<el-table-column type="selection" width="55" :selectable="selectable">
// 当前已经选中的数据 通过computed计算出来
const selectIds = computed(() => {
    return topics.value.map((item) => item.id)
 })

const selectable = (row, index) => {
            if (selectIds.value.length < 10) {
                return true
            } else {
                if (selectIds.value.includes(row.id)) {
                    return true
                }else {
                    return false
                }
            }
        }

如图 当勾选数据到10的时候其他数据会被禁用 禁止勾选。
如果当前是9条 禁用条件会放开~