# 单选

TIP

2.1.0+

# 普通用法

<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
    data() {
      return {
        form: {
          radio:0
        },
        option: {
          column: [{
              label: '单选',
              prop: 'radio',
              type: 'radio',
              span:24,
              dicData:[{
                label:'男',
                value:0
              },{
                label:'女',
                value:1
              },{
                label:'未知',
                value:''
              }]
            }
          ]
        }
      }
    }
}
</script>

Expand Copy

# 按钮样式

配置buttontrue

<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
    data() {
      return {
        form: {
          radio:0
        },
        option: {
          column: [{
              label: '实心单选',
              prop: 'radio',
              type: 'radio',
              span:24,
              button:true,
              dicData:[{
                label:'男',
                value:0
              },{
                label:'女',
                value:1
              },{
                label:'未知',
                value:''
              }]
            }
          ]
        }
      }
    }
}
</script>

Expand Copy

# 空心样式

配置bordertrue

<avue-form :option="option" v-model="form"></avue-form>
<script>
export default {
    data() {
      return {
        form: {
          radio:0
        },
        option: {
          column: [{
              label: '空心单选',
              prop: 'radio',
              span:24,
              type: 'radio',
              border:true,
              dicData:[{
                label:'男',
                value:0
              },{
                label:'女',
                value:1
              },{
                label:'未知',
                value:''
              }]
            }
          ]
        }
      }
    }
}
</script>

Expand Copy
Last Updated: 8/5/2021, 9:04:57 AM