vue使用 vant TreeSelect 分类选择怎么分三层 教学

在Vue中使用Vant组件库的TreeSelect实现三层分类的选择，你可以按照以下步骤操作：

1. 首先，安装依赖：

   npm install vant @vant/weapp @vue/cli-plugin-vant --save

2. 引入Vant的TreeSelect组件：
在`main.js`或`App.vue`中引入Vant，并注册TreeSelect组件：

   import { TreeSelect } from 'vant';
   import Vant from 'vant/lib/index.css';

   Vue.use(Vant);

3. 定义数据结构：
假设你有三级分类的数据，可以这样组织数据：

   {
     "categories": [
       {
         "id": 1,
         "name": "一级分类",
         "children": [
           {
             "id": 2,
             "name": "二级分类1",
             "children": [
               {"id": 3, "name": "三级分类1", "disabled": false},
               {"id": 4, "name": "三级分类2", "disabled": true}
             ]
           },
           // 其他二级分类...
         ]
       }
       // 其他一级分类...
     ]
   }

4. 使用TreeSelect组件：
在需要的地方创建一个树形选择框，绑定数据源和事件处理函数：

   <van-tree-select
     v-model="selectedValue"
     :data="categories"
     placeholder="请选择分类"
     @on-change="handleChange"
   ></van-tree-select>

5. 事件处理器 `handleChange`：
当用户选择类别时，这个函数会被触发，获取到用户选择的完整路径（包括所有层级）：

   data() {
     return {
       selectedValue: null, // 初始化为空
       categories: ... // 上述定义的数据
     };
   },
   methods: {
     handleChange(value) {
       let path = [];
       let current = value;
       while (current && current.id !== undefined) {
         path.unshift(current);
         current = this.categories.find(c => c.id === current.parentId);
       }
       console.log('选中的三级分类路径:', path);
     }
   }