场景
结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-radio绑定变量,另外,还提供了change事件来响应变化,它会传入一个参数value。
官方示例代码:
<template> <el-radio-group v-model="radio"> <el-radio :label="3">备选项</el-radio> <el-radio :label="6">备选项</el-radio> <el-radio :label="9">备选项</el-radio> </el-radio-group> </template> <script> export default { data () { return { radio: 3 }; } } </script>
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
按照上面官方的示例代码使用的时候,发现在编辑时获取数据后没法回显数据。
原因是示例代码中返回的数据绑定的radio是一个数组3,而在实际业务中绑定的属性是字符串“3”
所以需要在“”外面再加一层‘’
<el-radio-group v-model="form.jxbclx" @change="$forceUpdate()" size="medium"> <el-radio :label='"1"'>井下大班</el-radio> <el-radio :label='"2"'>井下小班</el-radio> </el-radio-group>
就能实现回显数据了。