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