scSelect 支持异步回显
This commit is contained in:
parent
4d5764cbb8
commit
66dc337d02
|
@ -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>
|
||||
|
|
|
@ -46,8 +46,8 @@
|
|||
name: 'scselect',
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value2: [],
|
||||
value: '3',
|
||||
value2: ['1', '3'],
|
||||
value3: '',
|
||||
value4: ''
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue