单选框（form-radio）

在一组备选项中进行单选

基础用法

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

要使用 Radio 组件，只需要设置 v-model 绑定变量，options为选项数据。

<template>
  <itv-form>
    <itv-form-radio label="性别" :options="options" v-model="form.sex" prop="sex"></itv-form-radio>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          { label: "男", value: "1" },
          { label: "女", value: "2" }
        ],
        form: {
          sex: "1"
        }
      };
    }
  }
</script>

Expand Copy Copy

禁用状态

单选框不可用的状态。

部分禁用 全部禁用

只要在 el-radio 元素中设置 disabled 属性即可，它接受一个 Boolean ， true 为禁用。

<template>
  部分禁用
  <itv-form>
    <itv-form-radio label="性别" :options="options" v-model="form.sex" prop="sex"></itv-form-radio>
  </itv-form>
  全部禁用
  <itv-form>
    <itv-form-radio label="性别" :options="options" v-model="form.sex" prop="sex" disabled></itv-form-radio>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          { label: "男", value: "1" },
          { label: "女", value: "2" },
          { label: "禁用", value: "3", disabled: true }
        ],
        form: {
          sex: "1"
        }
      };
    }
  }
</script>

Expand Copy Copy

自定义用法

自定义样式显示文本信息。

<template>
  <itv-form>
    <itv-form-radio label="性别" :options="options" v-model="form.sex" prop="sex">
      <template v-slot="{data}">{{data}}</template>
    </itv-form-radio>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          { label: "男", value: "1" },
          { label: "女", value: "2" }
        ],
        form: {
          sex: "1"
        }
      };
    }
  }
</script>

Expand Copy Copy

带有边框

设置 border 属性可以渲染为带有边框的单选框。

<template>
  <itv-form>
    <itv-form-radio label="性别" fill="#000000" :options="options" v-model="form.sex" prop="sex" border></itv-form-radio>
  </itv-form>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          { label: "男", value: "1" },
          { label: "女", value: "2" },
          { label: "禁用", value: "3", disabled: true }
        ],
        form: {
          sex: "1"
        }
      };
    }
  }
</script>

Expand Copy Copy

Attributes

TIP

默认继承FormItem基础属性FormItem组件。

参数	说明	类型	可选值	默认值
options	Array	[]	选项数据
value / v-model	绑定值	string / number / boolean	—	—
size	单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false

Events

事件名称	说明	回调参数
input	绑定值变化时触发的事件	选中的 Radio label 值

Props

属性名	类型	默认值	说明
value	String	id	主键（唯一值）
label	String	label	文本
disabled	String	disabled	禁用