iView下拉树

iView目前提供了Select选择器和Tree树形控件，但是在Form表单中直接使用Tree，总是觉得怪怪的，iView官方目前并未提供下拉树组件，所以需要自己动手制作下拉树。

TreeSelector.png

github上已经有大神制作了vue-treeselect，有需要的可以直接用这个。
由于能力有限，此次下拉树是通过组装iView的Select和Tree的方式实现下拉树。

废话不多说，先上Demo。

在i-select中添加i-option元素，且设置style="display: none"，隐藏选择器的下拉选项，在i-option后添加Tree组件

  
    
      {{ item.label }}
    
    
  

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事件获取已勾选的节点，然后筛选出需要的节点（此处是筛选出title中带leaf的节点），并将数据合并为title和value两个字符串，并push到list中，就可以完美的呈现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')