当前位置: 首页 > article >正文

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

示例:

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


http://www.kler.cn/a/552263.html

相关文章:

  • 视频编解码标准中的 Profile 和 Level
  • QT实战-qt各种菜单样式实现2
  • sql server查询IO消耗大的排查sql诊断语句
  • 【产品资料】陀螺匠·企业助手v1.8 产品介绍
  • 豪越科技:消防安全重点单位一体化安全管控
  • 基于SSM框架的宠物之家系统(有源码+论文!!!)
  • 根据CAN通讯矩阵使用CANoe生成DBC
  • 4.【线性代数】——矩阵的LU分解
  • 3DM转换成GLB
  • CPP集群聊天服务器开发实践(七):Github上传项目
  • 太空飞船任务,生成一个地球发射、火星着陆以及下一次发射窗口返回地球的动画3D代码
  • 【DeepSeek】本地部署,保姆级教程
  • 深度解析 Spring Boot:核心概念与最佳实践
  • 单元测试junit5
  • Github很慢/无法访问:简单两步搞定
  • mac安装Pyspark并连接Mysql
  • 使用 Openpyxl 操作 Excel 文件详解
  • 工厂方法模式 (Factory Method Pattern) 在Spring Boot 中的应用场景
  • Kotlin 扩展
  • 还在为AI模型部署发愁?VSCode插件让你轻松拥有DeepSeek和近百种AI模型!