溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在項目中發現使用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顯示值；
在多選狀態下如何顯示？
multipletrue時，暫時無法解決；只是使用了另一個組件：vue-multiselect
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
