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

在项目中发现使用el-select时写的比较多重复代码，还有就是同一个页面使用el-select会出现lab

在项目中发现使用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"
 :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>

主要是使用了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显示值；

在多选状态下如何显示？

multipletrue时，暂时无法解决；只是使用了另一个组件：vue-multiselect

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。