Radio单选框

基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

通过将type属性的值指定为radio,同时配置dicData为字典值

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

显示代码复制代码复制代码

网络字典

更多用法参考表单数据字典

配置dicUrl指定后台接口的地址

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '多选框',
          prop: 'radio',
          type: 'radio',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

默认值

value属性可以提供一个初始化的默认值

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

显示代码复制代码复制代码

禁用状态

通过disabled属性指定是否禁用

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

显示代码复制代码复制代码

禁用选项

返回的字典中数据配置disabled属性指定是否禁用

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

显示代码复制代码复制代码

按钮样式

配置button为true

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

显示代码复制代码复制代码

空心样式

配置border为true

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

显示代码复制代码复制代码