element-ui 远程搜索组件el-select在项目中组件化的实
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
在项目中发现使用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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。