iView目前提供了Select選擇器和Tree樹形控件，但是在Form表單中直接使用Tree米同，總是覺得怪怪的骇扇，iView官方目前并未提供下拉樹組件，所以需要自己動手制作下拉樹面粮。

TreeSelector.png

github上已經(jīng)有大神制作了vue-treeselect少孝，有需要的可以直接用這個。
由于能力有限熬苍，此次下拉樹是通過組裝iView的Select和Tree的方式實現(xiàn)下拉樹稍走。

廢話不多說，先上Demo柴底。

在i-select中添加i-option元素婿脸，且設(shè)置style="display: none"，隱藏選擇器的下拉選項柄驻，在i-option后添加Tree組件

<!-- HTML代碼 -->
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<script src="https://cdn.bootcss.com/iview/3.0.1/iview.min.js"></script>
<div id="app">
  <i-select :value="model2" placeholder="請選擇" style="width:176px">
    <i-option v-for="item of list" :value="item.value" :key="item.value" style="display: none;">
      {{ item.label }}
    </i-option>
    <Tree :data="data" @on-check-change="handleCheckChange" show-checkbox></Tree>
  </i-select>
</div>

CSS主要用來控制樣式

/* CSS */
@import url("https://cdn.bootcss.com/iview/3.0.1/styles/iview.css");
#app{padding: 32px;}

.ivu-select-dropdown-list {
  padding-left: 5px;
}

通過Tree組件的on-check-change事件獲取已勾選的節(jié)點狐树，然后篩選出需要的節(jié)點（此處是篩選出title中帶leaf的節(jié)點），并將數(shù)據(jù)合并為title和value兩個字符串鸿脓，并push到list中抑钟，就可以完美的呈現(xiàn)iView格式的下拉樹啦~

Tree Event.png

// JS
var Main = {
  data () {
    return {
      list: [],
      data: [{
        title: 'parent 1',
        value: '1',
        children: [{
          title: 'parent 1-1',
          value: '11',
          children: [{
            title: 'leaf 1-1-1',
            value: '111'
          }, {
            title: 'leaf 1-1-2',
            value: '112'
          }]
        }, {
          title: 'parent 1-2',
          value: '12',
          children: [{
            title: 'leaf 1-2-1',
            value: '121'
          }]
        }]
      }],
      model2: ''
    }
  },
  methods: {
    handleCheckChange (data) {
      let value = ''
      let title = ''
      this.list = []
      this.model2 = ''
      data.forEach((item, index) => {
        if (item.title.includes('leaf')) { 
          value += `${item.value},`
          title += `${item.title},`
        }
      })
      value = value.substring(0, value.length - 1)
      title = title.substring(0, title.length - 1)
      this.list.push({
        value,
        title
      })
      this.model2 = value
    }
  }
}

var Component = Vue.extend(Main)
new Component().$mount('#app')