Requirements describe

1. Dynamic display of switch status and text description according to background transmission value (0 is text, 1 is icon)

Implementation method

The default Swich type is Boolean, and the background value is number. In this case, we need to use number instead of Boolean.

 <template slot-scope="scope">
	<el-switch v-model="state"
        on-value="1"
        off-value="0"
        on-text="Text"
        off-text="Icon"
        off-color="#20a0ff"
        @change="changeStatus($event,scope.row)">
	</el-switch>
</template>
Copy the code

Note that the value of on-value and off-value are strings 1 and 2, respectively. If you assign a numeric value to 1 or 2, this will not work. If you assign a numeric value to 1 or 2, you will write:

 <template slot-scope="scope">
	<el-switch v-model="state"
        :on-value="1"
        :off-value="0"
        on-text="Text"
        off-text="Icon"
        off-color="#20a0ff"
        @change="changeStatus($event,scope.row)">
	</el-switch>
</template>
Copy the code

At the same time, @change can pass the value $event, which is the current message value of the switch, or directly obtain the binding model value state, scope.row as the parameter, and add index to represent the serial number of the current list.

el-radioFront-end display according to background return value

The binding value in el-radio is the number data type. If the data type of the background returned value is String, the number () data type conversion operation needs to be performed.

<el-form-item label="Is it a group subsidiary?" prop="isGroupcompany">
  <el-radio-group v-model="form.isGroupcompany">
    <el-radio :label="1">is</el-radio>
    <el-radio :label="2">no</el-radio>
  </el-radio-group>
</el-form-item>
Copy the code

Note: when changing the state, we should pay attention to the returned state and choose the corresponding writing method according to the state.