场景:后台返回最近医保年 5个年份的数据 [2019,2018,2017,2016,2015],将数据以props形式传入 searchForm组件 并以select形式作为搜索条件展示,默认选中最近一年
情况一:已知select options数组 如下设置:
export default {
data() {
return {
options: [{
value: \'选项1\',
label: \'黄金糕\'
}, {
value: \'选项2\',
label: \'双皮奶\'
}, {
value: \'选项3\',
label: \'蚵仔煎\'
}, {
value: \'选项4\',
label: \'龙须面\'
}, {
value: \'选项5\',
label: \'北京烤鸭\'
}],
value: \'选项1\'
}
}
}
情况二:回到开始的场景
处理数据
=>将[2019,2018,2017,2016,2015] 转为符合 options的数据格式
=>[{label:2019,value:2019},{label:2018,value:2018},{label:2017,value:2017},{label:2016,value:2016},{label:2015,value:2015}],
=>子组件接收 options ,并设置v-model="value" 的value = this.options[0].value;
父组件
<template>
<div class="hello">
<item :options="resArr"></item>
</div>
</template>
<script>
import item from \'./a\';
export default {
name: \'HelloWorld\',
components:{
item
},
data () {
return {
optionArr:[2019,2018,2017,2016,2015],
resArr:[]
}
},
created() {
this.init();
},
methods: {
init(){
for(var val of this.optionArr){
this.resArr.push({label:val,value:val})
}
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
子组件
<template>
<div>
<el-select v-model="value" style="width:240px;" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name:\'item\',
props:{
options:{
type:Array,
default:()=>{
return [];
}
}
},
data() {
return {
value:\'\'
}
},
created() {
this.value = this.options[0].value;
},
}
</script>
<style scoped>
</style>