vue如何实现级联选择器功能

<template>
  <div>
    <el-cascader
      v-model="selectedValues"
      :options="options"
      :props="props"
      @change="handleChange"
      placeholder="请选择"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始化级联选择器的选中值
      selectedValues: [],
      // 级联选择器的数据源
      options: [
        {
          value: '1',
          label: '测试1',
          children: [
            { value: '2', label: '测试11' },
            { value: '3', label: '测试12' }
          ]
        }
      ],
      // 自定义配置，用于指定数据结构中的属性名
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      }
    };
  },
  methods: {
    // 监听级联选择器值变化事件
    handleChange(selectedValues) {
      console.log('选中的值：', selectedValues);
    }
  },
  created() {
    // 设置初始化选中值为单位 '测试1' 和部门 '测试12'
    this.selectedValues = ['1', '3'];
  }
};
</script>

import arrayTreeFilter from 'array-tree-filter'

/*
* 双层递归逆向查找某一节点的所有父级
* */
const findPatentValue = (array, value, valueName = 'value', childrenName = 'children') => {
  if (!value || !Array.isArray(array)) return []
  const result = []
  let valid = false
  const seek = (array, value) => {
    let parentValue = ''
    const up = (array, value, lastValue) => {
      array.forEach(v => {
        const val = v[valueName]
        const child = v[childrenName]
        if (val === value) {
          valid = true
          parentValue = lastValue
          return
        }
        if (child && child.length) up(child, value, val)
      })
    }
    up(array, value)
    if (parentValue) {
      result.unshift(parentValue)
      seek(array, parentValue)
    }
  }
  seek(array, value)
  return valid ? [...result, value] : []
}

/*
* 该组件主要是通过后端传入的节点值来实现级联的双向数据绑定
* */
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    config: {
      type: Object,
      default() {
        return {
          value: 'value',
          label: 'label',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      result: []
    }
  },
  watch: {
    value() {
      this.setResult()
    },
    options() {
      this.setResult()
    }
  },
  mounted() {
    this.setResult()
  },
  methods: {
    setResult() {
      const {config, options, value} = this
      const {value: valueName, children: childrenName} = config
      this.result = findPatentValue(options, value, valueName, childrenName)
      console.log(this.result)
    },
    /*
    * 当级联选择器变化时候会触发该事件
    * 向父级传递change事件来返回选中的节点id
    * 向父级传递realChange事件来返回选中的节点及其所有父节点和选中的所有label的值
    * arrayTreeFilter 第三方库用于筛查出选中的节点及其父节点
    * */
    areaChange(v = []) {
      this.result = v
      const value = v[v.length - 1] || ''
      this.$emit('change', value)
      const {options, config} = this
      const {value: valueName, label: labelName} = config
      const areas = arrayTreeFilter(options, (item, level) => item[valueName] === v[level])
        .map(o => o[labelName])
      this.$emit('realChange', v, areas)
    },
  },
  render(createElement) {
    const {areaChange, config, result} = this
    const {value, label} = config
    return createElement('el-cascader', {
      props: {
        options: this.options,
        value: result,
        size: 'small',
        clearable: true,
        placeholder: '请选择',
        props: {
          value,
          label,
          checkStrictly: true
        }
      },
      on: {
        change: areaChange
      }
    })
  }
}

<ChoiceArea v-model="memberForm.regionCode" :options="areaOptions"
                          :config="{value: 'code', label: 'name', children: 'children'}"
                          @realChange="choiceAreaChange"
  
              />