当前位置:   article > 正文

Ant Design Vue笔记——Form表单_vue form嵌套select给默认值

vue form嵌套select给默认值

1.a-select设置默认值

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

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

  1. <template>
  2. <a-form :form="form">
  3. <a-form-item label="保管期限(年)">
  4. <a-select
  5. style="width: 100%"
  6. v-decorator="['retentionperiod',{ rules: [{ required: true, message: '请选择保管期限' }] },]"
  7. placeholder="请选择保管期限">
  8. <a-select-option v-for="r in this.dropdown" :value="r.value" :key="r.text">
  9. {{ r.text }}
  10. </a-select-option>
  11. </a-select>
  12. </a-form-item>
  13. <a-form-item label="利用建议">
  14. <a-radio-group v-decorator="['transferProposal',{ rules: [{ required: true, message: '请选择移交利用建议' }] },]">
  15. <a-radio value="1">
  16. 开放
  17. </a-radio>
  18. <a-radio value="2">
  19. 控制
  20. </a-radio>
  21. <a-radio value="3">
  22. 待定
  23. </a-radio>
  24. </a-radio-group>
  25. </a-form-item>
  26. </a-form>
  27. </template>

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/115534
推荐阅读