ThTreeSelect下拉树选择器

下拉选择为树形结构

依赖说明

element-ui vue2-tree-select

效果预览

基本使用

<template>
  <div>
    <th-tree-select v-model="treeSelect" :data="treeData" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      treeSelect: '',
      treeData: [
        {
          value: '1',
          label: 'label的1',
          children: [
            {
              value: '1-1',
              label: 'label的1-1',
              children: [
                {
                  value: '1-1-1',
                  label: 'label的1-1-1'
                },
                {
                  value: '1-1-2',
                  label: 'label的1-1-2'
                },
                {
                  value: '1-1-3',
                  label: 'label的1-1-3'
                },
                {
                  value: '1-1-4',
                  label: 'label的1-1-4'
                }
              ]
            },
            {
              value: '1-2',
              label: 'label的1-2',
              children: [
                {
                  value: '1-2-1',
                  label: 'label的1-2-1'
                },
                {
                  value: '1-2-2',
                  label: 'label的1-2-2'
                }
              ]
            }
          ]
        },
        {
          value: '2-1',
          label: 'label的2-1',
          children: [
            {
              value: '2-1-1',
              label: 'label的2-1-1'
            },
            {
              value: '2-1-2',
              label: 'label的2-1-2'
            },
            {
              value: '2-1-3',
              label: 'label的2-1-3'
            }
          ]
        }
      ]
    }
  }
}
</script>

Attributes

参数	说明	类型	可选	默认值
value	绑定值	string/number/array	--	--
data	树形数据,属性参考下面#data	array	--	[]
multiple	是否多选	boolean	--	false
clearable	是否可以清空选项	boolean	--	false
defaultExpandAll	是否展开所有	boolean	--	请选择
size	输入框尺寸	string	medium/small/mini	false
placeholder	提示语	string	--	false
nodeKey	唯一标识	string	--	false
lazy	是否懒加载	boolean	--	false
load	加载子树数据的方法，仅当 lazy 属性为 true 时生效	boolean	--	false
checkStrictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false	boolean	--	false
expandOnClickNode	是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。	boolean	--	false
filterable	是否可搜索	boolean	--	false
filterMethod	搜索方法，当 filterable 为 true 时生效	function	--	false
collapseTags	多选时是否将选中值按文字的形式展示	boolean	--	false
collapseTagsMaxNum	多选时将选中值按文字的形式展示最大个数, collapseTags为true时	number	--	false
tooltipEffect	tooltip 默认提供的主题	string	dark/light	dark
renderContent	自定义渲染方法	function	--	--
props	配置选项	object	--	--

Data

参数	说明	类型
value	属性值	--
label	显示字段	--
disabled	是否禁用	boolean
children	树节点	array
isLeaf	叶子节点	boolean

Events

参数	说明	回调参数
change	选中值发生变化时触发	目前的选中值