xiaoshi_system/src/utils/model/selectButton/index.vue

<template>
  <div class="selectButton">
    <div class="selectButton-div">
      <slot>
        <el-select v-model="selectValue" :placeholder="placeholder" :size="size"
          :clearable="clearable" :disabled="disabled" :multiple="multiple" :filterable="filterable" @change="change">
          <el-option v-for="(item,index) in optionArr" :key="'myButton'+ index" :label="item[prop.label]" :value="item[prop.value]">
          </el-option>
        </el-select>
      </slot>
      
      <el-button  @click="handleClick" type="primary" :disabled="disabled" :size="size" class="selectButton-button">
        <slot name="button">
         <i class="el-icon-search"></i> 
        </slot>
        
      </el-button>
    </div>
   
  </div>
</template>

<script>
export default {
  props: {
    // 数据源（选择）
    optionArr: {
      type: Array,
      default: ()=>[],
    },
    prop: {
      default: () => {
        return {
          label: 'label',
          value:'value'
        }
      }
      
    },
    //v-model传过来的值(双向绑定的值)
    value: {
      default:''
    },
    // 尺寸
    size: {
      type: String,
      default: 'small'
    },
    // 提示内容
    placeholder: {
      type: String,
      default: ''
    },
    // 单选清空或不清空
    clearable: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否可搜索
    filterable: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      selectValue: this.value
    }
  },
  watch: {
  },
  mounted() {
    this.init()
  },
  methods: {
    //初始化
    init() {
      // if (this.multiple) {
      //   if (typeof this.value == 'object') {
          
      //   } else {
      //     this.selectValue = []
      //     this.selectValue.push(this.value)
      //     console.log('不是Array');
      //   }
      // } else {
      //   if (typeof this.value == 'string') {
          
      //   } else {
      //     this.selectValue = ''
      //     this.selectValue = this.value
      //     console.log('不是String');
      //   }
      // }
    },
    //切换下拉框的值
    change(val) {
      this.$emit('input', val)
    },
    // 按钮点击事件
    handleClick(e) {
      this.$emit('click', e)
    },
  },
}
</script>

<style lang="scss">
.selectButton {

  .el-select {
    display: inline-block;
    position: relative;
    width: 100%;
  }
  .el-input__inner {
    color: #606266 !important;
    border-radius: 5px 0px 0px 5px;
  }
}
</style>
<style lang="scss" scoped>
.selectButton {
  .selectButton-div {
    width: calc(100%);
    display: flex;
    align-items: center;
  }

  .selectButton-button {
    border-radius: 0px 5px 5px 0px;
  }
}
</style>