树型选择控件。

何时使用

类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。

代码演示

基本用法

最简单的用法。

<template>
  <a-tree-select
    showSearch
    style="width: 300px"
    :value="value"
    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder='Please select'
    allowClear
    treeDefaultExpandAll
    @change="onChange"
  >
    <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
      <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
        <a-tree-select-node :selectable="false" value='leaf1' title='my leaf' key='random' />
        <a-tree-select-node value='leaf2' title='your leaf' key='random1' />
      </a-tree-select-node>
      <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
        <a-tree-select-node value='sss' key='random3'>
          <b style="color: #08c" slot="title">sss</b>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>
</template>
<script>
export default {
  data () {
    return {
      treeExpandedKeys: [],
      value: undefined,
    }
  },
  methods: {
    onChange (value) {
      console.log(value)
      this.value = value
    },
  },
}
</script>

可勾选

使用勾选框实现多选功能。

<template>
  <a-tree-select
    style="width: 300px"
    :treeData="treeData"
    :value="value"
    @change="onChange"
    treeCheckable
    :showCheckedStrategy="SHOW_PARENT"
    searchPlaceholder='Please select'
  />
</template>
<script>
import { TreeSelect } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
const treeData = [{
  title: 'Node1',
  value: '0-0',
  key: '0-0',
  children: [{
    title: 'Child Node1',
    value: '0-0-0',
    key: '0-0-0',
  }],
}, {
  title: 'Node2',
  value: '0-1',
  key: '0-1',
  children: [{
    title: 'Child Node3',
    value: '0-1-0',
    key: '0-1-0',
    disabled: true,
  }, {
    title: 'Child Node4',
    value: '0-1-1',
    key: '0-1-1',
  }, {
    title: 'Child Node5',
    value: '0-1-2',
    key: '0-1-2',
  }],
}]
export default {
  data () {
    return {
      value: ['0-0-0'],
      treeData,
      SHOW_PARENT,
    }
  },
  methods: {
    onChange (value) {
      console.log('onChange ', value)
      this.value = value
    },
  },
}
</script>

多选

多选的树选择。

<template>
  <a-tree-select
    showSearch
    style="width: 300px"
    :value="value"
    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder='Please select'
    allowClear
    multiple
    treeDefaultExpandAll
    @change="onChange"
    @search="onSearch"
    @select="onSelect"
  >
    <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
      <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
        <a-tree-select-node value='leaf1' title='my leaf' key='random' />
        <a-tree-select-node value='leaf2' title='your leaf' key='random1' />
      </a-tree-select-node>
      <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
        <a-tree-select-node value='sss' key='random3'>
          <b style="color: #08c" slot="title">sss</b>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>
</template>
<script>
export default {
  data () {
    return {
      value: undefined,
    }
  },
  methods: {
    onChange (value) {
      console.log(value)
      this.value = value
    },
    onSearch () {
      console.log(...arguments)
    },
    onSelect () {
      console.log(...arguments)
    },
  },
}
</script>

从数据直接生成

使用 treeData 把 JSON 数据直接生成树结构。

<template>
  <a-tree-select
    style="width: 300px"
    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
    :treeData="treeData"
    placeholder='Please select'
    treeDefaultExpandAll
    v-model="value"
  >
    <span style="color: #08c" slot="title" slot-scope="{key, value}" v-if="key='0-0-1'">
      Child Node1 {{value}}
    </span>
  </a-tree-select>
</template>
<script>
const treeData = [{
  title: 'Node1',
  value: '0-0',
  key: '0-0',
  children: [{
    value: '0-0-1',
    key: '0-0-1',
    scopedSlots: { // custom title
      title: 'title',
    },
  }, {
    title: 'Child Node2',
    value: '0-0-2',
    key: '0-0-2',
  }],
}, {
  title: 'Node2',
  value: '0-1',
  key: '0-1',
}]
export default {
  data () {
    return {
      value: undefined,
      treeData,
    }
  },
  watch: {
    value (value) {
      console.log(value)
    },
  },
}
</script>

后缀图标

最简单的用法。

<template>
  <a-tree-select
    showSearch
    style="width: 300px"
    :value="value"
    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder='Please select'
    allowClear
    treeDefaultExpandAll
    @change="onChange"
  >
    <a-icon slot="suffixIcon" type="smile" />
    <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
      <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
        <a-tree-select-node value='leaf1' title='my leaf' key='random' />
        <a-tree-select-node value='leaf2' title='your leaf' key='random1' />
      </a-tree-select-node>
      <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
        <a-tree-select-node value='sss' key='random3'>
          <b style="color: #08c" slot="title">sss</b>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>
</template>
<script>
export default {
  data () {
    return {
      value: undefined,
    }
  },
  methods: {
    onChange (value) {
      console.log(value)
      this.value = value
    },
  },
}
</script>

API

Tree props

事件

Tree 方法

TreeNode props

建议使用 treeData 来代替 TreeNode，免去手工构造麻烦