element-ui 远程搜索组件el-select在项目中组件化的实现代码

在项目中发现使用el-select时写的比较多重复代码，还有就是同一个页面使用el-select会出现label值会显示value值，
el-select组件化：

<template> <el-select  :class="obj&&keyword[keywordAttr.label]? 'selected': ''"  :value="keyword"  :placeholder="obj && keyword[keywordAttr.label]? keyword[keywordAttr.label]: placeholder"  filterable  :clearable="clear"  remote  :multiple="multiple"  :loading="selectLoading"  :reserve-keyword="reserve"  :remote-method="remoteMethod"  :  :disabled="disabled"  :value-key="keywordAttr.id"  @change="changeSelect"  @clear="handleClear"  @blur="handleBlur"  @focus="handleFocus"  @visible-change="handlerVisible" >  <el-option   v-for="item in keywordOptions"   :key="item[keywordAttr.id]"   :label="item[keywordAttr.label]"   :value="obj? item: item[keywordAttr.value]"   :disabled="item.disabled"  >   <slot :item="item"/>  </el-option> </el-select></template><script>export default { name: 'SelectRemote', props: {  value: {   type: [String, Object],   default: ''  },  reserve: {   type: Boolean,   default: true  },  clear: {   type: Boolean,   default: false  },  disabled: {   type: Boolean,   default: false  },  multiple: {   type: Boolean,   default: false  },  selectLoading: {   type: Boolean,   default: false  },  width: {   type: String,   default: '100%'  },  keywordOptions: {   type: Array,   default: function() {    return []   }  },  keywordAttr: {   type: Object,   required: true,   default: function() {    return {     id: '',     label: '',     value: ''    }   }  },  obj: {   type: Boolean,   default: false  },  placeholder: {   type: String,   default: function() { return '请输入关键词' }  } }, data() {  return {   keyword: this.value  } }, watch: {  value(newVal) {   this.keyword = newVal  } }, methods: {  remoteMethod(query) {   this.$emit('remoteMethod', query)  },  changeSelect(item) {   this.$emit('changeSelect', item)  },  handleClear() {   this.$emit('clear')  },  handleBlur() {   this.$emit('blur')  },  handleFocus() {   this.$emit('focus')  },  handlerVisible() {   this.$emit('visible-change')  } }}</script><style lang="scss" scoped>.selected ::-webkit-input-placeholder{ color: #606266 !important;}</style>

主要是使用了placeholder来显示；

在父组件中:

<SeletcRemote       v-model="nodeOperate.saleEmp"       :keyword-attr="nodeObjPerson"       :keyword-options="empOptions"       :clear="true"       :obj="true"       :select-loading="selectLoading"       @remoteMethod="remoteMethod"       @changeSelect="handleProductChange($event, nodeOperate, 'saleEmp')"      />

nodeObjPerson: {  id: 'id',  label: 'empName'  }

handleProductChange(val, row, field) {   this.$set(row, field, val)  }

可以在单选的的状态下完美解决了label显示值；