79 lines
2.5 KiB
Vue
79 lines
2.5 KiB
Vue
<template>
|
|
<div class="sc-select">
|
|
<div v-if="initloading" class="sc-select-loading">
|
|
<el-icon class="is-loading"><el-icon-loading /></el-icon>
|
|
</div>
|
|
<el-select v-bind="$attrs" :loading="loading" @visible-change="visibleChange" :value-on-clear="null">
|
|
<el-option v-for="item in options" :key="item[id]" :label="item[name]" :value="objValueType ? item : item[id]">
|
|
<slot name="option" :data="item"></slot>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
apiObj: { type: Object, default: () => {} },
|
|
objValueType: { type: Boolean, default: false },
|
|
params: { type: Object, default: () => ({}) },
|
|
id: {type: String, default: 'id'},
|
|
name: {type: String, default: 'name'},
|
|
showName: {type: String, default: null},
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
options: [],
|
|
initloading: false
|
|
}
|
|
},
|
|
created() {
|
|
//如果有默认值就去请求接口获取options
|
|
if(this.hasValue()){
|
|
this.initloading = true
|
|
this.getRemoteData()
|
|
}
|
|
},
|
|
methods: {
|
|
//选项显示隐藏事件
|
|
visibleChange(ispoen){
|
|
if(ispoen && this.options.length==0 && this.apiObj){
|
|
this.getRemoteData()
|
|
}
|
|
},
|
|
//获取数据
|
|
async getRemoteData(){
|
|
this.loading = true
|
|
var query = Object.assign({page:0}, this.params)
|
|
var res = await this.apiObj.req(query)
|
|
this.loading = false
|
|
this.initloading = false
|
|
if (this.$attrs.modelValue !== null && !res.some(option => option[this.id] === this.$attrs.modelValue)) {
|
|
this.options = [{ [this.id]: this.$attrs.modelValue, [this.name]: this.showName }, ...res];
|
|
}else{
|
|
this.options = res
|
|
}
|
|
},
|
|
//判断是否有回显默认值
|
|
hasValue(){
|
|
if(Array.isArray(this.$attrs.modelValue) && this.$attrs.modelValue.length <= 0){
|
|
return false
|
|
}else if(this.$attrs.modelValue){
|
|
return true
|
|
}else{
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sc-select {display: inline-block;position: relative;min-width: 120px;}
|
|
.sc-select-loading {position: absolute;top:0;left:0;right:0;bottom:0;background: #fff;z-index: 100;border-radius: 5px;border: 1px solid #EBEEF5;display: flex;align-items: center;padding-left:10px;}
|
|
.sc-select-loading i {font-size: 14px;}
|
|
|
|
.dark .sc-select-loading {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
|
|
</style>
|