使用element里面的select 和 tree进行封装selectTree

二次封装的selectTree支持多选，删除，清空所有，点击选项的时候同时隐藏下拉框，首先看一下demo

直接上代码

    <el-select v-model="value" 
        v-bind="$attrs" 
        ref="select" 
        @clear="handleSelectClear"
        @remove-tag="handleRemoveTag">
        <el-option value="">
            <el-tree ref="tree"
            :data="data"
            v-on="$listeners"
            highlight-current
            @node-click="handleNodeClick"
            >
          </el-tree>
        </el-option>
      </el-select>

这是基本的结构， 其中data指的就是el-tree中的数据来源，数据结构要和element里面的保持一致，select里面的两个方法分别表示清空和多选的时候删除tag的，tree里面的方法指的是点击node节点，这样就可以完成基本的selectTree了

在props中定义data

props: {
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
    },

在mounted里面判断一下是多选还是单选的，因为多选的时候绑定的是数据

mounted() {
  this.value = this.$attrs.multiple ? [] : ''
},

最后在定义一下操作的方法就可以

    hiddenPopper(){
        this.$refs.select.blur()
      },

      handleNodeClick(data){
        if(this.$attrs.multiple){
          if(this.value.indexOf(data.label) > -1) return false
          this.value.push(data.label)
          this.valueIds.push(data.id)
        } else {
          this.value = data.label
          this.valueIds = data.id
        }
        this.$emit('getValueIds', this.valueIds)
        this.hiddenPopper()
      },

      handleSelectClear(){
        this.$emit('input', '')
      },

      handleRemoveTag(value){
        let fileterValue = this.value.filter(item => item !== value)
        this.$emit('input', fileterValue)
      }
    }

如果感觉有用就start一下吧 😄😄 github地址

使用中有什么问题，或者不足之处可以随时联系我！！