精华内容
下载资源
问答
  • el-radio-group之迷惑操作:label和label 今天学习element-ui的el-radio-group的时候发现el-radio-group的默认值设置无效,但是点击其他单选框可以切换成功。 element-ui官网Radio单选框的使用中,基础用法使用的是...

    el-radio-group之迷惑操作:label和label

    今天学习element-ui的el-radio-group的时候发现el-radio-group的默认值设置无效,但是点击其他单选框可以切换成功。
    element-ui官网Radio单选框的使用中,基础用法使用的是label,radio的值是字符串;单选框组el-radio-group使用的是:label,radio的值是数字。这里我们很容易混淆对:label和label的使用
    基础用法

    <template>
      <el-radio v-model="radio" label="1">备选项</el-radio>
      <el-radio v-model="radio" label="2">备选项</el-radio>
    </template>
    
    <script>
      export default {
        data () {
          return {
            radio: '1'
          };
        }
      }
    </script>
    单选框组
    
    <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           //这里我不小心按照基础用法写成了radio: '3';
          };
        }
      }
    </script>
    

    从上面的代码我们可以看到radio的值分别是字符串’1’和数字3,有什么区别呢?先看一下在编辑器中的label和:label的颜色。

    通过对比可以看出label中的双引号"是红色的,:label中的双引号"是白色的。

    原因:label属性中,双引号和数字都为红色,是因为他们同属于字符串"3";而:label中双引号是白色的,因为它只是用来包裹内容,所以这里的:label="3"代表数字3;如果想让:label的值是字符串则必须再给3加上单引号。

    注意:在Vue中,加冒号的属性,引号里的值一般为一个变量或者表达式,如果为常量时,常量值需忽略后面的引号;没加冒号的属性,值包括后面的引号部分。例如:

    label=“3”,表示label的值为字符串3,v-model变量的值应为字符串;
    :label=“3”,表示label的值为数字3,v-model变量的值应为数字;
    :label="‘3’",表示label的值为字符串3,v-model变量的值应为字符串;

    解决方案一:将 v-model中radio的值改为数字,或者将:label的值改为"‘3’"。

    // 使用:label,值为数字
    <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>
    
    export default {
      data() {
        return {
          radio: 3,     // 这里改为数字
        };
      }
    };// 使用:label,值为字符串
    <el-radio-group v-model="radio">
      <el-radio :label="'3'">备选项1</el-radio>
      <el-radio :label="'6'">备选项2</el-radio>
      <el-radio :label="'9'">备选项3</el-radio>
    </el-radio-group>
    
    export default {
      data() {
        return {
          radio: '3',  
        };
      }
    };
    解决方案二:将el-radio-group单选框组中的:label改为label默认值就可以生效了。
    
    // 使用label标签,值为字符串
    <el-radio-group v-model="radio">
      <el-radio label="3">备选项1</el-radio>
      <el-radio label="6">备选项2</el-radio>
      <el-radio label="9">备选项3</el-radio>
    </el-radio-group>
    
    export default {
      data() {
        return {
          radio: '3',  
        };
      }
    };
    

    当你发现反显成功了, 但是重复点击新增不生效得时候可能是因为关闭表单得时候把默认值清空

    展开全文
  • el-radio-group在设置默认值时样式无效,但是点击其他单选框切换时,却...单选框组el-radio-group使用的是:label,radio的值是数字。这里我们很容易混淆对:label和label的使用, 基础用法 <template> <el-

    转载:https://blog.csdn.net/cream66/article/details/105380191

    el-radio-group在设置默认值时样式无效,但是点击其他单选框切换时,却可以切换成功。

    element-ui官网Radio单选框的使用中,基础用法使用的是label,radio的值是字符串;单选框组el-radio-group使用的是:label,radio的值是数字。这里我们很容易混淆对:label和label的使用,

    基础用法

    <template>
      <el-radio v-model="radio" label="1">备选项</el-radio>
      <el-radio v-model="radio" label="2">备选项</el-radio>
    </template>
    
    <script>
      export default {
        data () {
          return {
            radio: '1'
          };
        }
      }
    </script>
    
    

    单选框组

    <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           //这里我不小心安装基础用法写成了radio: '3';
          };
        }
      }
    </script>
    
    

    从上面的代码我们可以看到radio的值分别是字符串’1’和数字3,有什么区别呢?先看一下在编辑器中的label和:label的颜色。
    在这里插入图片描述
    通过对比可以看出label中的双引号"是红色的,:label中的双引号"是白色的。

    原因:label属性中,双引号和数字都为红色,是因为他们同属于字符串"3";而:label中双引号是白色的,因为它只是用来包裹内容,所以这里的:label="3"代表数字3;如果想让:label的值是字符串则必须再给3加上单引号。

    注意:在Vue中,加冒号的属性,引号里的值一般为一个变量或者表达式,如果为常量时,常量值需忽略后面的引号;没加冒号的属性,值包括后面的引号部分。例如:

    label=“3”,表示label的值为字符串3,v-model变量的值应为字符串;
    :label=“3”,表示label的值为数字3,v-model变量的值应为数字;
    :label="‘3’",表示label的值为字符串3,v-model变量的值应为字符串;

    解决方案一:将 v-model中radio的值改为数字,或者将:label的值改为"‘3’"。

    // 使用:label,值为数字
    <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>
    
    export default {
      data() {
        return {
          radio: 3,     // 这里改为数字
        };
      }
    };
    
    
    // 使用:label,值为字符串
    <el-radio-group v-model="radio">
      <el-radio :label="'3'">备选项1</el-radio>
      <el-radio :label="'6'">备选项2</el-radio>
      <el-radio :label="'9'">备选项3</el-radio>
    </el-radio-group>
    
    export default {
      data() {
        return {
          radio: ’3‘,  
        };
      }
    };
    
    

    解决方案二:将el-radio-group单选框组中的:label改为label默认值就可以生效了。

    // 使用label标签,值为字符串
    <el-radio-group v-model="radio">
      <el-radio label="3">备选项1</el-radio>
      <el-radio label="6">备选项2</el-radio>
      <el-radio label="9">备选项3</el-radio>
    </el-radio-group>
    
    export default {
      data() {
        return {
          radio: ’3‘,  
        };
      }
    };
    
    
    展开全文
  • element-ui的el-radio-group默认选中无效

    万次阅读 多人点赞 2020-04-08 10:27:45
    el-radio-group之迷惑操作:label 今天学习element-ui的el-radio-group的时候发现el-radio-group的默认值设置无效,但是点击其他单选框可以切换成功。 element-ui官网中Radio单选框的基础用法使用的是label属性,...

    el-radio-group之迷惑操作:label和label

    今天学习element-ui的el-radio-group的时候发现el-radio-group的默认值设置无效,但是点击其他单选框可以切换成功。
    在这里插入图片描述
    element-ui官网Radio单选框的使用中,基础用法使用的是label,radio的值是字符串;单选框组el-radio-group使用的是:label,radio的值是数字。这里我们很容易混淆对:label和label的使用,戳这里查看。

    基础用法

    <template>
      <el-radio v-model="radio" label="1">备选项</el-radio>
      <el-radio v-model="radio" label="2">备选项</el-radio>
    </template>
    
    <script>
      export default {
        data () {
          return {
            radio: '1'
          };
        }
      }
    </script>
    

    单选框组

    <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           //这里我不小心按照基础用法写成了radio: '3';
          };
        }
      }
    </script>
    

    从上面的代码我们可以看到radio的值分别是字符串’1’和数字3,有什么区别呢?先看一下在编辑器中的label和:label的颜色。
    在这里插入图片描述
    在这里插入图片描述
    通过对比可以看出label中的双引号"是红色的,:label中的双引号"是白色的。

    原因:label属性中,双引号和数字都为红色,是因为他们同属于字符串"3";而:label中双引号是白色的,因为它只是用来包裹内容,所以这里的:label="3"代表数字3;如果想让:label的值是字符串则必须再给3加上单引号。

    注意:在Vue中,加冒号的属性,引号里的值一般为一个变量或者表达式,如果为常量时,常量值需忽略后面的引号;没加冒号的属性,值包括后面的引号部分。例如:

    label=“3”,表示label的值为字符串3,v-model变量的值应为字符串;
    :label=“3”,表示label的值为数字3,v-model变量的值应为数字;
    :label="‘3’",表示label的值为字符串3,v-model变量的值应为字符串;

    解决方案一:将 v-model中radio的值改为数字,或者将:label的值改为"‘3’"。

    // 使用:label,值为数字
    <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>
    
    export default {
      data() {
        return {
          radio: 3,     // 这里改为数字
        };
      }
    };
    
    // 使用:label,值为字符串
    <el-radio-group v-model="radio">
      <el-radio :label="'3'">备选项1</el-radio>
      <el-radio :label="'6'">备选项2</el-radio>
      <el-radio :label="'9'">备选项3</el-radio>
    </el-radio-group>
    
    export default {
      data() {
        return {
          radio: '3',  
        };
      }
    };
    

    解决方案二:将el-radio-group单选框组中的:label改为label默认值就可以生效了。

    // 使用label标签,值为字符串
    <el-radio-group v-model="radio">
      <el-radio label="3">备选项1</el-radio>
      <el-radio label="6">备选项2</el-radio>
      <el-radio label="9">备选项3</el-radio>
    </el-radio-group>
    
    export default {
      data() {
        return {
          radio: '3',  
        };
      }
    };
    

    在这里插入图片描述

    展开全文
  • 错误的代码如下: ...el-radio-group v-model="updateForm.builtIn"> <el-radio :label="0">是</el-radio> <el-radio :label="1">否</el-radio> </el-radio-group> &.

     错误的代码如下:

    <el-form-item label="是否内置:" prop="builtIn">
        <el-radio-group v-model="updateForm.builtIn">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
        </el-radio-group>
    </el-form-item>

     

    在高人的指点下,查到了问题所在:

    修改后的代码如下:

    <el-form-item label="是否内置:" prop="builtIn">
        <el-radio-group v-model="updateForm.builtIn">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
        </el-radio-group>
    </el-form-item>
    展开全文
  • el-radio-button官方给...el-radio-group v-model="radio1"> <el-radio-button label="上海"></el-radio-button> <el-radio-button label="北京"></el-radio-button> </el-radio-gr.
  • <el-radio-group v-model="attenceId" > <el-radio v-for="item in factoryList" :label="item.attenceId" :key="item.attenceId" >{{item.attenceName}
  • value 这个属性值放在radio里面没多大作用, 在radio单选框里面 lable 相当于 radio 的 value,由此删除代码中的value属性 ...el-radio-group v-model="form.gender" style="margin-bottom: 0"> .
  • 后台返回的值为number,但是用以下写法,按钮选中不回显,原因是写法为label="1" 时,label值是字符串类型,与后台返回值类型不匹配,故不会回显 <el-form-item label="是否唯一"> <el-radio v-model=...
  • el-radio-group 事件监听

    千次阅读 2019-09-05 18:06:56
    <el-radio-group v-model="histType" size="mini" @change="histTypeUpdate"> <el-radio-button label="周"></el-radio-button> <el-radio-button label="月"></e...
  • el-radio-group v-model=“project_type” @change=“type_change()”> 然后在 type_change() 再把 值赋给 obj.type <el-radio-group v-model="obj.type" @change="type_change()"> <el-radio label=...
  • el-radio默认值选不中

    千次阅读 2020-07-10 17:31:11
    传参类型是number类型,label前面需要加: <template> <div> <el-form> <h4>单选框</h4>...如果单选框的值是number,单选框的lable需要设置成:lable="1"<...el-form-ite
  • 转载于:https://www.codercto.com/a/78781.html 效果: 代码: <template> <div id="app"> <div style="margin:0 auto;width:325px; margin-bottom:18px">...el-radio-group v-mode...
  • 1.vue代码 <el-form-item label="工单状态" ...el-radio-group v-model="form.orderStatus"> <el-radio key="1" label="状态1" ></el-radio> <el-radio key="2" label="状态2" ></e.
  • 在element-ui中,其实可以通过checkbox实现反选的功能,把...el-checkbox-group v-model="checkList" :max="1"> <el-checkbox label="1"></el-checkbox> <el-checkbox label="2"></el-ch...
  • 这段时间写项目,发现一个奇怪的问题,当我的对象嵌套多层,比较深的时候,回显时,el-radio无法切换,页面不渲染更新。。。 <el-radio-groupv-model="eventItem.briefStatus"@change="changeLabel(eventItem,$...
  • <p><img alt="" height="381" src=...请问 项目中el-radio绑定上图itemDefaultValue与itemValue的区别在哪里? 现在存在的问题是,绑定itemDefaultValue能正常回显 <p>itemValue回显乱序</p>
  • 总结:: label=“1”,表示label的值为数字1,即期待数据值为数字label=“1”,表示label的值为字符串1,即期待的数据值为字符串1 上面的结果来自https://blog.csdn.net/weixin_38353851/article/details/93662136... ...
  • 问题是回显数据之后,当我点击其他的radio想要选择的时候,勾选不了。 在网上找到了一样的bug,有解决方案,同样没有找到原因。 解决方案是:原本是把从后台得到的数据res.data直接赋值给editPowerForm,现在需要...
  • 解决办法: 用v-model绑定label值,注意label值是不是动态绑定 (前面有没有":"符号) 如果单选框的lable是:lable=“0”,则后台要返回的单选框的值是数字 <div id='radio' >.../el-radio>
  • // 添加颜色类 ::v-deep 深度选择器 //修改每一个label文字以及边距 ::v-deep .el-radio__label{ ... ::v-deep .el-radio__input.is-checked + .el-radio__label { color: #2E2E2E !important; } //修改...
  • <template> <div id="Demo"> <el-form ref="form" label-width="100px"> <el-form-item label="设备名称"> <div class="check-group" v-for="(item,...
  • el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </template> <script> export default { data () { return ...
  • 我用的是element-ui的el-radio,代码如下: <el-row type="flex"> <el-col :span="24"> <el-radio v-model="radioCode" @click.native="isSendMessage" :label="true">是否将此原因同步短信发送...
  • el-button默认第一个选中

    万次阅读 2018-11-13 18:03:56
    el-button type="success" plain size="mini" autofocus="true" @click="countCollum('countele')"&gt;充电电量&lt;/el-button&gt; &lt;el-button type=&...
  • :radio的值应该是string类型,如果后台返回的值是int类型,radio不会默认选中。 解决办法 前端接收到后端的值之后,对属性转化,设置为string。 this.ModuleInfo.rightType = uResponse.data.rightType.toString(); ...
  • 请看下文: 由于复选框element-ui具有点击一次选中,再次点击取消这个功能,因此利用el-checkbox复选框,代替单选框el-radio。 <el-checkbox v-model=... checked: true, //默认选中 } } 但是,想要单选框

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 626
精华内容 250
关键字:

el-radio-group默认选中