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

使用中有什麼問題，或者不足之處能夠隨時聯繫我！！