element-ui的table组件-checkbox选中分页记忆(二) -原记忆基础上再细分的嵌套一层记忆
一、前言
我司仓储系统需求，账号用户-拥有若干仓库权限(第一层记忆 大勾选)-仓库又包含若干个是否可使用的发车点(第二层记忆 小勾选) 这些要全部记忆+修改记忆。
ps:一年前做的，上一篇分页一直说要放第二篇的，最近做总结就放上来了。
二、实现
1.需要后端配合 提供前端需要 - 用户所拥有的 仓库及发车点的 权限数据结构 和 公司所有的仓库及权限点
1.1 公司的仓库权限数组 companyList-也就是 发车点授权列表里的数据
[{
"id": "1",
"code": "吉利湘潭发车点",
"name": "吉利湘潭发车点",
"province": "湖南省",
"city": "湘潭市",
"county": "湘潭县",
"address": null,
"linkMan": null,
"linkPhone": null,
"isSeek": "0",
"isSeekChecked": false,
"isMove": "0",
"isMoveChecked": false,
"isPick": "0",
"isPickChecked": false,
"isShip": "1",
"isShipChecked": false,
"status": "10",
"remark": null,
"userCreate": "赵xx",
"userModified": "赵xx",
"gmtCreate": "2018-09-07 14:45:18",
"gmtModified": "2018-09-07 14:45:18",
"exceShip": null,
"own": false
},
{
"id": "2",
"code": "吉利湘潭",
"name": "吉利湘潭",
"province": "湖南省",
"city": "湘潭市",
"county": "湘潭县",
"address": null,
"linkMan": null,
"linkPhone": null,
"isSeek": "0",
"isSeekChecked": false,
"isMove": "0",
"isMoveChecked": false,
"isPick": "0",
"isPickChecked": false,
"isShip": "1",
"isShipChecked": false,
"status": "10",
"remark": null,
"userCreate": "赵xx",
"userModified": "赵xx",
"gmtCreate": "2018-09-19 10:07:50",
"gmtModified": "2018-09-25 15:15:21",
"exceShip": null,
"own": false
}]1.2 该账号用户拥有的仓库权限数组 userList
[{
"id": "1245745237930762",
"code": "成都-临时停车场",
"name": "成都-临时停车场",
"province": "四川省",
"city": "成都市",
"county": null,
"address": null,
"linkMan": null,
"linkPhone": null,
"isSeek": null,
"isSeekChecked": false,
"isMove": null,
"isMoveChecked": false,
"isPick": null,
"isPickChecked": false,
"isShip": null,
"isShipChecked": false,
"status": "10",
"remark": null,
"userCreate": "赵xx",
"userModified": "赵xx",
"gmtCreate": "2019-03-21 10:18:39",
"gmtModified": "2019-03-21 10:18:39",
"exceShip": null,
"own": false
},
{
"id": "8219",
"code": "宝安发车点",
"name": "宝安发车点",
"province": "广东省",
"city": "宝安区",
"county": null,
"address": null,
"linkMan": null,
"linkPhone": null,
"isSeek": null,
"isSeekChecked": false,
"isMove": null,
"isMoveChecked": false,
"isPick": null,
"isPickChecked": false,
"isShip": null,
"isShipChecked": true,
"status": "10",
"remark": null,
"userCreate": "赵xx",
"userModified": "赵xx",
"gmtCreate": "2019-03-21 10:18:39",
"gmtModified": "2019-03-21 10:18:39",
"exceShip": null,
"own": false
}]2.逻辑 第一层的仓库列表勾选项-分页记忆 勾选的逻辑 请看 第一篇 element-ui的table组件-checkbox选中分页记忆-逻辑修改成
第二层的单个仓库-发车点勾选项-分页记忆
2.0 getOwnerIds()
根据账号用户拥有项请求返回userList， 知道 用户有那些所有的选中项（row）的集合（selectRowAll）
2.1 setSelectRow()
初始设置勾选项选中状态
2.2 changePageCoreRecordData()
页面用户操作（第一层）的勾选，selectRow数据变动 ,然后得到当前页（table_data）没有选中那些项（noSelectRow），然后依据没选中（noSelectRow）来做总选中 （selectRowAll）中的清除那些没有选中项。
这一步是 关于 第一层的记忆
2.3 小勾选 变化， demo上绑定的操作函数
isSeekChecked 是否勾选(小勾选)用户是否拥有该权限项 isSeek 该仓库是否开放了该勾选项的权限(0-禁用,1-启用) handleSeekCheckedChange(index, row, isChecked) {
this.currencyIsChecked(index, row, isChecked, this.idKey, 'isSeekChecked', 'isSeek')
},
handleMoveCheckedChange(index, row, isChecked) {
this.currencyIsChecked(index, row, isChecked, this.idKey, 'isMoveChecked', 'isMove')
},
handlePickCheckedChange(index, row, isChecked) {
this.currencyIsChecked(index, row, isChecked, this.idKey, 'isPickChecked', 'isPick')
},
handleShipCheckedChange(index, row, isChecked) {
this.currencyIsChecked(index, row, isChecked, this.idKey, 'isShipChecked', 'isShip')
},2.4 currencyIsChecked() 最后用于记录和提交 小勾选的选中状态
currencyIsChecked(index, row, isChecked, idKey, property1, property2) {
console.log('-----currencyIsChecked()-----')
console.log('index', index, 'row', row.id, 'isChecked', isChecked, 'property2', property2)
// 查询 总选中集合 内 是否有 小勾选改动时所属的 大勾选项
if (this.hasPermissions(this.selectRowAll, row, idKey)) {
this.selectRowAll.forEach((item1, index1) => {
// console.log('selectRowAll-id', item1.id, 'row', row.id)
if (parseInt(item1[idKey]) === parseInt(row[idKey])) {
this.selectRowAll[index1][property1] = isChecked
// this.selectRowAll[index1][property2] = !isChecked ? '1' : '0'
// console.log('property1', this.selectRowAll[index1][property1], 'property2', this.selectRowAll[index1][property2])
// 如果没有该小勾选项 则清理掉 小勾选所属的 大勾选项 -进而进行大勾选项勾选状态更新
if (!this.selectRowAll[index1].isSeekChecked && !this.selectRowAll[index1].isMoveChecked && !this.selectRowAll[index1].isPickChecked && !this.selectRowAll[index1].isShipChecked) {
this.selectRowAll.splice(index1, 1)
this.$refs.pointMultipleTable.toggleRowSelection(this.table_data[index], false)
}
}
})
} else {
// 如果有小勾选 勾中，所属大勾选项 加入总选集合中，同步进行 大勾选状态更新
this.selectRowAll.push(row)
this.table_data[index][property1] = isChecked
this.$refs.pointMultipleTable.toggleRowSelection(this.table_data[index], true)
}
// console.log('勾选状态改变后selectRowAll', this.selectRowAll)
this.setIsChecked(this.selectRowAll, idKey)
},2.5 setIsChecked() demo上显示 小勾选的选中状态更新
setIsChecked(selectRowAll, idKey) {
// console.log('setIsChecked()-selectRowAll', selectRowAll)
if (selectRowAll && selectRowAll.length > 0) {
for (var i = 0; i < selectRowAll.length; i++) {
this.table_data.forEach((item1, index1) => {
if (selectRowAll[i][idKey] === item1[idKey]) {
// console.log('setIsChecked()', 'this.table_data[index1]', this.table_data[index1], 'selectRowAll[i]', selectRowAll[i])
this.table_data[index1].isSeekChecked = selectRowAll[i].isSeekChecked
this.table_data[index1].isMoveChecked = selectRowAll[i].isMoveChecked
this.table_data[index1].isPickChecked = selectRowAll[i].isPickChecked
this.table_data[index1].isShipChecked = selectRowAll[i].isShipChecked
// console.log('(selectRowAll[i]', selectRowAll[i], 'selectRowAll[i].id', selectRowAll[i].id)
// console.log('item1.id', item1.id, 'index1', index1, 'item1', item1, 'this.table_data', this.table_data)
}
})
}
}
},2.6 本demo 是（发车授权）弹窗页面
全部代码如下
查询
{{scope.$index+1}}
{{scope.row.code}}
{{scope.row.name}}
{{scope.row.province}}
{{scope.row.city}}
{{scope.row.county}}
取消
确定
三、总结
该需求难点 主要是 小勾选的 更新选中记忆
做分页记忆 element-ui 的列表勾选 toggleRowSelection() 易写错 变 死循环，设置了 toggleRowSelection()后， 用户操作了选中项-执行了toggleRowSelection() -然后走逻辑后又进行toggleRowSelection()