cascader远程搜索,后端返回非options内容中数组,前端扩大options并去重 ,树结构扁平化

62 阅读1分钟

需求 权限低的人员,列表表头可以搜索整个组织架构数据,

 // before-filter 调用接口
 // res.data 后端返回新的级联数据    Option 老的级联数据
 this.options = this.checkRepeat(res.data, Option)
 
 // checkRepeat 数据去重
 checkRepeat(arr, defaultArr) {
      let options = defaultArr
    
      arr.forEach((item) => {
        //getSelectedOption 公共方法引入  import { getSelectedOption } from '@/utils/index.js'
        // 判断返回数组id  是否在扁平化树 的数组中 不在就把当前数据塞入老的树结构下面
        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 }) {
  // 根据 ID 获取选项对象
  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] // 使用节点 ID 作为值
    })
    if (cur[childrenKey]) {
      return prev.concat(flatten(cur[childrenKey], options))
    }
    return prev
  }, [])
}

反思其实这样处理不好 为了在 filterable 中能够搜到不在级联下面的数据 强行在before-filter调用接口塞入,多少会有点性能影响,在想是不是应该前端塞入选中的数据 有大佬懂得可以优化下

其实真实项目中还会遇到, 一个人在多个部门下,点击一个都要勾选上,但搜索的时候只搜索出一条人员,希望大家能一起把这块功能完善,以后方便大家使用

以及数据量大的情况下,级联也是需要优化的