element-ui 远程搜索组件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"
  :style="{width: width}"
  :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>

<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)
  }