如何使用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.在打开弹窗前要进行选中的数据取消勾选

相关推荐
小天呐5 分钟前
qiankun 微前端接入实战
前端·js·微前端
周航宇JoeZhou10 分钟前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台
车口13 分钟前
滚动加载更多内容的通用解决方案
javascript
Yaavi13 分钟前
一个基于markdown的高性能博客模板
前端·开源·源码
艾小码32 分钟前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
幸福摩天轮41 分钟前
npm发布包
前端
前端AK君44 分钟前
Gitlab 线上合并冲突的坑
前端
ze_juejin44 分钟前
ES6 Module 深入学习
前端
章丸丸1 小时前
Tube - Studio Videos
前端·后端
因吹斯汀2 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程