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

相关推荐
ElasticPDF-新国产PDF编辑器8 分钟前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
揣晓丹13 分钟前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源
吃没吃16 分钟前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam16 分钟前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH27618 分钟前
Android Retrofit用法详解
前端
鸭梨大大大19 分钟前
Spring Web MVC入门
前端·spring·mvc
你的人类朋友19 分钟前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
吃没吃22 分钟前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH27623 分钟前
Android Room用法详解
前端
顽疲30 分钟前
从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人
java·vue.js·spring boot·ai