<el-table @selection-change="handleSelectionChange"
v-loading="state.loading"
ref="accessControlTable"
:data="state.tableData" style="width: 100%"
:header-cell-style="{background:'#F6F7FC',color:'#333333'}"
@select="selectExceptCardIds"
@select-all="selecetAll">
初始的状态值 vue3中reactive定义的值,vue2则写在data中就可以
tableData: [],
sign: 1, // 是否点击全选,1未点击全选,2,点击全选
checkedArr: [], // 勾选的行数组
uncheckedArr: [], // 取消勾选的行数组
分页查询的方法
state.sign === 2 && chooseAllPages()
state.sign === 1 && checkedSelected()
// 全选切换
const selectAll=()=> {
state.sign = state.sign === 1 ? 2 : 1
console.log('sign', state.sign)
chooseAllPages()
state.checkedArr = []
state.uncheckedArr = []
}
// 全选所有页面
const chooseAllPages=()=> {
if (state.sign === 2) {
// 全选
nextTick(() => {
state.tableData.forEach(row => {
// 没有取消过的勾选
if (state.uncheckedArr.map(v => v.id).indexOf(row.id) < 0) {
accessControlTable.value.toggleRowSelection(row, true)
}
})
})
} else {
// 取消全选
nextTick(() => {
accessControlTable.value.clearSelection()
})
}
}
const checkedSelected=()=> {
console.log('切换分页时选择之前选中')
nextTick(() => {
if (state.checkedArr.length === 0) return
state.tableData.forEach(row => {
if (state.checkedArr.map(v => v.id).indexOf(row.id) >= 0) {
accessControlTable.value.toggleRowSelection(row, true)
}
})
})
}
// 全选后取消单个选择事件,当用户手动勾选数据行的 Checkbox 时触发的事件
const selectExceptCardIds=(selection, row)=> {
// selection 当前页面所有选中的项
// row 当前点击操作的项
console.log('全选后取消单个选择事件,当用户手动勾选数据行的 Checkbox 时触发的事件', selection, row)
// 所有页面不全选
if (state.sign === 1) {
if (selection.indexOf(row) >= 0) {
// 新增(勾选上)
selection.map(el => {
if (state.checkedArr.map(v => v.id).indexOf(el.id) === -1) {
state.checkedArr.push(el)
}
})
console.log('所有选中的', state.checkedArr)
} else {
// 取消勾选
state.checkedArr.map((el2, index) => {
if (el2.id === row.id) {
state.checkedArr.splice(index, 1)
}
})
console.log('删除后选中的', state.checkedArr)
}
} else {
// 所有页面全选
if (selection.indexOf(row) >= 0) {
// 重新勾选上
state.uncheckedArr.map((el, index) => {
if (el.id === row.id) {
state.uncheckedArr.splice(index, 1)
}
})
} else {
// 取消勾选
state.uncheckedArr.push(row)
}
console.log('剔除的id集合', state.uncheckedArr)
}
}
// 当前页面全选
const selecetAll=(selection)=> {
console.log('当前页面全选', selection)
if (state.sign === 1) {
// 不是全选按钮状态下-考虑选中哪些
if (selection.length > 0) {
// 选中
selection.map(row => {
if (state.checkedArr.map(v => v.id).indexOf(row.id) < 0) {
state.checkedArr.push(row)
}
})
} else {
// 取消选中
state.tableData.map(row => {
state.checkedArr.map((el2, index) => {
if (el2.id === row.id) {
state.checkedArr.splice(index, 1)
}
})
})
}
console.log('不是全选按钮状态下-考虑选中哪些', state.checkedArr)
} else {
// 全选按钮状态下-考虑不选中哪里
if (selection.length === 0) {
state.tableData.map(row => {
state.uncheckedArr.push(row)
})
} else {
selection.map(row => {
state.uncheckedArr.map((el, index) => {
if (el.id === row.id) {
state.uncheckedArr.splice(index, 1)
}
})
})
}
console.log('全选按钮状态下-考虑不选中哪里', state.uncheckedArr)
}
}
这里是vue3的写法vue2把方法中所有state改成this就可已