In antdesign vue, combine attributes of multiple fields of radio-button


  • Scenario:
    It is necessary to bind the values ​​of different attributes in the radio-group to display the content of another attribute. The value bound to this group is

admin_state:true/false

(This field has only two attributes, true or false). But at this point I want to add and display another field with associated information

force_on:true/false

  • Ultimately, this effect should be achieved:
    insert image description here
    at the same time, when selecting content, the corresponding value can be associated with changes.
  • Ideas:
    1. Use v-for to add a new object,{ label: 'Force_on', value: 'force_on' },
    2. Analyze the constraint relationship between admin_state and force_on fields
    3. When the Force_on label is selected in the options, the value of admin_state at this time is“force_on”
    4. At this point, it is necessary to map the value of the force_on field to true, and then set admin_state to false

1. 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>

Two, JS

1. Label

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

2. Logic

// 父组件传来的值(函数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;
    	}

3. Effect

insert image description here

おすすめ

転載: blog.csdn.net/CherishTaoTao/article/details/128002470