使用element ui 二次封装实现下拉树组件，可以搜索，可以动态绑定
一 实现效果图
1.1 单选模式
单选模式.gif
1.2 多选模式
多选模式.gif
二 相关说明
2.1 框架以及版本
1、element-ui 2.15.1 2
2、vue 2.6.11
2.2 组件概述
封装的下拉树，结合了element ui中的下拉组件 el-select 与 树结构组件 el-tree，取两个组件中的一些属性，在此基础上进行的封装。其中可通过v-model对数据进行动态绑定。自行封装扩展性不高，可能会有一些问题，需求不同，可自行进行封装。
2.3 组件api
- 相关属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultValue/v-model | 值 | String, Number, Array | - |
| treeData | 树结构数据源 | Array | [] |
| treeProps | 替换treeNode 中 label, children 字段为 treeData 中对应的字段 | Object | {label: ‘name’, children: ‘children’} |
| nodeKey | 树结构数据key取值，数据唯一，默认id | String | id |
| clearable | 是否显示清空功能 | Boolean | false |
| multiple | 是否多选 | Boolean | false |
| placeholder | 选择框默认文字 | String | 请选择 |
| showSearch | 是否显示搜索框 | Boolean | false |
| searchPlaceholder | 搜索框默认文字 | String | 请输入关键字 |
| collapseTags | 多选时是否将选中值按文字的形式展示 | Boolean | true |
2 相关方法
| 名称 | 说明 | 参数 |
|---|---|---|
| change | 数据发生变化 | 数据，选中的节点 |
| removeTag | 多选模式下，点击删除单个tag触发 | 当前选中的值 |
| clear | 清空选项触发 | - |
三 代码实现
3.1 组件页面代码
3.2 组件JS部分代码
3.3 组件样式代码
这里有覆盖修改到element-ui的原始样式，
注：如果需要修改下拉框的高度，修改样式代码中.el-select-dropdown__wrap 中的高度属性
四 如何使用
4.1 组件引入注册后页面
4.2 参数设置
export default {
data () {
return {
treeData: [
{
id: "321C8FF6CC6046D79CD8877526054BCF",
text: "1100 北京市本级",
name: "1100 北京市本级",
code: "1100"
},
{
id: "157EAB9EA1A34D0F824E97C2C7D9F0CA",
text: "1101 市辖区",
name: "1101 市辖区",
code: "1101",
children: [
{
id: "B08F7DB39F124ACFB2171508D8C5C0FD",
text: "110101 东城区",
name: "110101 东城区",
code: "110101"
},
{
id: "2AF3A9766AAD433A95D4EADE5FB97839",
text: "110102 西城区",
name: "110102 西城区",
code: "110102"
},
{
id: "A2058EAE12674B3D9BA3710C87DDB111",
text: "110105 朝阳区",
name: "110105 朝阳区",
code: "110105"
},
{
id: "C6BC2FE9FE86493291EE59171133ABB5",
text: "110106 丰台区",
name: "110106 丰台区",
code: "110106"
},
{
id: "06E478CB634F4FC19EC0381D55751218",
text: "110107 石景山区",
name: "110107 石景山区",
code: "110107"
},
{
id: "DD0B1A29473D4053989938700B73AE26",
text: "110108 海淀区",
name: "110108 海淀区",
code: "110108"
},
{
id: "5D3FF6E7729E43F9B813EAAB80796E41",
text: "110109 门头沟区",
name: "110109 门头沟区",
code: "110109"
},
{
id: "349609893FAC47BC97509B8FC411059A",
text: "110111 房山区",
name: "110111 房山区",
code: "110111"
},
{
id: "1E5B2DC4A1E84C959BB78D6E1B49A1DF",
text: "110112 通州区",
name: "110112 通州区",
code: "110112"
},
{
id: "2C9DC40AEFF8454ABF8A2EE6AD0A2DB5",
text: "110113 顺义区",
name: "110113 顺义区",
code: "110113"
},
{
id: "5C0342E4E41841AD837E365DB79E81B7",
text: "110114 昌平区",
name: "110114 昌平区",
code: "110114"
},
{
id: "DF25016580634FD39307FC0E18E7CF4F",
text: "110115 大兴区",
name: "110115 大兴区",
code: "110115"
},
{
id: "8DC99ABF109D40ED899552A08FE07C63",
text: "110116 怀柔区",
name: "110116 怀柔区",
code: "110116"
},
{
id: "9D2DA21BD26C40CC90B8BB26E1B437AC",
text: "110117 平谷区",
name: "110117 平谷区",
code: "110117"
},
{
id: "AD5172DDD7D547F5A06F022D64EB4DF5",
text: "110118 密云区",
name: "110118 密云区",
code: "110118"
},
{
id: "78B4DA4936A44314AD801B15988707D4",
text: "110119 延庆区",
name: "110119 延庆区",
code: "110119"
}
]
},
{
id: "E8ADAB8AFDB24F77B3FA89ED7E9A9F15",
text: "1102 县",
name: "1102 县",
code: "1102"
}
],
treeProps: {
label: 'name',
children: 'children'
},
treeValue: [],
}
}
}
参考文章
https://element.eleme.cn/#/zh-CN
https://blog.csdn.net/R_xxxxx/article/details/106112583
https://blog.csdn.net/sleepwalker_1992/article/details/87894588
https://www.jianshu.com/p/47e13795cfe7
https://blog.csdn.net/Mrchai521/article/details/114993368
https://blog.csdn.net/qq_41791303/article/details/103710456