首先说明的是这里的全选是点击后，选中全部数据，而不是当前页的数据，效果图如下
- 部分html代码
<el-table
ref="multipleTable"
:data="tableData"
border
@select="handleSelectRow"
:row-key="getRowKeys"
@select-all="selectAll"
>
<el-table-column
reserve-selection
type="selection"
width="48"
align="center"
></el-table-column>
- 部分js代码
data() {
return {
indeterminate: false, //控制checkbox样式
allCheck: false,
checkedList: [], //选中列表
uncheckedList: [], //未选中列表
declareIds: [], //导出时请求的id数组
classStudyMultiSelect: [], // 全选时存储的列表
totalNumber: 0,
}
}
watch: {
//监听列表,如果为所有全选,翻页时保持状态
tableData: {
handler(value) {
if (this.allCheck) {
if (this.uncheckedList.length === 0) {
this.$nextTick(() => {
//这里一定要用$nextTick
value.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(
row,
true
)
})
})
} else {
this.$nextTick(() => {
value.forEach((row) => {
for (
let i = 0;
i < this.uncheckedList.length;
i++
) {
if (
row.declareId ===this.uncheckedList[i].declareId
) {
console.log(1)
this.$refs.multipleTable.toggleRowSelection(
row,
false
)
break
} else {
console.log(2)
this.$refs.multipleTable.toggleRowSelection(
row,
true
)
}
}
})
})
}
}
},
deep: true,
},
//监听未选中的数组
uncheckedList: {
handler(value) {
//1.未选中数组长度和总数相等,取消选中状态,取消样式
if (value.length === this.totalNumber) {
this.allCheck = false
this.indeterminate = false
}
//2.未选中数组长度为0,取消样式
if (value.length === 0) {
this.indeterminate = false
}
},
deep: true,
},
//监听选中数组
checkedList: {
handler(value) {
//选中数组长度等于总数,代表全部选中,取消样式
if (value.length === this.totalNumber) {
this.allCheck = true
this.indeterminate = false
}
},
},
},
methods: {
handleCheck() {
//只要点击了全选所有,这两个数组清空
this.uncheckedList = []
this.checkedList = []
// this.declareIds = []
this.classStudyMultiSelect = []
if (this.allCheck) {
// this.indeterminate = true
//全选所有,列表全部选中,包括翻页
this.tableData.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row, true)
})
api.declareObjectList({
pageNum: 1,
pageSize: this.totalNumber,
}).then((resp) => {
if (resp.code == 1) {
this.classStudyMultiSelect = resp.content.recordList
// resp.content.recordList.forEach((item) => {
// this.declareIds.push(item.declareId)
// })
} else {
this.$message({
type: 'warning',
message: '查询错误',
})
}
})
} else {
//取消列表全选状态,包括翻页
this.$refs.multipleTable.clearSelection()
}
// console.log('后this.allCheck', this.allCheck)
// console.log('后this.indeterminate', this.indeterminate)
},
getRowKeys(row) {
return row.declareId // 每条数据的唯一识别值
},
// 由控件触发的
selectAll(rows) {
// console.log('selectAll rows', rows)
if (this.allCheck) {
this.indeterminate = true
let lenNow = this.tableData.length
// 判断全选本页,是选中还是取消
if (rows.indexOf(this.tableData[0]) !== -1) {
//如果选中所有rows存在于tableData,或者判断rows长度不为0 证明是选中状态
//uncheckedList要删除当前页tableData
for (let i = 0; i < lenNow; i++) {
for (let n = 0; n < this.uncheckedList.length; n++) {
if (
this.uncheckedList[n].declareId ===
this.tableData[i].declareId
) {
this.uncheckedList.splice(n, 1)
}
}
}
} else {
// 取消 如果rows为空,当页是取消状态
for (let j = 0; j < lenNow; j++) {
if (this.uncheckedList.length !== 0) {
//如果uncheckedList已经有值
if (
this.uncheckedList.indexOf(
this.tableData[j]
) === -1
) {
//就把uncheckedList中没有的当前页tableData,push进去
this.uncheckedList.push(this.tableData[j])
}
} else {
//如果为空,直接全部push
this.uncheckedList.push(this.tableData[j])
}
}
if (this.uncheckedList.length === this.totalNumber) {
this.indeterminate = false
this.allCheck = false
}
}
} else {
this.checkedList = rows
if (this.checkedList.length === this.totalNumber) {
this.classStudyMultiSelect = this.checkedList
}
}
},
handleSelectRow(rows, row) {
// console.log('rows', rows)
// console.log('row', row)
//单行选择
if (this.allCheck) {
// 多选框样式改变,allCheck依然为true,为了保持翻页状态
this.indeterminate = true
// 判断勾选数据行是选中还是取消
let selected = rows.length && rows.indexOf(row) !== -1
let lenFalse = this.uncheckedList.length
console.log('selected', selected)
if (selected) {
// 选中,从未选中数组中去掉
if (lenFalse !== 0) {
//
for (let i = 0; i < lenFalse; i++) {
if (
this.uncheckedList[i].declareId ===
row.declareId
) {
this.uncheckedList.splice(i, 1)
break
}
}
}
// this.declareIds.push(row.declareId)
} else {
console.log('selected false', selected)
if (this.uncheckedList.length === this.totalNumber) {
this.uncheckedList = []
}
// 取消,当前取消的行push进去
this.uncheckedList.push(row)
// this.indeterminate = false
}
} else {
if (this.uncheckedList.length === this.totalNumber) {
this.uncheckedList = []
}
this.checkedList = rows
}
},
}
- 导出
exportDeclareInfoTable() {
let selection = []
this.declareIds = []
console.log('this.allCheck', this.allCheck)
console.log('this.checkedList', this.checkedList)
console.log('this.uncheckedList', this.uncheckedList)
console.log('this.indeterminate', this.indeterminate)
console.log(
'this.classStudyMultiSelect',
this.classStudyMultiSelect
)
if (this.allCheck && !this.indeterminate) {
console.log('全选所有')
selection = this.classStudyMultiSelect
if (this.checkedList.length === this.totalNumber) {
selection = this.checkedList
}
} else if (
!this.allCheck &&
!this.indeterminate &&
(this.checkedList.length === 0 ||
this.checkedList.length === this.totalNumber)
) {
console.log('全部没有选')
} else if (this.allCheck && this.indeterminate) {
console.log('全选所有,有取消')
selection = this.classStudyMultiSelect
.filter(
(i) =>
!this.uncheckedList.find(
(j) => j.declareId === i.declareId
)
)
.concat(
this.uncheckedList.filter(
(i) =>
!this.uncheckedList.find(
(j) => j.declareId === i.declareId
)
)
)
} else if (
!this.allCheck &&
!this.indeterminate &&
this.checkedList.length !== 0 &&
this.uncheckedList.length === 0
) {
console.log('未全选所有,有选择')
selection = this.checkedList
} else {
console.log('错误')
}
selection.forEach((item) => {
this.declareIds.push(item.declareId)
})
console.log('selection', selection)
console.log('declareIds', this.declareIds)
if (this.declareIds.length === 0) {
this.$message({
type: 'error',
message: '请勾选导出的xx',
})
return false
}
let time = this.getParam.timestampToTime(new Date(), true)
time = String(time.Y) + time.M + time.D + time.h + time.m + time.s
let fileName = `啊啊啊啊${time}.xlsx`
api.trainingClassUserDeclareInfoExport({
declareIds: this.declareIds,
}).then((res) => {
const link = document.createElement('a')
const blob = new Blob([res], {
type: 'application/vnd.ms-excel',
})
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
},
