vue中动态el-select下拉多级联动

项目场景：vue中使用下拉框多级联动

提示：这里简述项目相关背景：

例如：el-select下拉框多级联动

---

原理

`提示：通过对数据的处理实现动态多级下拉功能

子组件
    <el-select v-model="selectedValueArr[index]" value-key="id" clearable v-for="(item, index) in selectList.length" :key="index" @change="(value) => changeSelectData(value, index)">
       <el-option v-for="item of selectList[index]" :key="`${item.id}${index}`" :label="item.categoryName" :value="item"></el-option>
     </el-select>

  props: {
    value: { //接受参数
      type: Array
    }
  },

data() {
	return {
		selectedValueArr: [], //下拉框选中数据
		selectList: [], //循环的数据
	}
}
//监听选中数据
 watch: {
    'selectedValueArr': {
      handler(val) {
        this.$emit('setValue', this.selectedValueArr)
      }
    }
  },
   created() {
    //初始化数据
    this.onResetList()
  },
methods: {
    //初始化数据
    onResetList() {
      this.initSelectArr(0) //重置数据
      if (this.value && this.value.length > 0) { //判断是否有回显数据
        this.findId(this.childNodes)
      }
    },
    //选择数据
    changeSelectData(item, index) {
      this.selectedValueArr[index] = item
      this.initSelectArr(index) //选中变化数据
      if (item.childNodes && item.childNodes.length > 0) { //判断是不是有联动下拉框数据
        this.selectList.push(item.childNodes)
        this.selectedValueArr.push('') //有联动的数据，就push一个初始化定义
      }
    },
    //根据下标来重置数据
    initSelectArr(index) {
      if (index === 0) {
        this.selectList = [this.childNodes]
      } else {
        this.selectList = this.selectList.slice(0, index + 1) //筛选出下拉框的值
      }
      this.selectedValueArr = this.selectedValueArr.slice(0, index + 1) //选中的值
    },
    // 处理数据
    findId(arr1) {
      let temp = []
      let newArr = []
      let index = 0
      let that = this
      let forFn = function(arr, index) {
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i]
          if (item.id === that.value[index]) {
            newArr.push(arr) //根据下标 把对应的数据存储
            temp.push(item) //选中的数据存储
            forFn(item.childNodes, index + 1)
            break
          }
        }
      }
      forFn(arr1, index) //递归函数处理数据
      this.selectList = newArr
      this.selectedValueArr = temp
    }
  }
  //数据结构：
 childNodes：[
	 {
	   name: '',
	   id: '',
	   childNodes: [
	     {}，
	     {}
	   ]
	 }
 ]

\

//父组件使用
<link-select v-model="values" @setValue="setValue"></link-select>
//触发方法
  setValue(val) {
      this.values = val.filter(item => item && item.id).map(item => item.id)
      console.log(this.values, '000')
    },