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

发布于:2025-02-20 ⋅ 阅读:(21) ⋅ 点赞:(0)

示例:

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

<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、根据已选中的项,不可再次选中

父组件:

子组件:

 

<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)
},


网站公告

今日签到

点亮在社区的每一天
去签到