element-plus中el-radio-group 默认选中

在 element-plus 中，el-radio-group 默认选中的方式是通过 `v-model` 绑定选中值。你可以在 `el-radio` 元素上加上 `label` 属性，将其值绑定到 `v-model` 上，即可设置默认选中项。例如：

<template>
  <el-radio-group v-model="selected">
    <el-radio label="option1">Option 1</el-radio>
    <el-radio label="option2">Option 2</el-radio>
    <el-radio label="option3">Option 3</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selected: 'option2' // 默认选中 option2
    };
  }
};
</script>

相关问题

element-plus elradiogroup change事件

Element Plus中的`el-radio-group`组件是一个单选框组，用于展示多个选项供用户选择，并且当用户选择其中一个选项时会触发`change`事件。这个事件在用户更改了当前的选中项后被触发，通常用来自定义选中状态变化后的处理逻辑。

`change`事件的触发示例代码和基本用法如下：

<template>
  <element-radio-group v-model="selectedValue" @change="handleChange">
    <element-radio label="Option 1" value="1"></element-radio>
    <element-radio label="Option 2" value="2"></element-radio>
    <element-radio label="Option 3" value="3"></element-radio>
  </element-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 当前选中的值，默认可能是空字符串
    };
  },
  methods: {
    handleChange(value) {
      console.log('Selected value changed to:', value);
      // 这里你可以根据value更新其他状态或执行其他业务逻辑
    },
  },
};
</script>

在这个例子中，当你切换`radio`选项时，`handleChange`方法会被调用，参数`value`表示当前选中的选项值。

element-plus vue弹框单选

您可以使用 element-plus 中的 el-radio 组件来实现弹框单选功能。具体步骤如下：

1. 在弹框中使用 el-radio-group 组件包裹多个 el-radio 组件，设置 v-model 绑定选中的值。
2. 在 el-radio 组件中设置 label 属性，用于区分不同选项。
3. 点击确定按钮时，获取选中的值进行处理。

示例代码如下：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <el-radio-group v-model="selected">
      <el-radio :label="1">选项1</el-radio>
      <el-radio :label="2">选项2</el-radio>
      <el-radio :label="3">选项3</el-radio>
    </el-radio-group>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      selected: ''
    }
  },
  methods: {
    handleConfirm() {
      // 处理选中的值
      console.log(this.selected)
      this.dialogVisible = false
    }
  }
}
</script>