antdesign vue中对radio-button多个字段进行属性合并

---

• 情景：
  需要在radio-group中绑定不同属性的值，展示另外一个属性的内容。如此group绑定的值为

admin_state:true/false

（该字段只有两个属性，true或者false）。但是此时我要加上并展示另外一个具有关联信息的字段

force_on:trur/false

• 最终要达到此种效果：
  
  同时在选择内容的时候，对应的value可以发生关联改变。
• 思路：
  1. 利用v-for，加入一个新的对象， { label: 'Force_on', value: 'force_on' },
  2. 分析admin_state与force_on字段之间的约束关系
  3. 当在选项中选择Force_on标签的时候，此时admin_state的value为“force_on”
  4. 此时就要映射force_on字段的值为true，然后将admin_state设为false

---

一、Template

   <a-form-item :label="t('app.poe.admin_state')" name="pddet_mode" required>
       <a-radio-group v-model:value="info.admin_state" button-style="solid">
          <a-radio-button v-for="(o, index) in [...MergeStateOpts]" :key="index" 				
         	:value="o.value">  {
    
    {
    
     o.label }}
          </a-radio-button>
       </a-radio-group>
   </a-form-item>

二、JS

1.标签

 const MergeStateOpts = [
  {
    
     label: 'Disable', value: false },
  {
    
     label: 'Enable', value:   true  },
  {
    
     label: 'Force_on', value: 'force_on' },
];

2.逻辑

// 父组件传来的值（函数1）
  	if (data.info.force_on == true) 
  		data.info.admin_state = 'force_on' //才可以使得radio对应上value值
// confirm校验时的值（函数2）
      let data = JSON.parse(JSON.stringify(info.value));
    	if (data.admin_state === 'force_on') {
    
    
    	//此时代表我们将force_on的值设为了true
      		data.force_on = true;
      	//因为两者不能共存
      		data.admin_state = false;
    	} else {
    
    
    	//因为两者不能共存
      		data.force_on = false;
    	}

三、效果