如何使用Vant的TreeSelect組件

要使用Vant的TreeSelect組件，首先需要在項目中安裝Vant UI庫。可以通過npm或yarn來進行安裝：

npm install vant

或

yarn add vant

接下來，在需要使用TreeSelect組件的頁面中導入TreeSelect組件：

import { TreeSelect } from 'vant';

export default {
  components: {
    [TreeSelect.name]: TreeSelect,
  },
}

然后在模板中使用TreeSelect組件，并傳入相應的數(shù)據(jù)：

<template>
  <div>
    <tree-select
      :items="items"
      :main-active-index="0"
      :active-id="activeId"
      @click-nav="onClickNav"
      @click-item="onClickItem"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          text: 'Group 1',
          children: [
            { text: 'Option 1', id: 1 },
            { text: 'Option 2', id: 2 },
          ],
        },
        {
          text: 'Group 2',
          children: [
            { text: 'Option 3', id: 3 },
            { text: 'Option 4', id: 4 },
          ],
        },
      ],
      activeId: 1,
    };
  },
  methods: {
    onClickNav({ index }) {
      console.log('click nav', index);
    },
    onClickItem({ id }) {
      console.log('click item', id);
    },
  },
};
</script>

以上代碼示例中，items數(shù)組包含了樹形結(jié)構(gòu)的數(shù)據(jù)，activeId表示當前選中的節(jié)點id。通過click-nav和click-item事件可以監(jiān)聽導航欄和選項的點擊事件。