scSelect 支持异步回显

This commit is contained in:
sc 2021-08-05 10:56:04 +08:00
parent 4d5764cbb8
commit 66dc337d02
2 changed files with 25 additions and 8 deletions

View File

@ -8,11 +8,16 @@
-->
<template>
<el-select v-bind="$attrs" :loading="loading" @visible-change="visibleChange">
<el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]">
<slot name="option" :data="item"></slot>
</el-option>
</el-select>
<div class="sc-select">
<div v-if="initloading" class="sc-select-loading">
<i class="el-icon-loading"></i>
</div>
<el-select v-bind="$attrs" :loading="loading" @visible-change="visibleChange">
<el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]">
<slot name="option" :data="item"></slot>
</el-option>
</el-select>
</div>
</template>
<script>
@ -30,6 +35,14 @@
loading: false,
options: [],
props: config.props,
initloading: false
}
},
created() {
//options
if(this.$attrs.modelValue && this.$attrs.modelValue.length > 0){
this.initloading = true
this.getRemoteData()
}
},
methods: {
@ -52,10 +65,14 @@
var response = config.parseData(res)
this.options = response.data
this.loading = false
this.initloading = false
}
}
}
</script>
<style>
<style scoped>
.sc-select {display: inline-block;position: relative;}
.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;}
</style>

View File

@ -46,8 +46,8 @@
name: 'scselect',
data() {
return {
value: '',
value2: [],
value: '3',
value2: ['1', '3'],
value3: '',
value4: ''
}