el-radio-group for循环方法

最新推荐文章于 2025-06-16 10:40:51 发布

管火火火

最新推荐文章于 2025-06-16 10:40:51 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端开发前端开发问题记录文章标签： vue 前端 elementUI

本文链接：https://blog.youkuaiyun.com/weixin_38373875/article/details/94878135

web前端开发同时被 2 个专栏收录

30 篇文章

订阅专栏

前端开发问题记录

28 篇文章

订阅专栏

本文详细介绍了如何在 Vue.js 项目中使用 Element UI 的 el-radio-group 和 el-radio 组件，通过示例展示了如何创建一个可遍历的选项列表，并将选中的值绑定到表单字段。适用于需要实现多种选择场景的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常会遇到el-radio-group 和 el-radio是一个列表，需要遍历出来，然后将选中的值赋值过去，页面中很多地方都用到这个组件，如果用到的地方很多，可以el-radio-group提取出来，直接传Array数组即可。

template模板中的写法如下

<el-radio-group v-model="form.informantType">
            <el-radio
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :label="item.value"
            >{{item.label}}</el-radio>
          </el-radio-group>

js return中写法如下

form: {
        informantType: "", 
      },
      options: [
        {
          value: 0,
          label: "全部"
        },
        {
          value: 1,
          label: "存在欺诈骗钱行为"
        },
        {
          value: 2,
          label: "存在色情内容"
        },
        {
          value: 3,
          label: "存在赌博等违法内容"
        },
        {
          value: 4,
          label: "存在侵权行为"
        },
        {
          value: 5,
          label: "传播邪教内容"
        },
        {
          value: 6,
          label: "传播反共反华内容"
        },
        {
          value: 7,
          label: "其他"
        }
      ],

最后赋值即可