1. 需求:实现一个多层级的级联选择器,点击一级,动态加载下一级
<el-cascader-panel
ref="cascader"
@change="change"
:props="props"
:options="options"
:show-all-levels="false"
>
</el-cascader-panel>
props: {
multiple: true,
emitPath: false,
lazy: true,
async lazyLoad(node, resolve) {
console.log(node)
const { level } = node
let stop_level = 4
let list = []
let callback = () => {
resolve(
(list || []).map(ele => {
return Object.assign(ele, {
leaf: level >= stop_level,
})
})
)
}
if (level == 1) {
const { value } = node
let nodes = await getOrgByType(value)
let _nodes = nodes.data.map(item => ({
value: item.id,
label: item.orgName,
}))
resolve(_nodes)
} else if (level == 2) {
const { value } = node
let nodes = await getDeptByOrgId(value)
let _nodes = nodes.data.map(item => ({
value: item.id,
label: item.deptName,
orgSid: item.orgSid,
}))
resolve(_nodes)
} else if (level == 3) {
const { value, orgSid } = node.data
let obj = {
orgId: orgSid,
deptId: value,
leaf: true,
}
let nodes = await getOrgUser(obj)
let _nodes = nodes.data.map(item => ({
value: item.userId,
label: item.personName,
}))
resolve(_nodes)
} else {
callback()
}
},
},
change(e) {
let nodeObj = this.$refs["cascader"].getCheckedNodes()
console.log("节点的值", e)
console.log("节点全部数据", nodeObj)
},