elementUI的级联选择器的v-modle接受的参数是一个数组，数组中的值是对应树形数组的节点值，但是在真实开发中后端可能只给返回了某一处单一节点，对el-cascader进行2次封装实现三级联动

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"
  
              />