element中级联选择器选中任意一项（动态加载数据）

html部分

      <el-cascader
        class="filter-item"
        @change="tableAreaSelect"
        @active-item-change="handleItemChange"
        :props="props"
        placeholder="请选择地区"
        :options="options"
        v-model="tableAreas"
        clearable>
      </el-cascader>

data部分

       props: {
          value: 'main',
          // 显示的文字字段名
          label: 'areaName',
          // 子层级字段名
          expandTrigger: "hover",
          children: "child",
          checkStrictly: true
        },
    options:[],
    tableAreas:[],

methods:{}

      // 获取第一级
      getArea(){
        let that = this;
        getInfo({}).then((res) => {
          this.info = res.data.dictArea;
          // console.log(res.data.dictArea);
          let id = that.info.id
        getChildDictAreaById(id).then(res=>{
          that.options = res.data
          that.options.map((item, index) => {
            for (let k in item) {
              if (!item[k]) {
                delete item[k]
              }
            }
            // 先让数据变成父级
            item.child = []
            // 手动创建字段表明当前索引 假设arrIndex值为'1-2-3' 即为options[1].child[2].child[3]
            item.arrIndex = index + ''
            // 将当前数据转成字符串放入对象里 当做value值
            item.main = JSON.stringify(item)
          })
        })
        });
      },


      tableAreaSelect(){
        if (this.tableAreas.length > 0){
          this.listQuery.areaId = JSON.parse(this.tableAreas[this.tableAreas.length - 1]).id
        }else {
          this.listQuery.areaId = null
        }
        // console.log(JSON.stringify(this.listQuery))
      },
      handleItemChange (val) {
        if(val.length != 0){
          val = JSON.parse(val[val.length - 1])
          // 最多只有4层，动态显示展开层级数
          if (4 - val.areaLevel == 0) return
          //每选中一个选项将本条数据push到val里  ,val.length - 1的那一项必然是当前点击的那一项index索引
          getChildDictAreaById(val.id).then(res => {
            let data = res.data
            let arrIndex = val.arrIndex
            data.map((item, index) => {
              // 手动创建字段表明当前索引 假设arrIndex值为'1-2-3' 即为options[1].child[2].child[3]
              item.arrIndex = arrIndex + '-' + index
              // 将当前数据转成字符串放入对象里 当做value值
              item.main = JSON.stringify(item)
              // 判断是否为最后一层
              let a = 4 - item.areaLevel
              if (a>0) {
                item.child = []
              }
            })
            // 根据父元素的arrIndex判断塞到哪个父元素下
            arrIndex = arrIndex.split('-')
            // 首项键不是child 和for循环里区别开
            let a = this.options[arrIndex[0]]
            for (let i = 1; i < arrIndex.length; i++) {
              a = a['child'][arrIndex[i]]
            }
            this.$delete(a, 'child');
            this.$set(a, 'child', data)
          })
        }
      },