Vue进阶（幺肆贰）：element ui中el-switch、el-radio使用注意事项

需求描述

1、根据后台传值动态显示开关状态及文字说明（0为文字，1为图标）

实施方法

Swich默认是boolean类型，而后台传值为number类型，这个时候我们需要用number来取代boolean类型；

 <template slot-scope="scope">
	<el-switch v-model="state" on-value="1" off-value="0" on-text="文字" off-text="图标" off-color="#20a0ff" @change="changeStatus($event,scope.row)">
	</el-switch>
</template>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

请注意上面的写法，on-value和off-value的值分别是字符串的1和2，如果你赋值为数字类型的 1 或 2是无法正常工作的，若赋值为数值类型，需这样写：

 <template slot-scope="scope">
	<el-switch v-model="state" :on-value="1" :off-value="0" on-text="文字" off-text="图标" off-color="#20a0ff" @change="changeStatus($event,scope.row)">
	</el-switch>
</template>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

我们使用绑定的方式，同时@change可以传值$event就是switch的当条信息值，或者直接获取绑定的model值state，scope.row为参数，还可以再添加index表示当前列表的序号。

el-radio根据后台返回值前端展示

el-radio中的绑定值为number数据类型，若后台返回值数据类型为String,则需要做Number()数据类型转换操作。

<el-form-item label="是否为集团子公司" prop="isGroupcompany">
  <el-radio-group v-model="form.isGroupcompany"> <el-radio :label="1">是</el-radio> <el-radio :label="2">否</el-radio>
  </el-radio-group>
</el-form-item>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

注：改变状态时要注意返回的状态根据状态来选择相应的写法。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/109691805