树结构下拉框（下拉树）

下拉树

该博客用于记录下拉树（TreeSelect）的解决办法、未验证的思路，以及推荐查看的博客，以及误区。

基础思路及误区

1.思路，由于免费的treeSelect在ivew和element框架中不存在，所以只能自己写或者组装已有的组件。
而思路就是组装<select>和<tree>
2误区，直接

<select>
	<tree>
</select>

不可以，理由是slelect可以显示的数据只能来自于option.
及

<template>
    <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
</template>
<script>
    export default {
        data () {
            return {
                cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
                model1: 'New York'
            }
        }
    }
</script>

而把其中的model1的默认值改为list中没有的数据时，select并不会显示选中了数据

*以上可以自己去试试

https://run.iviewui.com/

所以tree选中的值只是tree选中的值，slelect如果没有options，select永远不会选中任何值

思路

所以只要将tree选中的值加入到select的option中即可
tempate

<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-select-change="handleCheckChange"></Tree>
        </i-select>
    </div>

data

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: ''

method

handleCheckChange (data) {
                let value = data[0].value;
                let title = data[0].title;
                let left={
                    value:value,
                    label:title
                }
                this.list = []
                this.model2 = ''
                this.list.push(left);
                console.log(this.list[0].value);
                this.model2 = value;
                console.log(this.model2);
            }

以上是实现了单选，我是看了这篇博客改的，博客是多选

https://www.jianshu.com/p/0ce52f43864e

其他未验证的思路
1.用下拉菜单嵌套，将其中的DropdownItem替换成tree
2.其他有用的博客，我没看

https://www.jianshu.com/p/da9333696364