基於 iView 的樹選擇器元件

FFF1發表於2018-05-04
View元件

產品最近提了一個 需要三級選擇器 才能實現的需求，看了iView和Element-UI，沒有找到合適的元件，然後做了一個基於iView的TreeSelect 元件。

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

基於 iView 的樹選擇器元件

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設定每一個節點的唯一標識Stringtitle
v-model存放元件中選擇的最底層節點資訊,每個節點資訊會自動加上一個value屬性，記錄其所有父節點的pkey值類似於:'id1/id2/id3'Array/
data元件中所有的選擇項，格式請參照示例Array/
searchable是否可搜尋，設定該屬性為true時，可以根據子節點的title進行搜尋Booleanfalse
clearable是否可清空Booleanfalse
width設定元件的寬度String300


相關文章