Avue设置下拉框默认值
时间: 2023-08-21 08:05:11 浏览: 150
在Avue中设置下拉框的默认值和在普通的HTML中设置默认值是一样的,可以通过v-model指令来绑定选中的值,再在data数据中设置默认值即可。
具体实现方法如下:
```html
<template>
<div>
<avue-form
:form-data="formData"
:config="config"
@submit="handleSubmit"
/>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
selectValue: 'option2' // 设置默认选中值为选项二
},
config: {
formList: [
{
label: '下拉框',
prop: 'selectValue',
type: 'select',
options: [
{
label: '选项一',
value: 'option1'
},
{
label: '选项二',
value: 'option2'
},
{
label: '选项三',
value: 'option3'
}
]
}
]
}
}
},
methods: {
handleSubmit(formData) {
console.log(formData)
}
}
}
</script>
```
在上面的代码中,我们在formData数据中设置了selectValue的默认值为'option2',然后在config配置中设置了一个下拉框,选项值为options数组中的值,选中值通过v-model指令绑定到formData的selectValue属性上,这样就实现了下拉框的默认选中效果。
阅读全文