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

目录

实际效果

---

  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。

后台传的参数截图