需求 权限低的人员,列表表头可以搜索整个组织架构数据,
this.options = this.checkRepeat(res.data, Option)
checkRepeat(arr, defaultArr) {
let options = defaultArr
arr.forEach((item) => {
let flag = getSelectedOption(options, item.id, {
childrenKey: this.config.propChildren,
label: this.config.propLabel,
value: this.config.propValue
})
if (!flag) {
options.push({
...item
})
}
})
return options
},
export function getSelectedOption(nodes, id, { childrenKey, label, value }) {
let filteredOptions = flatten(nodes, { childrenKey, label, value })
return filteredOptions.find((option) => option.value === id)
}
function flatten(tree = [], options) {
const { childrenKey, label, value } = options
return tree.reduce((prev, cur) => {
prev.push({
label: cur[label],
value: cur[value]
})
if (cur[childrenKey]) {
return prev.concat(flatten(cur[childrenKey], options))
}
return prev
}, [])
}
反思其实这样处理不好 为了在 filterable 中能够搜到不在级联下面的数据 强行在before-filter调用接口塞入,多少会有点性能影响,在想是不是应该前端塞入选中的数据 有大佬懂得可以优化下
其实真实项目中还会遇到, 一个人在多个部门下,点击一个都要勾选上,但搜索的时候只搜索出一条人员,希望大家能一起把这块功能完善,以后方便大家使用
以及数据量大的情况下,级联也是需要优化的