(文章目录)
一、需求描述
根据后台传值动态显示开关状态及文字说明(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>
请注意上面的写法,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>
我们使用绑定的方式,同时@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>
注:改变状态时要注意返回的状态根据状态来选择相应的写法。
四、拓展阅读
- 《Vue进阶(幺叁柒):动态表单校验》
- 《Vue进阶(三十):element-ui 表单验证》
- 《Vue进阶(幺贰幺):ElementUI 表单校验注意事项》