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的单选框

element-plus的单选框可以通过el-radio-group和el-radio两个组件来实现。其中el-radio-group是单选框组的容器，el-radio是单选框选项。具体使用方法如下：

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

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

其中，v-model绑定的是当前选中的选项的值，即label的值。如果需要设置默认选中的选项，可以在data中设置radio的初始值。

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`表示当前选中的选项值。