Radio单选框

基础用法

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

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  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 setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '多选框',
      prop: 'radio',
      type: 'radio',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: 'https://api.avuejs.com/area/getProvince'
    }
  ]
})
</script>

默认值

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  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 setup>
import { ref } from 'vue'

const option = ref({
  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 setup>
import { ref } from 'vue'

const option = ref({
  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 setup>
import { ref } from 'vue'

const form = ref({
  radio: [0, 1]
})

const option = ref({
  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 setup>
import { ref } from 'vue'

const option = ref({
  column: [
    {
      label: '空心单选',
      prop: 'radio',
      type: 'radio',
      border: true,
      dicData: [
        { label: '男', value: 0 },
        { label: '女', value: 1 },
        { label: '未知', value: '' }
      ]
    }
  ]
})
</script>