Ant Design Vue Radio单选框用法

Ant Design Vue Radio单选框用法，应用场景多个选项只能选中其中一个，使用选项都默认可见，使用选项不宜过多。Ant Design提供了传统的Radio样式外也提供了按钮组风格的样式。

Radio标签

<a-radio>Radio</a-radio>

单选组合

基础用法提供value属性设置默认选中项

<template>
  <div>
    <a-radio-group v-model="value" @change="onChange">
      <a-radio value="a">
        选项 A
      </a-radio>
      <a-radio value="b">
        选项 B
      </a-radio>
      <a-radio value="c">
        选项 C
      </a-radio>
      <a-radio value="d">
        选项 D
      </a-radio>
    </a-radio-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 'c',
    };
  },
  methods: {
    onChange(e) {
      alert('你选中的是：'+ e.target.value);
    },
  },
};
</script>

根据数据生成Radio组,并设置默认值和禁止选中的项

<template>
  <div>
    <a-radio-group v-model="defValue" @change="onChange">
      <a-radio :value="item.value"
       :checked="item.checked" 
       :disabled="item.disabled" 
        v-for="item in options"
       :key="item.value">
        {{item.name}}
      </a-radio> 
    </a-radio-group>
  </div>
</template>
<script>
//定义选项数组
  var options=[
    {checked:false,disabled:false,value:'A',name:'选项A'},
    {checked:true,disabled:false,value:'B',name:'选项B'},
    {checked:false,disabled:true,value:'C',name:'选项C'}, //禁止选中
    {checked:false,disabled:false,value:'D',name:'选项D'},
  ];

export default {
  data() {
    return { 
      options
    };
  },
  methods: {
    //选中事件
    onChange(e) {
      alert('你选择了'+e.target.value);
    },
  },
  computed:{
       //计算属性
        defValue:function(){
           var val= options.filter(function(m){
             return  m.checked===true;
           }); 
            return val[0].value;
        },
  },
  mounted(){
    //动态设置选中项
    var that=this;
    setTimeout(function(){
      that.options.forEach(m=>{
        m.checked=false;
      });
       that.options[that.options.length-1].checked=true;
    },3000)
  }
};
</script>

例子

RadioGroup 垂直显示

<template>
  <div>
    <a-radio-group v-model="value" @change="onChange">
      <a-radio :style="radioStyle" value="a">
        选项 A
      </a-radio>
      <a-radio :style="radioStyle" value="b">
        选项 B
      </a-radio>
      <a-radio  :style="radioStyle" value="c">
        选项 C
      </a-radio>
      <a-radio :style="radioStyle" value="d">
        选项 D
      </a-radio>
    </a-radio-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 'c',
        radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
    };
  },
  methods: {
    onChange(e) {
      alert('你选中的是：'+ e.target.value);
    },
  },
};
</script>