TreeSelect 树选择

树型选择控件。

何时使用

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

代码演示

基本

最简单的用法。

<template>
  <v-tree-select :data="treeData1" allow-clear style="width:300px" @select="onSelect" @clear="onClear"></v-tree-select>
</template>
<script>
export default {
  data() {
    return {
      treeData1: [{
        title: 'parent 1',
        expanded: true,
        children: [{
          title: 'parent 1-0',
          expanded: true,
          children: [{
            title: 'my leaf',
          }, {
            title: 'your leaf',
          }]
        }, {
          title: 'parent 1-1',
          children: [{
            title: "<span style='color: #08c'>sss</span>"
          }]
        }]
      }],
    }
  },
  methods: {
      onSelect(data) {
        console.log(data);
      },
      onClear(data) {
        console.log('clear', data);
      }
    }
}
</script>

可勾选

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

<template>
  <v-tree-select :data="treeData2" allow-clear multiple style="width:300px" @check="onCheck" @clear="onClear"></v-tree-select>
</template>
<script>
export default {
  data() {
    return {
      treeData2: [{
        title: 'parent 1',
        expanded: true,
        children: [{
          title: 'parent 1-0',
          expanded: true,
          children: [{
            title: 'my leaf',
          }, {
            title: 'your leaf',
          }, {
            title: 'self leaf',
          }]
        }, {
          title: 'parent 1-1',
          children: [{
            title: "<span style='color: #08c'>sss</span>"
          }]
        }, {
          title: 'parent 1-2',
        }]
      }],
    }
  },
  methods: {
    onCheck(data) {
      console.log(data)
    },
    onClear(data) {
      console.log('clear', data);
    }
  }
}
</script>

异步加载数据

点击展开节点，动态加载数据。

<template>
  <v-tree-select :data="asyncData" allow-clear style="width:300px" :async="getData"></v-tree-select>
</template>
<script>
export default {
  data() {
    return {
      asyncData: [
        { title: 'pNode 01', children: []},
        { title: 'pNode 02', children: []},
        { title: 'pNode 03'},
      ]
    }
  },
  methods: {
    getData(node) {
      console.log(node);
      return new Promise(resolve => {
        setTimeout(()=>{
          resolve([
            { title: `leaf ${node.clue}-0`, children: []},
            { title: `leaf ${node.clue}-1`},
            { title: `leaf ${node.clue}-2`},
          ])
        }, 1000)
      })
    },
  }
}
</script>

API

TreeSelect Props

Tree Events