如何使用el-table的多选框

m0_528723812025-02-08 11:13

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