vant 级联选择器动态添加后的回显

vant 级联选择器动态添加的回显

需求：
动态级联不确定有多少层，需要根据上一层选择的id请求出下一层的数据
新增的时候，vant级联为动态添加，根据选择的id，发送请求添加子选项
编辑的时候，vant级联可以回显到所选择的每一项级联
页面不仅仅只有一个级联

<van-field
  v-model="fieldValue"
  is-link
  readonly
  label="地区"
  placeholder="请选择所在地区"
  @click="show = true"
/>
<van-popup v-model="show" round position="bottom">
  <van-cascader
    v-model="cascaderValue"
    title="请选择所在地区"
    :options="options"
    @close="show = false"
    @change="onChange"
    @finish="onFinish"
  />
</van-popup>

export default {
  data() {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [],
        },
      ],
      //拿到选择的每一项值所组成的数组
		ids:[]
    };
  },
  methods: {
    onChange({ value, selectedOptions, tabIndex }) {
  		//	其中value为选中的值，selectedOptions为当前选中的值所在的子项数组，tabIndex为第几级
  		//调用请求方法(把当前值和当前值所在的子项数组)
  		this.add(value, selectedOptions)
  		
    },
    //请求子项的方法
    add(value, selectedOptions){
    //接口请求
    list().then(res=>{
    selectedOptions[selectedOptions.length - 1].children = [];
    //需要后端返回某个字段以此来判断是否需要给子项创建children
    res.data.forEach(item=>{
    selectedOptions[selectedOptions.length - 1].children.push({
    id:'',
    children:[],//如果已经是最后一项，就不需要创建
    })
    })
    })
    }
    onFinish({ selectedOptions }) {
      this.show = false;
      this.ids = selectedOptions.map((option) => option.id)
      this.fieldValue = selectedOptions.map((option) => option.text).join('/')
    },
  },
};

回显问题

//由于vant绑定的值是点击的最后一项的值，由于动态加载子项，子项尚未加载出来，就无法回显
//拿到选择的每一项值所组成的数组
ids:[]
addTree(id,tree){
//先用id请求到子选项，然后在tree中找到id所在的位置，将子选项赋值给children
     let idx = tree.findIndex((item) => {
              return (item.value = id);
            });
//判断是都是ids是否是倒数第二项
//是，则reture出去
//否，则再调用addTree()
this.addTree(ids[index],tree[idx].children)
}