Element UI 二次封装实现下拉树组件

使用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

  1. 相关属性
属性 说明 类型 默认值
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

你可能感兴趣的:(Element UI 二次封装实现下拉树组件)