vant/src/tree-select/README.zh-CN.md

TreeSelect 分类选择

引入

import Vue from 'vue';
import { TreeSelect } from 'vant';

Vue.use(TreeSelect);

代码演示

单选模式

<van-tree-select
  :items="items"
  :active-id="activeId"
  :main-active-index.sync="mainActiveIndex"
  @click-item="onClickItem"
/>

export default {
  data() {
    return {
      items,
      activeId: 1,
      mainActiveIndex: 0
    };
  },
  methods: {
    onClickItem(data) {
      this.activeId = data.id;
    }
  }
}

多选模式

<van-tree-select
  :items="items"
  :active-id="activeIds"
  :main-active-index.sync="mainActiveIndex"
  @click-item="onClickItem"
/>

export default {
  data() {
    return {
      items,
      activeIds: 1,
      mainActiveIndex: 0,
    };
  },
  methods: {
    onClickItem(data) {
      const { id } = data;
      const { activeIds } = this;

      if (activeIds.indexOf(id) !== -1) {
        activeIds.splice(activeIds.indexOf(id), 1);
      } else {
        activeIds.push(id);
      }
    }
  }
}

API

Props

参数	说明	类型	默认值	版本
items	分类显示所需的数据	Item[]	[]	-
height	高度，默认单位为 px	`string	number`	300
main-active-index	左侧高亮选项的索引	number	0	-
active-id	右侧高亮选项的 id，支持传入数组	`string	number	(string

Events

事件名	说明	回调参数
click-nav	点击左侧导航时触发	index：被点击的导航的索引
click-item	点击右侧选择项时触发	data: 该点击项的数据

Slots

名称	说明
content	自定义右侧区域内容

Item 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。

每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项

[
  {
    // 导航名称
    text: '所有城市',
    // 该导航下所有的可选项
    children: [
      {
        // 名称
        text: '温州',
        // id，作为匹配选中状态的标识
        id: 1,
        // 禁用选项
        disabled: true
      },
      {
        text: '杭州',
        id: 2
      }
    ]
  }
]