element-plus表单中，根据单选框中的值更新表单内容

在Element Plus的表单组件中，你可以通过监听`el-radio`的`change`事件来动态更新表单的内容。当你有一个单选按钮组，并且每个选项都对应不同的表单字段需要展示或隐藏，可以按照以下步骤操作：

1. 首先，在HTML结构上，为每个单选按钮设置`v-model`绑定到一个数据属性，比如`selectedOption`。

<template>
  <el-form ref="form">
    <el-radio-group v-model="selectedOption" @change="updateFormContent">
      <el-radio label="option1">选项1</el-radio>
      <el-radio label="option2">选项2</el-radio>
      <!-- 更多选项... -->
    </el-radio-group>
    
    <div v-if="selectedOption === 'option1'">
      <!-- 显示与 option1 对应的表单内容 -->
      <el-input v-model="input1"></el-input>
    </div>

    <div v-if="selectedOption === 'option2'">
      <!-- 显示与 option2 对应的表单内容 -->
      <el-textarea v-model="textarea2"></el-textarea>
    </div>
  </el-form>
</template>

2. 然后，在Vue组件的`data`或`setup`中定义对应的变量，并在`methods`或自定义事件处理器`updateFormContent`中处理变化：

<script setup>
import {ref} from 'vue';

const selectedOption = ref('');
const input1 = ref('');
const textarea2 = ref('');

// 更新表单内容的方法
function updateFormContent() {
  if (selectedOption.value === 'option1') {
    // 如果选中了option1，显示input1，隐藏textarea2
    input1.value = '';
    textarea2.value = '';
  } else if (selectedOption.value === 'option2') {
    // 同理，如果选中option2，则反之
    input1.value = '';
    textarea2.value = '';
  }
}
</script>