关于el-select的二次封装

需求：项目中存在大量查询选择器，需要统一修改为select模式，为了实现组件复用，进行了select选择器的二次封装，由于每个渲染select选择器的数组中的label和value名称都不同，所以需要把数据名称一起传给子组件进行渲染。

因为刚开始没有想到传字段名到子组件，所以采用了处理子组件接收到的showList的值，处理之后再渲染，这样就降低了组件的可复用性，并写了大量的冗余代码，非常的不方便。

showList的值是父组件请求数据之后获取到的，所以渲染组件前showList为空，因此子组件默认值为value，并不是想要的“全部”默认值，在父组件data定义showList时加入初始值就搞定了。

简单的二次封装搞了这么久，代码能力着实需要加强...

//子组件  selfSelect
<template>
   <div style="display:inline">
      <el-select v-model="selectedOptions "
            v-if="showList"
          class="my-el-select">
          <el-option
            v-for="(item, index) in showList"
            :key="index"
            :label="item[valueName]"
            :value="item[labelName]">
          </el-option>
        </el-select>
</div>
</template>
<script>
export default {
    props:{
        value:{
            type:String
        },
        showList:{
            type:Object
        },
//相同名称的label和value不需传参给子组件，采用默认值
        valueName:{
            type:String,
            default:'label'
        }, 
        labelName:{
            type:String,
            default: 'value'
        } 
    },
    data(){
        return {
//data重新定义变量接受组件v-model（value：名称必须为value）值，不改变props接收的值
            selectedOptions :this.value
        }
    },
//监听值的变化
    watch:{
        value(newVal){
            this.selectedOptions =newVal
        },
//若选择器的值发生改变，则传参给父组件
//this.$emit(‘input’,val)，在父组件直接用v-model绑定，则可以直接获取到
        selectedOptions (newVal,oldVal){
            this.$emit("input",this.selectedOptions )
        },
    } 
}
</script>


<style lang="less" scoped>
//选择框自定义样式
 /deep/ .my-el-select {
    margin-left: 10px;
    width: 120px;
    /* selecte 框的高度设置，默认是 40px*/
    .el-input__inner{
        height: 30px !important;
    }
    /* 下面设置右侧按钮居中 */
    .el-input__suffix {
        top: 5px;
    }
    .el-input__icon {
        line-height: inherit;
    }
    .el-input__suffix-inner {
        display: inline-block;
    }
    .el-icon-arrow-up {
      line-height: 0px !important;
    }
  } 
</style>
//父组件引用
 <SelfSelect v-model="showRoadCode" :showList="roadlist" valueName='roadName' labelName='roadCode'> </SelfSelect> 

参考链接：(39条消息) Vue2.x 二次封装双向绑定Selector_未末之初的博客-CSDN博客_vue二次封装select组件