基于 iView 的树选择器组件

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

github地址：https://github.com/FFFFF1/vue-super-tree-select

install 安装

npm install vue-super-tree-select --save

Usage 示例

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

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

 

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: '虾饺'}

              ]

            }

          ]

        }

      ]

    }

  }

}

config 配置项

属性说明类型默认值

pkey设置每一个节点的唯一标识Stringtitle

v-model存放组件中选择的最底层节点信息,每个节点信息会自动加上一个value属性，记录其所有父节点的pkey值类似于:'id1/id2/id3'Array/

data组件中所有的选择项，格式请参照示例Array/

searchable是否可搜索，设置该属性为true时，可以根据子节点的title进行搜索Booleanfalse

clearable是否可清空Booleanfalse

width设置组件的宽度String300