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

相关属性

属性	说明	类型	默认值
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 组件页面代码

<template>
  <el-select
    ref="treeSelectRef"
    style="width: 100%;"
    clearable
    :value="selectLabel"
    :multiple="multiple"
    :placeholder="placeholder"
    :popper-class="popperClass"
    :collapse-tags="collapseTags"
    @remove-tag="handleSelectRemoveTag"
    @clear="handleSelectClear"
  >
    <div class="tree-select-search" v-if="showSearch">
      <el-input
        placeholder="请输入关键字"
        v-model="treeFilterText"
        clearable
        size="mini"
        >
      </el-input>
    </div>
    <el-option :value="selectOptionValue"
      class="tree-select-option-item"
    >
      <div class="tree-select-tree-body">
        <el-tree
          id="tree-option"
          ref="optionTreeRef"
          highlight-current
          empty-text="加载中，请稍后......"
          :show-checkbox="showCheckbox"
          :data="treeData" 
          :props="treeProps"
          :node-key="nodeKey"
          :filter-node-method="filterTreeNode"
          :default-expanded-keys="defaultExpandedKeys"
          @node-click="handleNodeClick"
          @check="handleTreeCheck">
        </el-tree>
      </div>
    </el-option>
  </el-select>
</template>

3.2 组件JS部分代码

<script>
const defaultProps = {
  children: 'children', // 子级字段
  label: 'name' // 展示字段
}

