超级会员免费看
本文介绍了如何在基于Vue2和Element-UI的项目中，通过封装组件实现TreeSelect功能。文章详细阐述了需求背景、最终效果、实现思路，包括el-tree和el-select的嵌套、v-model的使用以及组件封装的方法，提供了完整的代码示例，帮助开发者理解并复现这一功能。
需求背景
在日常开发中，我们会遇见很多不同的业务需求。如果让你用element-ui实现一个 tree-select 组件，你会怎么做？
这个组件在 element-plus 中是有这个组件存在的，但是在 element-ui 中是没有的。
可能你会直接使用 element-plus 组件库，或者其他组件库。但是若你的项目目前的基于vue2和element-ui进行开发的呢？
下面这种思路利用 el-tree 和 el-select 进行嵌套从而实现我们想要的 tree-select 组件
最终效果
大致思路：
el-select和el-tree进行嵌套，将el-tree放到el-option里，循环遍历el-option，同时定义一个方法比如：formatData，对树形数据进行递归处理，这样就可以实现无论嵌套的层级有几层都可以正常渲染在界面上
利用 v-model 和 update:selectValue 实现父子组件之间的双向通信，同时利用computed进行监听以实现实时更新
组件中的 v-model
我们在input中可以使用v-model来完成双向绑定：
- 这个时候往往会非常方便，因为v-model默认会帮助我们完成两件事：
- v-bind:value的数据绑定和@input的事件监听；
订阅专栏 解锁全文
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
