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

相关推荐
真的想不出名儿3 分钟前
vue项目引入字体
前端·javascript·vue.js
胡楚昊20 分钟前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪34 分钟前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
吃饺子不吃馅1 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防2 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump2 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅2 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士2 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing2 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
MediaTea4 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter