基于 iView 的树选择器组件

产品最近提了一个 须要三级选择器 才能实现的需求，看了iView和Element-UI，没有找到合适的组件，而后作了一个基于iView的TreeSelect 组件。

github地址：github.com/FFFFF1/vue-…

install 安装

npm install vue-super-tree-select --save复制代码

Usage 示例

该组件是基于iView的，请事先use iView 与其CSS；

若是出现下拉框 被其余组件遮盖时，请自行修改.content-box 的z-index值(默认为100)；

<template>
  <super-tree-select v-model='model_' :data='data_' :searchable='true' width="500"></super-tree-select>
</template>

<script>
import superTreeSelect from 'vue-super-tree-select'

export default {
  components: {superTreeSelect},
  data () {
    return {
      model_: [
      { title: '豆浆' },
      { title: '油条' }
      ],
      data_: [
        {
          title: '早餐',
          children: [
            {
              title: '北方',
              children: [
                {title: '豆浆'},
                {title: '油条'}
              ]
            },
            {
              title: '南方',
              children: [
                {title: '肠粉'},
                {title: '虾饺'}
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>复制代码

config 配置项

属性	说明	类型	默认值
pkey	设置每个节点的惟一标识	String	title
v-model	存放组件中选择的最底层节点信息,每一个节点信息会自动加上一个value属性，记录其全部父节点的pkey值相似于:'id1/id2/id3'	Array	/
data	组件中全部的选择项，格式请参照示例	Array	/
searchable	是否可搜索，设置该属性为true时，能够根据子节点的title进行搜索	Boolean	false
clearable	是否可清空	Boolean	false
width	设置组件的宽度	String	300