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

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

相关文章:

  • 对接扣子双向流式 TTS Demo
  • 跟着AI学vue第七章
  • TypeScript - 数据类型 - 声明变量
  • Linux中进程的状态3 进程的优先级1
  • 除掉彩色水印的简单方法
  • GlusterFS卷管理实战指南:从扩展卷到自我修复,全面掌握高效运维技巧
  • Kafka在Windows系统使用delete命令删除Topic时出现的问题
  • 【Java八股文】09-计算机操作系统面试篇
  • 虚拟机设置代理
  • VMamba论文精读笔记
  • CMake管理依赖实战:多仓库的无缝集成
  • 在windows下安装windows+Ubuntu16.04双系统(下)
  • go WEB框架
  • Git 合并冲突解决与状态分析笔记
  • 发现问题 python3.6.13+django3.2.5 只能以asgi启动server 如何解决当前问题
  • rust笔记1-学习资料推荐
  • C#设计模式 学习笔记
  • OpenProject项目管理系统
  • 如何在Windows 10操作系统中安装并配置PHP集成软件XAMPP
  • 微前端qiankun打包部署
  • 风雨天涯梦——《袁保龄公牍》发微
  • 颜福庆与顾临的争论:1930年代在中国维持一家医学院要花多少钱
  • 气候多米诺:厄尔尼诺与东南亚跨境害虫或威胁中国粮食安全
  • Manus向全球用户开放注册
  • 宁德时代港股募资预计最高至50亿美元:90%将投向匈牙利项目
  • “电竞+文旅”释放价值,王者全国大赛带火赛地五一游