当前位置：首页 > article >正文

ElementUI Form：Radio 单选框

article 2025/3/19 14:18:05

ElementUI安装与使用指南

Radio 单选框

点击下载learnelementuispringboot项目源码

效果图

el-radio.vue （Radio 单选框）页面效果图

项目里el-radio.vue代码

<script>
export default {
  name: 'el_radio',
  data() {
    return {
      radio: '1',
      radio2: '2',
      radio3: 3,
      radio4: '上海',
      radio5: '上海',
      radio6: '上海',
      radio7: '上海',
      radio8: '1',
      radio9: '1',
      radio10: '1',
      radio11: '1'
    }
  }
}

</script>

<template>
  <div>
    <h1>element组件：el-radio</h1>
    <el-divider/>
    <el-row>
      <el-button type="text">基础用法</el-button>
      由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
    </el-row>
    <p>要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio
      label属性的值，label可以是String、Number或Boolean。</p>
    <el-radio v-model="radio" lable='1'>男</el-radio>
    <el-radio v-model="radio" label='2'>女</el-radio>

    <br/>
    <el-row>
      <el-button type="text">禁用状态</el-button>
      <el-radio disabled v-model="radio2" label="1">男</el-radio>
      <el-radio disabled v-model="radio2" label="2">女</el-radio>
    </el-row>

    <br/>
    <el-row>
      <el-button type="text">单选框组</el-button>
      适用于在多个互斥的选项中选择的场景
    </el-row>
    <p>
      结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。</p>
    <el-radio-group v-model="radio3">
      <el-radio :label="3">备选项</el-radio>
      <el-radio :label="6">备选项</el-radio>
      <el-radio :label="9">备选项</el-radio>
    </el-radio-group>

    <el-row>
      <el-button type="text">按钮样式</el-button>
      按钮样式的单选组合。只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性。
    </el-row>

    <div>
      <el-radio-group v-model="radio4">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="radio5" size="medium">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="radio6" size="small">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京" disabled></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="radio7" disabled size="mini">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>


    <el-row>
      <el-button type="text">带有边框</el-button>
      设置border属性可以渲染为带有边框的单选框。
    </el-row>
    <div>
      <el-radio v-model="radio8" label="1" border>备选项1</el-radio>
      <el-radio v-model="radio8" label="2" border>备选项2</el-radio>
    </div>
    <div style="margin-top: 20px">
      <el-radio v-model="radio9" label="1" border size="medium">备选项1</el-radio>
      <el-radio v-model="radio9" label="2" border size="medium">备选项2</el-radio>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="radio10" size="small">
        <el-radio label="1" border>备选项1</el-radio>
        <el-radio label="2" border disabled>备选项2</el-radio>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="radio11" size="mini" disabled>
        <el-radio label="1" border>备选项1</el-radio>
        <el-radio label="2" border>备选项2</el-radio>
      </el-radio-group>
    </div>
  </div>

</template>

<style scoped>

</style>