scSelect 支持异步回显
This commit is contained in:
parent
4d5764cbb8
commit
66dc337d02
|
@ -8,11 +8,16 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-select v-bind="$attrs" :loading="loading" @visible-change="visibleChange">
|
<div class="sc-select">
|
||||||
<el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]">
|
<div v-if="initloading" class="sc-select-loading">
|
||||||
<slot name="option" :data="item"></slot>
|
<i class="el-icon-loading"></i>
|
||||||
</el-option>
|
</div>
|
||||||
</el-select>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -30,6 +35,14 @@
|
||||||
loading: false,
|
loading: false,
|
||||||
options: [],
|
options: [],
|
||||||
props: config.props,
|
props: config.props,
|
||||||
|
initloading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
//如果有默认值就去请求接口获取options
|
||||||
|
if(this.$attrs.modelValue && this.$attrs.modelValue.length > 0){
|
||||||
|
this.initloading = true
|
||||||
|
this.getRemoteData()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -52,10 +65,14 @@
|
||||||
var response = config.parseData(res)
|
var response = config.parseData(res)
|
||||||
this.options = response.data
|
this.options = response.data
|
||||||
this.loading = false
|
this.loading = false
|
||||||
|
this.initloading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
</style>
|
||||||
|
|
|
@ -46,8 +46,8 @@
|
||||||
name: 'scselect',
|
name: 'scselect',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: '',
|
value: '3',
|
||||||
value2: [],
|
value2: ['1', '3'],
|
||||||
value3: '',
|
value3: '',
|
||||||
value4: ''
|
value4: ''
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue