不知道怎么描述，反正是折腾了大半天，前端也不是很精通，看一下文档，如果有人遇到和我一样的问题，希望能给到一点启发吧
刚开始的需求描述
最近项目上需要使用级联选择器，绑定组织机构，组件需要满足以下要求：
- 在编辑详情时只能进行单选，在单选情况下，可以选择任何一级，如下图所示
- 在列表查询时支持多选，在 多选情况下，选择父节点可以全选子节点，父子节点一起作为参数过滤查询列表，如下图所示
以上功能看el-cascader的官方说明文档，是能直接实现的，上一部分代码：
1）封装组件部分
<el-cascader
:options="information"
ref="cascaderAddr"
v-model="dwCodes"
:show-all-levels="false"
:props="propsOpyions"
@change="handleChange"
collapse-tags
collapse-tags-tooltip
clearable
filterable
:disabled="disabled"
>
</el-cascader>
export default {
props: {
value: {
type: null
},
// 是否禁用
disabled: {
type: Boolean,
default: false,
required: false
},
// 是否多选
multiple: {
type: Boolean,
default: false,
required: false
}
},
data() {
return {
dwCodes: [], //回显绑定的值
information: [], // 选择器数据源
propsOpyions: {
multiple: true, // 是否允许多选
emitPath: false, // 是否展示完整路径
checkStrictly: true, // 是否可选择任意一级
expandTrigger: 'click' // 展开事件
}
};
},
created() {
this.init()
this.propsOpyions.multiple = this.multiple
// 多选时，若checkStrictly为true,则选择父节点时，只能选到父节点
// 不能全选它下面的所有子节点，所以需要设置为false
if(this.multiple) {
this.$set(this.propsOpyions, 'checkStrictly', false)
}
},
watch: {
value: {
// 数据回显，很重要
handler(newVal, oldVal) {
this.dwCodes = newVal
if(this.multiple && this.dwCodes) {
this.dwCodes = this.dwCodes.split(',')
}
},
immediate: false,
deep: false
}
},
methods: {
async init() {
// 初始化数据源
},
// 值改变
handleChange(checked) {
if(this.multiple && checked) {
let checknodes = this.$refs['cascaderAddr'].getCheckedNodes()
let checkNodeids = checknodes.map((obj,index) => {
return obj.value
});
this.$emit("input", checkNodeids.join());
} else {
this.$emit("input", checked);
}
}
}
}
2）引入组件部分
// 单选时
<dw-Cascader :multiple="false" v-model="gldw" :disabled="disabledFlag">
</dw-Cascader>
// 多选时
<dw-Cascader :multiple="true" v-model="gldw" ></dw-Cascader>
问题来了
- 在允许多选时，子节点全部取消的情况下，父节点也会取消选中状态，但是目前的需求是，有些数据是直接归属到父节点单位下面的，如果只想查父节点下的数据，是实现不了的。（checkStrictly为true，虽然可以选到父节点，但是这个时候父节点勾选，子节点全选就不起作用了）
- 在搜索时，只能检索到最后一级，同样也是受checkStrictly为true的限制，在用户在搜索父级节点时是不显示的，只能搜索最后一级
搜索【长沙市】结果，只显示了子节点
解决
所以在保持原有需求不变的情况下，在面向百度查询了一番，结合互联网好人提供的思路（已经找不到出处了，搜一搜应该也能找到），解决上面说的两个问题。
第一步：在多选情况下，也设置checkStrictly为true，先保证父节点能单独勾选；
created() {
this.init()
this.propsOpyions.multiple = this.multiple
// if(this.multiple) {
// this.$set(this.propsOpyions, 'checkStrictly', false)
// }
},
第二步，监听级联选择框绑定值的变化，这个示例中v-model绑定的是dwcodes，就监听这个值，实现全选和取消全选，取消子节点勾选，父节点保留勾选状态
watch: {
value: {
handler(newVal, oldVal) {
this.dwCodes = newVal
if(this.multiple && this.dwCodes) {
this.dwCodes = this.dwCodes.split(',')
}
},
immediate: false,
deep: false
},
dwCodes: {
handler(newVal, oldVal) {
this.dwCodes = newVal
if(this.multiple && this.dwCodes) {
// 判断当前是添加勾选还是取消勾选，并获取当前操作的节点值
const current = this.findCurrentDepartment(newVal, oldVal)
if (!current) return
this.$nextTick(() => {
if (current.type === 'checked') {
// 级联选择器当前勾选的节点数组
this.currentCheckedNodes = this.$refs.cascaderAddr.checkedNodes
// 从级联选择器中取出内部的节点数组，找到当前节点
const targetNode = this.$refs.cascaderAddr.checkedNodes.find((item) => {
return item.value === current.value
})
if (targetNode) {
// 递归找出所有子孙节点，并手动勾选
this.checkedChildrenDepartment([targetNode])
// 更新视图
this.$refs.cascaderAddr.$refs.panel.calculateMultiCheckedValue()
}
} else if (current.type === "cancel") {
// 从当前勾选的节点数组中递归找出所有子孙节点，并取消勾选
this.cancelChildrenDepartment(current.value, this.currentCheckedNodes)
// 更新视图
this.$refs.cascaderAddr.$refs.panel.calculateMultiCheckedValue()
}
})
}
},
immediate: false,
deep: true
}
},
methods: {
async init() {
// 初始化数据源
},
// 值改变
handleChange(checked) {
if(this.multiple && checked) {
let checknodes = this.$refs['cascaderAddr'].getCheckedNodes()
let checkNodeids = checknodes.map((obj,index) => {
return obj.value
});
// 回传给父组件的值
this.$emit("input", checkNodeids.join());
} else {
this.$emit("input", checked);
}
},
checkedChildrenDepartment(list = []) {
list.forEach((item) => {
item.doCheck(true)
// 勾选选中当前值，若有子节点，子节点遍历全选
if (item.children.length > 0) {
this.checkedChildrenDepartment(item.children)
}
})
},
cancelChildrenDepartment(cancelNodeValue, list = []) {
list.forEach((item) => {
// 取消勾选时，取消当前值，若当前值有子节点时，实现取消父节点勾选，子节点取消全选的功能，同时实现子节点取消勾选，不会影响父节点勾选状态
if(cancelNodeValue == item.value || cancelNodeValue == item.parent?.value) {
item.doCheck(false)
if (item.children.length > 0) {
// 遍历
this.cancelChildrenDepartment(item.value, item.children)
}
}
})
},
findCurrentDepartment(newArr, oldArr) {
const catchNewArr = [...newArr]
const catchOldArr = [...oldArr]
if (catchNewArr.length > catchOldArr.length) {
for (let i = 0; i < catchNewArr.length; i++) {
const targetIndex = catchOldArr.indexOf(catchNewArr[i])
if (targetIndex === -1) {
return {
value: catchNewArr[i],
type: 'checked',
}
}
}
} else {
for (let i = 0; i < catchOldArr.length; i++) {
const targetIndex = catchNewArr.indexOf(catchOldArr[i])
if (targetIndex === -1) {
return {
value: catchOldArr[i],
type: 'cancel',
}
}
}
}
}
}
实现效果
1.有全选功能
取消子节点选择，父节点保持选择状态
2.搜索能检索到父节点
3.绑定数据回显
其他
不知道还有没有其他遗漏的地方，反正是实现了，前端开发忙的马不停蹄，一个后端开发又又又在前端挣扎了一下，再次感谢互联网好人们！
我翻了一下历史记录： 参考代码
