如何使用el-table的多选框

对el-table再次封装,使得功能更加强大!

本人在使用el-table时,因为用到分页,导致上一页勾选的数据在再次返回时,没有选中,故在原有el-table组件的基础之上再次进行了封装。

1.首先让某些不需要勾选的列表进行多选框禁用

:selectable="isRowSelectable"

const isRowSelectable = (row) => {

return row.balance !== 0

}

2.通过select这个api来实现选择框的勾选

复制代码
const selectAssessRow = (selection, val) => {
  // checked.value = selection
  console.log('selection',selection)
  console.log('val',val)
  // console.log('是否',assessIds.value.includes(val.id));
  const index = checkedReward.value?.findIndex((item) => item.id === val.id)
  if (index !== -1) {
    checkedReward.value.splice(index, 1)
  } else {
    checkedReward.value.push(val)
  }
  console.log('checkedReward',checkedReward.value);
  assessmentUnits.value = checkedReward.value?.map((item) => item.id)
  // Assessment.value = checkedReward.value
}

3.实现全选功能

复制代码
const selectAssessRowAll = (selection) => { 
  if (!selection.length) {
    noticeList.value.forEach((item) => {
      const index = checkedReward.value?.findIndex((val) => val.id === item.id)
      if (index !== -1) {
        checkedReward.value.splice(index, 1)
      }
    })
  } else {
    selection.forEach((item) => {
      const index = checkedReward.value?.findIndex((val) => val.id === item.id)
      if (index !== -1) {
        checkedReward.value.splice(index, 1)
      }
      checkedReward.value.push(item)
    })
  }
  
}

3.勾选后的数据可进行回显

4.在打开弹窗前要进行选中的数据取消勾选

相关推荐
前端付豪2 分钟前
1、为什么浏览器要有渲染流程? ——带你一口气吃透 Critical Rendering Path
前端·后端·浏览器
前端付豪5 分钟前
3、Node.js异步编程彻底吃透
前端·后端·node.js
Bob99988 分钟前
Amlogic S905L3系列盒子 ROM DIY相关
java·javascript·数据仓库·vscode·eclipse·tomcat·vim
孤鸿玉9 分钟前
[Flutter小试牛刀] 低配版signals,添加局部刷新
前端·flutter
亦黑迷失11 分钟前
轻量级 Express 服务器:用 Pug 模板引擎实现动态参数传递
前端·javascript·后端
吃瓜群众i1 小时前
理解Javascript闭包
前端·javascript
安大桃子1 小时前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede1 小时前
多行文本省略号显示,更多按钮展开全部
前端
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化