Vue进阶（幺肆陆）：elementUI 中 el-switch、el-radio 使用注意事项_element el-radio 绑定 number

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

鉴于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>

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

四、拓展阅读

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。