需求背景
在日常开发中,我们会遇见很多不同的业务需求。如果让你用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的事件监听;