当前位置：首页 > 前端教程

elementui单选

2026-03-06 03:44:46前端教程

使用 ElementUI 实现单选功能

ElementUI 提供了 el-radio 和 el-radio-group 组件来实现单选功能。以下是如何使用它们的详细方法：

基本单选

最简单的单选可以通过 el-radio 组件实现，通常需要配合 v-model 进行数据绑定：

<template>
  <el-radio v-model="radio" label="1">选项1</el-radio>
  <el-radio v-model="radio" label="2">选项2</el-radio>
</template>

<script>
export default {
  data() {
    return {
      radio: '1'
    }
  }
}
</script>

单选组

对于多个选项的情况，使用 el-radio-group 包裹 el-radio 更为方便：

<template>
  <el-radio-group v-model="radio">
    <el-radio label="1">选项1</el-radio>
    <el-radio label="2">选项2</el-radio>
    <el-radio label="3">选项3</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radio: '1'
    }
  }
}
</script>

禁用状态

通过 disabled 属性可以禁用单个或所有单选选项：

<el-radio-group v-model="radio" disabled>
  <el-radio label="1">选项1</el-radio>
  <el-radio label="2">选项2</el-radio>
</el-radio-group>

边框样式

添加 border 属性可以为单选按钮添加边框：

<el-radio-group v-model="radio">
  <el-radio label="1" border>选项1</el-radio>
  <el-radio label="2" border>选项2</el-radio>
</el-radio-group>

按钮样式

使用 el-radio-button 可以实现按钮样式的单选：

<el-radio-group v-model="radio">
  <el-radio-button label="1">选项1</el-radio-button>
  <el-radio-button label="2">选项2</el-radio-button>
</el-radio-group>

动态渲染选项

可以通过 v-for 动态渲染单选选项：

<template>
  <el-radio-group v-model="radio">
    <el-radio 
      v-for="item in options" 
      :key="item.value" 
      :label="item.value"
    >
      {{item.label}}
    </el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radio: '1',
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' }
      ]
    }
  }
}
</script>

事件处理

可以通过 @change 事件监听选项变化：

<el-radio-group v-model="radio" @change="handleChange">
  <el-radio label="1">选项1</el-radio>
  <el-radio label="2">选项2</el-radio>
</el-radio-group>

<script>
export default {
  methods: {
    handleChange(val) {
      console.log('选中的值:', val)
    }
  }
}
</script>