小程序使用 van-tree-select 实现级联三级选择

要实现级联三级选择，需要在 van-tree-select 组件中嵌套三个 van-tree-select 组件，分别代表每个级别。

首先，设置第一个 van-tree-select 组件，它的数据源来自于一级列表数据。当一级列表的值改变时，需要根据选中的值来更新二级列表的数据源。这可以通过监听一级列表的 change 事件，来更新二级列表的数据源。

接下来，设置第二个 van-tree-select 组件，它的数据源来自于二级列表数据。当二级列表的值改变时，需要根据选中的值来更新三级列表的数据源。这可以通过监听二级列表的 change 事件，来更新三级列表的数据源。

最后，设置第三个 van-tree-select 组件，它的数据源来自于三级列表数据。当三级列表的值改变时，需要将最终选中的值返回给父组件。

以下是示例代码：

<template>
  <van-tree-select
    :items='firstLevelData'
    @change='onFirstLevelChange'
    :main-active-index='firstLevelSelectedIndex'
  >
    <van-tree-select
      :items='secondLevelData'
      @change='onSecondLevelChange'
      :main-active-index='secondLevelSelectedIndex'
    >
      <van-tree-select
        :items='thirdLevelData'
        @change='onThirdLevelChange'
        :main-active-index='thirdLevelSelectedIndex'
      />
    </van-tree-select>
  </van-tree-select>
</template>

<script>
export default {
  data() {
    return {
      firstLevelSelectedIndex: 0,
      secondLevelSelectedIndex: 0,
      thirdLevelSelectedIndex: 0,
      firstLevelData: [
        { text: '省份1', id: 1 },
        { text: '省份2', id: 2 },
        { text: '省份3', id: 3 },
      ],
      secondLevelData: [],
      thirdLevelData: [],
    };
  },
  methods: {
    onFirstLevelChange(index) {
      this.firstLevelSelectedIndex = index;
      // 根据选中的一级列表值，更新二级列表数据源
      this.secondLevelData = this.getFirstLevelDataById(this.firstLevelData[index].id);
    },
    onSecondLevelChange(index) {
      this.secondLevelSelectedIndex = index;
      // 根据选中的二级列表值，更新三级列表数据源
      this.thirdLevelData = this.getSecondLevelDataById(this.secondLevelData[index].id);
    },
    onThirdLevelChange(index) {
      this.thirdLevelSelectedIndex = index;
      // 将最终选中的值返回给父组件
      this.$emit('change', this.thirdLevelData[index]);
    },
    getFirstLevelDataById(id) {
      // 根据一级列表的 id，返回对应的二级列表数据
      // ...
    },
    getSecondLevelDataById(id) {
      // 根据二级列表的 id，返回对应的三级列表数据
      // ...
    },
  },
};
</script>