<el-cascader class="myCascader" :options="areaData" :props="regionalInfosProps" collapse-tags clearable v-model="editDepartmentForm.regionalInfos" @change="changecascader($event,'edit')" popper-class="cascader-department cascaderOwner" size="small" ref="cascaderOwner" @expand-change="cascaderToscroll('cascaderOwner')" style="width:456px" filterable></el-cascader>
data 数据说明
istype: '' 判断是新建还是编辑
addDepartmentForm{
regionalInfos // 后台需要数据 因为是对象格式 使用 this.$set 赋值
}
deepOptionData:【】 暂时存放数据 使数据变为 [ [100], [101,1011] ]
deepOptionDataCopy :[] 通过监听此数据 -- 改变需要给后台的值
- 思路
- 使用change事件–
- hasAll 定义 数据中是否有全选
- isSelectAll 定义全选是否呗选中
- hasAll && !isSelectAll 点击全选 --下面都勾选上
- (!hasAll && this.isSelectAll) 取消选择全部
- (!hasAll && !this.isSelectAll) // 反勾选全部
- hasAll && this.isSelectAll) { // 勾中全部时 然后取消下面的勾选 全部取消掉
changecascader(val, type) {
this.istype = type
let hasAll = val[0][0] === 10000000 // 全选定义值 10000000
if (hasAll && this.isSelectAll) { // 勾中全部 然后取消下面的勾选 全部取消掉
this.$refs.cascaderOwner.$refs.panel.clearCheckedNodes() //清空选中的节点
val.splice(0, 1) // 删除全选
this.deepOptionDataCopy = val// 重新定义数据
this.isSelectAll = false // 全选文字状态改变
this.goall = false
} else if (hasAll && !this.isSelectAll) { //选中全部
this.isSelectAll = true
this.selectAll(this.areaData, type)
this.goall = false
} else if (!hasAll && this.isSelectAll) { //取消选择全部
this.isSelectAll = false
this.$refs.cascaderOwner.$refs.panel.clearCheckedNodes()
this.deepOptionDataCopy = []
this.goall = false
} else if (!hasAll && !this.isSelectAll) { // 反勾选全部
this.goall = true // 反勾选全部状态 等长度一致 把全部数据放进去
this.deepOptionDataCopy = val
}
},
selectAll(value) { // 全选操作
let arr
value.forEach((res) => { // 处理数据为 [ [100], [101,1011] ]
if (res.children) {
this.deepOptionData.push(res.value)
this.selectAll(res.children)
} else {
arr = JSON.parse(JSON.stringify(this.deepOptionData))
arr.push(res.value) // [101,1011]
this.deepOptionDataCopy.push(arr) // [ [100], [101,1011] ]
}
})
this.deepOptionData = [] // 把 deepOptionData 数据还原
},
+ 监听改变数据
watch: {
deepOptionDataCopy(val) {
if (val?.length === 351 && val[0][0] != 10000000 && this.goall) { //下面全部勾选的话 全部也勾上
val = [10000000].concat(val)
this.isSelectAll = true
}
if (this.istype === 'new') {
this.$set(this.addDepartmentForm, 'regionalInfos', val)
} else {
this.$set(this.editDepartmentForm, 'regionalInfos', val)
}
}
},