记录饿了么ui的级联选择器回显问题的解决方案

在使用联级选择器时,我遇到一个小问题

在选中最后一项后,只有前面的父级节点有选中的样式,最后一个却没有,再点击一次才显示 在vue的devtool里看到checkedValue在第一次选中是个number,再次选中是数组,也就是说,checkedValue是数组才能让最后一个显示选中的样式,而我将绑定的value设置为了最后一个节点的id(element要求是number类型,否则就会警告)

<template>
  <el-cascader
    ref="cascader"
    separator="-"
    :value="value"
    :props="propsOption"
    :options="options"
    @change="handleChange"
  />
</template>

<script>
import { getDepartmentAsync } from '@/api/department'
import { arr2tree } from '@/utils/arrToTree'
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      node: null,
      propsOption: { value: 'id', label: 'name' },
      options: []
    }
  },
  async created() {
    const res = await getDepartmentAsync()
    this.options = arr2tree(res.data, 0)
  },
  methods: {
    handleChange(value) {
      console.log(value)
      //注意这里,value默认为数组,而我只选最后一个节点的值传给父组件
      this.$emit('input', value[value.length - 1])
    }
  }
}
</script>

解决方法很简单,查阅文档后发现,props中的emitPath属性能将value设置为只返回最后一个结点的值,让他的返回默认值改变之后element便可以正确的设置checkedValue

//将data中的propsOption对象中加上emitPath属性
data() {
    return {
      node: null,
      propsOption: { value: 'id', label: 'name', emitPath: false },
      options: []
    }
  },
  

但是有点问题的是,在使用自定义prop的时候,我遇到他能正常的写入最后一个值,在回显的时候却不能只通过最后一个值来识别active的节点,于是只好放弃直接设置,而是使用递归查询出整个链作为回显的值

// 查询树
const findTree = (tree:any, cb:any, resolv:any[], parent?:any) => {
    if(!Array.isArray(tree) || !tree?.length) return
    const target = tree.find((item:any) => {
        if(cb(item, parent)) return true
        return findTree(item[defaultProps.children], cb, resolv, item)
    })
    if(target) {
        resolv.unshift(target)
        return true
    }
}

// 查找对应id所在的链
const findLink = (tree:any, id:any) => {
    const link:any = [] 
    findTree(tree, (item:any) => {
        return item.id === id
    }, link)
    return link.map((it:any) => it.id)
}

// 这样我就能通过以下代码来查询对应id所在的节点了
findLink(treeData, id)