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

No Silver Bullet

关注

发布于: 刚刚

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

一、需求描述

根据后台传值动态显示开关状态及文字说明（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>

复制代码

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

四、拓展阅读

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/abcee2753e50256f80e62187c】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

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

一、需求描述

二、实施方法

三、el-radio 根据后台返回值进行前端展示

四、拓展阅读

No Silver Bullet

评论