el-select结合el-tree实现树形多选

形式一：

业务需求：

1. 在树形列表中选择项目；

2. 树形列表需带有筛选过滤功能；

3. 将已选择的项目展示在输入框中；

4. 输入框中的选中项可以被单独快速删除；

5. 下拉框中可再次对之前选择过的项目进行重新选择。

实现思路：

1. 所用技术：vue + elementUI组件库；

2. 左侧：使用 el-select 下拉框多选；

    右侧：使用 el-popover 弹出框 里面包含了 el-tree 树形列表进行展示。

最终效果：

1. 初始页面展示如下：

2. 点击“蓝色添加按钮”，弹出树形列表：

3. 输入关键字可直接进行筛选查询：

4. 点击右侧叶子节点进行选择，展示在左侧输入框中：

5. 输入框中的选择项可以直接点击选项后的关闭按钮取消选择，也可在下拉框列表中进行选择：

代码如下：

形式二：

最终效果：

1. 下拉单选：

2. 下拉多选：

 代码如下：

形式三（封装成组件使用）：

最终效果：

组件代码（ el-select-tree.vue ）：

页面中应用组件（ index.vue ）：

优化了上面的组件，添加了多选以及默认值显示：

  

组件代码（ el-select-tree.vue ）：

页面中应用组件（ index.vue ）：

大家使用时有啥问题，欢迎提出来哦~~~