elementui el-radio组件绑定字符串，传参和默认回显

最新推荐文章于 2025-09-11 04:45:52 发布

原创最新推荐文章于 2025-09-11 04:45:52 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #前端

js 同时被 3 个专栏收录

93 篇文章

订阅专栏

vue

70 篇文章

订阅专栏

element

33 篇文章

订阅专栏

本文介绍了如何在Element UI中使用el-radio组件绑定字符串值，特别是在场景中需要显示和传递的时间信息如'09:00'。通过设置label属性为包含时间的字符串，可以实现选择项的显示与回显。示例代码展示了如何创建一个包含多个时间选项的单选按钮组，并演示了如何处理和传递这些时间字符串。

1.适用场景

类似这种：
在这里插入图片描述
如果需要传的是数字1，2，3之类的，官网的例子就可以满足的

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

2.如果显示和传的都是“09：00”呢

        <el-radio-group v-model="settingForm.time">
                <el-radio :label='"09:00"'>09:00</el-radio>
                <el-radio :label='"11:00"'>11:00</el-radio>
                <el-radio :label='"15:00"'>15:00</el-radio>
                <el-radio :label='"16:00"'>16:00</el-radio>
            </el-radio-group>

传值：
在这里插入图片描述