列表中实现全选所有数据后(上一篇文章),将思路讲解给同事听,他提出一个问题:全选所有后,取消一条数据的勾选,为什么数据是已翻页的数据减去取消的这条数据,而不是所有数据减去这条数据!
仔细想想后,觉得也是有道理的,就着手实现这一方案,但是这一方案需要跟后端开发人员提前约定好传参方面的问题。
1、这里需要用到多选框的一个属性:indeterminate
<el-checkbox :indeterminate="indeterminate " v-model="allCheck" @change="allCheckEvent">全选所有</el-checkbox>
控制多选框的样式,当勾选全部所有,取消一条数据,全部所有框的样式如下图所示
2、定义一个数组存储取消的数据:falseList
// 当用户手动勾选数据行的 Checkbox 时触发的事件
selectOne (rows, row) {
if (this.allCheck) {
// 多选框样式改变
this.indeterminate = true
// 判断勾选数据行是选中还是取消
let selected = rows.length && rows.indexOf(row) !== -1
let lenFalse = this.falseList.length
if (selected) {
// 选中
if (lenFalse !== 0) {
for (let i = 0; i < lenFalse; i++) {
if (this.falseList[i].execId === row.execId) {
this.falseList.splice(i, 1)
break
}
}
}
} else {
// 取消
this.falseList.push(row)
}
}
},
// 当用户手动勾选全选 Checkbox 时触发的事件(全选本页)
selectAll (rows) {
if (this.allCheck) {
let that = this
that.indeterminate = true
let lenNow = that.testList.length
// 判断勾选全选本页是选中还是取消
if (rows.indexOf(that.testList[0]) !== -1) {
// 选中
for (let i = 0; i < lenNow; i++) {
for (let n = 0; n < that.falseList.length; n++) {
if (that.falseList[n].execId === that.testList[i].execId) {
that.falseList.splice(n, 1)
}
}
}
} else {
// 取消
for (let j = 0; j < lenNow; j++) {
if (that.falseList.length !== 0) {
if (that.falseList.indexOf(that.testList[j]) === -1) {
that.falseList.push(that.testList[j])
}
} else {
that.falseList.push(that.testList[j])
}
}
}
}
},
allCheckEvent () {
if (this.allCheck) {
this.testList.forEach(row => {
this.$refs.recordTable.toggleRowSelection(row, true)
})
}
else {
this.$refs.recordTable.clearSelection()
this.falseList = []
this.indeterminate = false
}
}
selectionChange (rows) {
this.checkList = rows
}
监听本页数据数组testList和取消的数据数组falseList
watch: {
testList: {
handler (value) {
if (this.allCheck) {
let that = this
let len = that.falseList.length
let lenCheck = that.checkList.length
if (that.checkList.length === 0) {
value.forEach(row => {
that.$refs.recordTable.toggleRowSelection(row, true)
})
} else {
value.forEach(row => {
for (let i = 0; i < lenCheck; i++) {
if (row.execId === that.checkList[i].execId) {
that.$refs.recordTable.toggleRowSelection(row, false)
break
} else {
that.$refs.recordTable.toggleRowSelection(row, true)
}
}
if (len !== 0) {
for (let j = 0; j < len; j++) {
if (row.execId === that.falseList[j].execId) {
that.$refs.recordTable.toggleRowSelection(row, false)
break
}
}
}
})
}
}
},
deep: true },
falseList: {
handler (value) {
if (value.length === 20) {
this.allCheck = false
this.indeterminate = false
}
if (value.length === 0) {
this.indeterminate = false
}
console.log(value)
},
deep: true
}
}
出现的问题:
- 我在用for循环的时候,会提前将数组的length保存给一个变量,这样在for循环的时候,不会一遍一遍的去计算数组的length,但是在实现这个功能的时候,会报错,例如下面一段代码,如果提前将第二个for中的length取出来再用,会报execId不存在,那是因为我在for循环的时候对数组进行了操作,所以继续用that.falseList.length
for (let i = 0; i < lenNow; i++) {
for (let n = 0; n < that.falseList.length; n++) {
if (that.falseList[n].execId === that.testList[i].execId) {
that.falseList.splice(n, 1)
}
}
}