el-table已经选中的项，通过selectable属性不可以再次选择

CiL#2025-02-19 11:40

示例：

1、表格当前行状态已完成时，不可选择

javascript 复制代码

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


// 表格行是否可选
isRowSelectable (row, index) {
   // 根据row的disable属性决定是否禁用选择
   // console.log(row)
   // 返回 true 则可以选择，返回 false 则禁止选择
   if (row.status === 0) { // 0 待审核可选择
      return true
   } else {
      return false
   }
},

2、根据已选中的项，不可再次选中

父组件：

子组件：

javascript 复制代码

<el-table
    :data="tableData"
    @selection-change="selectionChange"
    ref="multipleTable"
    :selectable="isRowSelectable"
  >
    <el-table-column type="selection" width="55" :selectable="isRowSelectable"></el-table-column>
    ......
</el-table>


// 表格行是否可选
isRowSelectable (row, index) {
   // 根据row的disable属性决定是否禁用选择
   // storeDetails来自父组件中已经选中的数组项
   // 检查行是否已在 storeDetails 中，如果在则返回 false，否则返回 true
   return !this.storeDetails.some(item=> item.goodsId === row.id) // 使用相同的 key 来比较行是否已选择
},
// 批量操作选中按钮
selectionChange (data) {
   // console.log(data)
   // 修改属性名id改为goodsId
   let arr = JSON.parse(JSON.stringify(data).replace(/id/g, 'goodsId'))
   // console.log(arr)
   // selectItems传递给父组件的数组项
   this.selectItems.splice(0, this.selectItems.length, ...arr)
   // console.log(this.selectItems)
},