el-radio-button 设置默认选中问题

最新推荐文章于 2024-12-07 00:10:25 发布

原创最新推荐文章于 2024-12-07 00:10:25 发布 · 8.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

27 篇文章

订阅专栏

本文档展示了在使用Element UI的el-radio-button组件时，如何处理值为数字（如0、1）而不是中文的情况。当值为数字时，显示的文案也会变为数值，而非预期的中文文本。解决办法是在label属性中保留数字，同时在按钮内添加对应的中文描述，以保持正常显示。示例代码中展示了如何设置上海和北京的选择项，使得radio1的值可以是0或1，而显示的文案仍然是‘上海’和‘北京’。

el-radio-button 官方给出的代码示例如下。

<template>
  <div>
    <el-radio-group v-model="radio1">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio1: '上海',
      };
    }
  }
</script>

但如果值不是中文，而是0、1之类的，这在数据库设计中很常见。这种情况下怎么设置选中呢？

将label设置成0、1的话，显示的文案也变成数值了。官网并没有给出解决办法。经尝试，需要如下设置。

<template>
  <div>
    <el-radio-group v-model="radio1">
      <el-radio-button label="0">上海</el-radio-button>
      <el-radio-button label="1">北京</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio1: 0,
      };
    }
  }
</script>