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