Ant Design Vue笔记——Form表单

最新推荐文章于 2024-06-10 01:58:08 发布

黄乐可

最新推荐文章于 2024-06-10 01:58:08 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/HG_Ziq/article/details/125099885

版权

1.a-select设置默认值

这里的下拉选项列表是通过接口动态获取的，this.dropdown是获取的返回值

在a-select-option中加入:value="r.value"

 
<template>
    <a-form :form="form">
        <a-form-item label="保管期限(年)">
            <a-select
               style="width: 100%"
               v-decorator="['retentionperiod',{ rules: [{ required: true, message: '请选择保管期限' }] },]"
               placeholder="请选择保管期限">
               <a-select-option v-for="r in this.dropdown" :value="r.value" :key="r.text">
                  {{ r.text }}
               </a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="利用建议">
            <a-radio-group v-decorator="['transferProposal',{ rules: [{ required: true, message: '请选择移交利用建议' }] },]">
               <a-radio value="1">
                 开放
               </a-radio>
               <a-radio value="2">
                 控制
               </a-radio>
               <a-radio value="3">
                 待定
               </a-radio>
            </a-radio-group>
         </a-form-item>
    </a-form>
</template>

在methods中添加一个方法defaultOptions来设置默认中选中值

methods:{
    // 设置表单默认选项
    defaultOptions(){
      this.form.getFieldDecorator('retentionperiod',{initialValue:'1'},)    //默认选中value值为1的选项
      this.form.getFieldDecorator('transferProposal',{initialValue:'1'})
    }
}