基於 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