element的下拉进行二次封装，拿到他的label和value

前言：
       对element的下拉进行二次封装，在element的下拉中，他是支持很多功能的，比如新增下拉不存在的内容，但是他返回的值只有一个value，我们想拿到他的值是对象的话得进行二次处理，
       
      封装组件：eleSelect.vue、

<template>
  <el-select
    filterable
    :multiple="multiple"
    :placeholder='placeholder'
    popper-class="ycClass"
    v-model="nowValue"
    @change="change"
    @cisible-change='sel_display'
    :allow-create="allowCreate"
    :disabled="disabled">
    <el-option v-for="item in options" :key='item.value' :label="item.label" :value="item.value"
               @mouseover='mouseoverFun' @mouseleave="mouseleaveFun">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    props: {
      placeholder: String,
      options: Array,
      ycClass: String,
      value: String | Array,
      multiple: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      allowCreate: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        nowValue: '',
      }
    },
    watch: {
      value(val, oldVal) {
        if (val != oldVal) {
          this.nowValue = val;
        }
      }
    },
    mounted() {
      this.nowValue = this.value;
    },
    methods: {
      change(val) {
        if (this.allowCreate) {
          let arr = this.options.filter(v => v.value == val);
          if (arr.length == 0) {
            let item = {
              value: val,
              label: val,
              allowCreate: true
            }
            this.$emit('selChange', item);
          } else {
            this.$emit('selChange', arr[0]);
          }
        } else {
          if (!this.multiple) {
            this.options.forEach((item) => {
              if (item.value == val) {
                this.$emit('selChange', item);
              }
            })
          } else {
            let arr1 = [];
            val.forEach(item => {
              arr1 = arr1.concat(this.options.filter(m => m.value == item))
            })
            this.$emit('selChange', arr1);
          }
        }


      },
      sel_display: function () {

      },
      mouseoverFun() {
      },
      mouseleaveFun() {

      },
    },
  }
</script>

       

调用方法：

一、不需要创建新的，只是使用普通的下拉，value是给他初始化赋值，options是下拉数组，selChange是他返回的数据，返回一个对象

1、template里面

<eleSelect :placeholder='commonPlaceholder' :value='abc' :class="'zyClass'" :options='org_cert_list'
                           @selChange='changeType($event,"我是第二个参数")' ref="text_jz"></eleSelect>

2、data里面定义：

 data() {
      return {
        abc:''

    }
}

3、methods里面定义方法：

 changeType(obj,more) {
    this.abc = obj.value;
    alert(more)
}

二、多选下拉

1、template

<eleSelect :placeholder='commonPlaceholder' :value='abc' :class="'zyClass'"
                         :options='work_list' :multiple="true" :disabled="!isEdit"
                         @selChange='changeSel($event,"work_type")' ref="text_jz"></eleSelect>

2、data里面定义：

 data() {
      return {
        abc:''

    }
}

3、methods里面定义方法：

拿到的选中的数组，给abc赋值

三:需要创造新的

1、template:

<eleSelect :allowCreate="true" :placeholder='"请选择机具类型"' :value="addForm.types" :class="'zyClass'" :options='tool_type_options'
                     @selChange="toolTypeChange" ref="text_jz" :disabled="!isEdit"></eleSelect>

2、data里面定义：

 data() {
      return {
        abc:''

    }
}

3、methods里面定义方法：

 toolTypeChange(params, selFirst) {
        if(params.allowCreate){//如果是创建的则给数组内添加新的
          this.tool_type_options.push({
            value:params.value,
            label:params.label,
          })
        }
        this.addForm.types = params.value;//将拿到的下拉值赋值
}