vant cascader组件，不能选择到第二级问题

本次是对cascader组件进行了二次开发，使其可以同时选择一二三级。

vant 级联组件有 cascader 和 Picker，Picker 只能使用文本进行级联，不能带其他信息，所以选择 cascader。

业务写完之后，产品又说了下需求，需要能选择第二级。查了下资料， cascader可以使用 change 事件来二次开发，完成目标。以下是具体代码

  <van-cascader
      id="jdsqCascader"
      title="请选择所在地区"
      :options="options"
      @close="regionalNameVisible = false"
      @change="handleCascaderChange"
      @finish="onFinish"
  />
  <div class="statusBar cf">
    <div class="txtWrap">
      <span class="desc">所选区域：</span>
      <span class="dItem" v-for="item in selectedName" :key="item">{{item}}</span>
    </div>
    <van-button block type="info" size="small" round @click.native="qd()" native-type="button">确定</van-button>
  </div>
</van-popup>

export default {
  data() {
    return {
      regionalNameVisible: false,   // 街道社区
      selectedValue: [], // 街道社区 记录选择值
      selectedName: [], // 街道社区 记录选择值

      options: [
        { text: '杭州', value: 'Hangzhou' },
        { text: '宁波', value: 'Ningbo' },
        { text: '温州', value: 'Wenzhou' },
        { text: '绍兴', value: 'Shaoxing' },
        { text: '湖州', value: 'Huzhou' },
      ],

      form: {
        // regionalCode: "330108045003",//社区编码
        // regionalName: "新浦社区",//社区名称
      },
    },
  },
  methods: {
    handleCascaderChange(targetObj) {

      this.$nextTick(() => {
        // 通过querySelector获取ID为q1的节点：
        let Cascader = document.querySelector('#jdsqCascader');
        // 通过querySelectorAll获取q1节点内的符合条件的所有节点：
        let CascaderNode = Cascader.querySelectorAll('.van-tab.van-cascader__tab');


        if(targetObj.value.length===6){
          this.selectedValue = [targetObj.value]

          this.selectedName = [CascaderNode[0].innerText]
        }else if(targetObj.value.length===9){
          this.selectedValue.push(targetObj.value)
          this.selectedName = [CascaderNode[0].innerText, CascaderNode[1].innerText]
        }
      })
    },
    qd() {
      this.regionalNameVisible = false;
      console.log('this.selectedValue', this.selectedValue)
      console.log('this.selectedName', this.selectedName)

      this.form.regionalCode = this.selectedValue[this.selectedValue.length-1]
      this.form.regionalName = this.selectedName.join('/')

      this.queryPostValidCnt({
        regionalCode: '',
        streetCode: this.form.regionalCode,
      })
    },
    // 街道社区  全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.regionalNameVisible = false;

      this.form.regionalCode = selectedOptions[selectedOptions.length-1].value
      this.form.regionalName = selectedOptions.map((option) => option.text).join('/');

      this.selectedName = this.form.regionalName.split('/')
      console.log('selectedOptions', selectedOptions)

      this.queryPostValidCnt({
        regionalCode: this.form.regionalCode,
        streetCode: selectedOptions[selectedOptions.length-2].value,
      })

    },
    queryPostValidCnt(params){
      this.$MGop("POST", {
        api: PAPI.getCadreUnitAndPost, // 必须
        data: params,
        onSuccess: (res) => {
          console.log('验证社区 postValidCnt res', res)

          if(res.status === 0){
            // this.$toast.success('提交成功')
          }else{
            res.msg && this.$toast(res.msg);
          }

        },
        onFail: () => { },
        callback: postValidCnt,
      });
    },
  }
}

.statusBar{
  padding: 10px 20px;
  font-size: 28px;
  line-height: 1;

  .van-button{
    min-width: 100px;
  }

  .txtWrap{
    padding: 10px 0 20px;
  }
  .desc{
    font-weight: bolder;
    margin-right: 5px;
  }
  .dItem{
    position: relative;
    display: inline-block;
    margin-right: 10px;
    padding-left: 10px;

    &+.dItem{
      border-left: 2px solid #ccc;
    }
  }
}