基于element-ui的el-radio-group表单组件

最新推荐文章于 2026-06-04 14:25:56 发布

原创最新推荐文章于 2026-06-04 14:25:56 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #elementui

element组件专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Element UI的Radio组件（包括el-radio、el-radio-button和el-radio-group）来创建表单，并展示了如何通过el-radio-group设置默认值。示例代码详细展示了如何在数据初始化时获取状态字典并应用于单选框，以及如何在保险公司的账户字段上应用状态字典进行翻译。同时，文中提到了通过修改表单重置方法中的prop值来设定默认选中项的方法，并附带了后台传来的参数截图。

实际效果

Radio单选框是Form表单组件中的一种单选框总共有三个组件 el-radio、el-radio-button和el-radio-group 今天讨论radio-group

`实际效果`

表单部分代码

<template>
 <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>   //弹出对话框
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">     //表单
    <el-row>  
          <el-col :lg="12" :sm="24">
            <el-form-item prop="insuranceCompanyAccount" label="保险公司账户" label
width="100">
              <el-radio-group v-model="form.insuranceCompanyAccount">
                <el-radio
                  v-for="dict in yesornoOptions"    //对象实例
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
       </el-form>
 </template>

对象实例的方法创建及状态字典翻译

<script>
data() {
    return {
 // 系统是否
      yesornoOptions: [],
},
 created() {
    this.getList()
    this.getDicts('sys_yes_no').then(response => {
      this.yesornoOptions = response.data
    })
  },   //对象实例创建
 // 状态字典翻译
    insuranceCompanyAccountFormat(row, column) {
      return this.selectDictLabel(this.yesornoOptions, row.insuranceCompanyAccount)
    },


</script>

关于默认选取的问题

通过修改表单重置的reset中prop的固定值可以修改为默认或者null。

后台传的参数截图