export default {
  name: 'CustomTreeSelect',
  model: {
    prop: "defaultValue",
    event: "change"
  },
  props: {
    // v-model值
    defaultValue: {
      type: [String, Number, Array]
    },
    // 数据源
    treeData: {
      type: Array,
      default () {
        return []
      }
    },
    // 替换 treeNode 中 label, children 字段为 treeData 中对应的字段
    treeProps: {
      type: Object,
      default () {
        return defaultProps
      }
    },
    // 树结构key的取值，数据唯一， 默认为id
    nodeKey: {
      type: String, default: 'id'
    },
    // 是否显示清空功能
    clearable: {
      type: Boolean, default: false
    },
    // 是否多选 
    multiple: {
      type: Boolean, default: false
    },
    // 选择框默认文字
    placeholder: {
      type: String, default: '请选择'
    },
    // 搜索框默认文字
    searchPlaceholder: {
      type: String, default: '请输入关键字'
    },
    // 是否显示搜索框
    showSearch: {
      type: Boolean, default: false
    },
    // 多选时是否将选中值按文字的形式展示
    collapseTags: {
      type: Boolean, default: true
    }
  },
  data() {
    return {
      // 下拉框选中值
      selectValue: '',
      // 下拉框选中回显值
      selectLabel: '',
      // 下拉框Option的值，设置为undefined，防止选中
      selectOptionValue: undefined,
      // 树数据搜索内容
      treeFilterText: '',
      // 默认展开
      defaultExpandedKeys: []
    }
  },
  computed: {
    // 树结构是否显示复选框（多选情况下出现）
    showCheckbox () {
      return this.multiple
    },
    // select 下拉框自定义的类名-可自行修改
    popperClass () {
      let classNames = ['custom-tree-select-popper']
      if (this.showSearch) {
        classNames.push('custom-tree-select-search')
      }
      return classNames.join(' ')
    },
    // 下拉框实例
    treeSelectRef () {
      return this.$refs.treeSelectRef
    },
    // 树结构实例
    optionTreeRef () {
      return this.$refs.optionTreeRef
    }
  },
  watch: {
    // 监听默认值，对数据赋值
    defaultValue: {
      deep: true,
      immediate: true,
      handler (newValue, oldValue) {
        const { multiple } = this
        if (newValue) {
          if (!this.reloadTreeCheck)
            this.handleSetTreeCheck(newValue);
        } else {
          this.selectValue = multiple ? [] : ''
          this.selectLabel = multiple ? [] : ''
        }
      }
    },
    treeFilterText (value) {
      setTimeout(() => {
        this.handleInputChange(value)
      }, 300)
    }
  },
  mounted () {
    // 重新加载树结构选中 false-加载 true-不加载
    this.reloadTreeCheck = false
  },
  methods: {
    /** 多选模式下，点击移除单个tag */
    handleSelectRemoveTag (tag) {
      this.reloadTreeCheck = false
      const { selectValue } = this
      if (isArray(selectValue)) {
        this.selectValue.shift()
      }
      this.$emit('removeTag', tag)
    },
    /** select框的清除按钮 */
    handleSelectClear () {
      this.reloadTreeCheck = false
      const { multiple } = this
      const value = multiple ? [] : ''
      this.treeFilterText = ''
      this.selectValue = [ ...value ]
      this.selectLabel = [ ...value ]
      this.$emit('change', value, null)
      this.$emit('clear')
    },
    /** 树节点 点击时 */
    handleNodeClick (node) {
      const { treeProps, multiple, nodeKey } = this
      if (multiple) return 
      if (node.children && node.children.length > 0) return
      this.selectValue = node[nodeKey]
      this.selectLabel = node[treeProps.label]
      this.$emit('change', this.selectValue, node)
      // 下拉框失去焦点，隐藏下拉面板
      this.treeSelectRef.blur()
      // this.treeFilterText = ''
    },
    /** 树节点 复选框选中时 */
    handleTreeCheck (node, values) {
      const { treeProps } = this
      const { checkedKeys, checkedNodes } = values
      this.selectValue = checkedKeys
      const lableValues = checkedNodes.map(nodeItem => {
        return nodeItem[treeProps.label]
      })
      this.selectLabel = lableValues
      this.$emit('change', checkedKeys, checkedNodes)
    },
    /** 设置回显数据 */
    handleSetTreeNode (value) {
      const { optionTreeRef, treeProps } = this
      this.selectValue = value
      if (isArray(value)) { 
        // 多选
        this.selectLabel = value.map(item => {
          const treeNode = optionTreeRef.getNode(item)
          return treeNode.data[treeProps.label]
        })
      } else {
        // 单选
        const treeNode = optionTreeRef.getNode(value)
        this.selectLabel = treeNode.data[treeProps.label]
      }
    },
    /** 处理数据树结构展开，并处理选中效果 */
    handleTreeExpandKeys (value) {
      const { optionTreeRef, multiple } = this
      if (isArray(value) && multiple) {
        optionTreeRef.setCheckedKeys(value)
        value.forEach(item => {
          const treeNode = optionTreeRef.getNode(item)
          if (treeNode && treeNode.parent) {
            this.setTreeExpandKeys(treeNode.parent)
          }
        })
      } else {
        optionTreeRef.setCurrentKey(value)
        const treeNode = optionTreeRef.getNode(value)
        if (treeNode && treeNode.parent) {
          this.setTreeExpandKeys(treeNode.parent)
        }
      }
    },
    /** 处理树结构父级展开 */
    setTreeExpandKeys (node) {
      node.expanded = true
      if (node.parent) {
        this.setTreeExpandKeys(node.parent)
      }
    },
    /** 搜索树节点 */
    filterTreeNode (value, data, node) {
      if (!value) {
        // if (node.expanded) node.expanded = false
        return true
      }
      const { treeProps: { label } } = this
      return data[label].indexOf(value) !== -1;
    },
    /** 设置树结构回显选中 */
    handleSetTreeCheck (value) {
      if (!this.reloadTreeCheck && value) {
        this.$nextTick(() => {
          this.handleSetTreeNode(value)
          this.handleTreeExpandKeys(value)
          this.reloadTreeCheck = true
        })
      }
    },
    /** 搜索框中按下回车失去焦点触发 */
    handleInputChange (value) {
      this.optionTreeRef.filter(value)
    }
  }
}

/**
 * 判断数据类型是否为数组
 */
function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}
</script>

3.3 组件样式代码

这里有覆盖修改到element-ui的原始样式，
注：如果需要修改下拉框的高度，修改样式代码中.el-select-dropdown__wrap 中的高度属性

<style lang="scss">
.custom-tree-select-search {
  .el-select-dropdown__list {
    padding: 0;
  }
}
.custom-tree-select-popper {
  .el-scrollbar {
    .el-select-dropdown__wrap {
      max-height: 365px !important;
    }
    .el-scrollbar__bar.is-vertical {
      z-index: 3;
    }
  }
}
</style>
<style lang="scss" scoped>
.tree-select-search {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  padding: 6px;
  background: #fff;
}
.tree-select-option-item {
  background: #fff;
  overflow: scroll;
  height: 200px;
  overflow-x: hidden;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
  height: auto;
  min-height: 200px;
  padding: 0;
  overflow: hidden;
}
</style>

四如何使用

4.1 组件引入注册后页面

<CustomTreeSelect
  clearable
  multiple
  show-search
  nodeKey="code"
  v-model="treeValue"
  :treeData="treeData"
  :treeProps="treeProps"
/>

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