125 lines
2.5 KiB
Vue
125 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>
|