van-tree-select三级选择

van-tree-select 是基于 Vue.js 和 Vant UI 组件库实现的树形选择器，可以方便地实现三级选择。

以下是实现三级选择的步骤：

1. 定义数据源，例如：

treeData: [
  {
    text: '一级选项1',
    children: [
      {
        text: '二级选项1-1',
        children: [
          { text: '三级选项1-1-1' },
          { text: '三级选项1-1-2' },
        ],
      },
      {
        text: '二级选项1-2',
        children: [
          { text: '三级选项1-2-1' },
          { text: '三级选项1-2-2' },
        ],
      },
    ],
  },
  {
    text: '一级选项2',
    children: [
      {
        text: '二级选项2-1',
        children: [
          { text: '三级选项2-1-1' },
          { text: '三级选项2-1-2' },
        ],
      },
      {
        text: '二级选项2-2',
        children: [
          { text: '三级选项2-2-1' },
          { text: '三级选项2-2-2' },
        ],
      },
    ],
  },
]

2. 在模板中使用 van-tree-select 组件，并绑定数据源和选择器的属性，例如：

<van-tree-select v-model="selectedValues" :items="treeData" title="三级选择器" :height="500" :main-active-index="mainActiveIndex" :active-id="activeId" @click-nav="onClickNav" />

其中，v-model 绑定的是选中的值，items 绑定的是数据源，title 是选择器的标题，height 是选择器的高度，main-active-index 和 active-id 是选择器的当前选中项，click-nav 是选择器导航栏被点击时触发的事件。

3. 定义 onClickNav 方法，用于处理选择器导航栏被点击时的逻辑，例如：

onClickNav({ index }) {
  this.mainActiveIndex = index
  this.activeId = null
},

其中，index 是点击的导航栏的索引，mainActiveIndex 是选择器的当前选中项的索引，activeId 是选择器当前选中项的 id。

4. 定义 computed 属性 selectedValues，用于获取当前选中的值，例如：

computed: {
  selectedValues() {
    const values = []
    if (this.mainActiveIndex !== null) {
      values.push(this.treeData[this.mainActiveIndex].text)
      if (this.activeId !== null) {
        values.push(this.treeData[this.mainActiveIndex].children[this.activeId].text)
        if (this.activeSubId !== null) {
          values.push(this.treeData[this.mainActiveIndex].children[this.activeId].children[this.activeSubId].text)
        }
      }
    }
    return values
  },
},

其中，如果 mainActiveIndex 和 activeId 都不为 null，则说明选择器当前选中了三级选项，此时返回三级选项的值，否则返回前两级选项的值。