vue3+elementPlus实现Radio单选切换显示不同内容

el-radio-group 组件方法:

css 复制代码
<template>
  <el-radio-group v-model="radio">
    <el-radio :value="0">阶梯达标</el-radio>
    <el-radio :value="1">限时达标</el-radio>
  </el-radio-group>
</template>

给radio添加监听事件 @change:

css 复制代码
<template>
  <el-radio-group v-model="radio" @change="handleChange">
    <el-radio :value="0">阶梯达标</el-radio>
    <el-radio :value="1">限时达标</el-radio>
  </el-radio-group>
</template>

这里也可以使用字典:

css 复制代码
               <el-radio-group v-model="form.stageType" @change="handleChange">
                  <el-radio
                     v-for="dict in stage_type"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>

点击某一项的时候,根据点击事件修改current的值。

css 复制代码
<script setup name="Rewards">

 const current = ref(0);

 const handleChange = (val) => {
   current.value = val;
 }
</script>

使用v-if 判断radio回显内容:

css 复制代码
       <div class="con">
          <div class="con-item" v-if="current == 0">
            <div class="input-items">
              <label for="name">达标交易量:</label>
              <input
                type="text"
                placeholder="输入交易量"
              />
            </div>
          </div>

          <div class="con-item" v-if="current == 1">
            <div class="input-items">
              <label for="name">开通后(天):</label>
              <input
                type="text"
                placeholder="输入天数"
              />
            </div>
 

          </div>
        </div>

实现效果:

完整代码:

css 复制代码
    <!-- 添加或修改阶段奖励对话框 -->
    <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
      <el-form ref="rewardsRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入模板名称" />
        </el-form-item>

        <el-col :span="24">
          <el-form-item label="阶段奖励类型" prop="stageType">
               <el-radio-group v-model="form.stageType" @change="handleChange">
                  <el-radio
                     v-for="dict in stage_type"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
        </el-form-item>
        </el-col>



        <div class="con">
          <div class="con-item" v-if="current == 0">
            <div class="input-items">
              <label for="name">达标交易量:</label>
              <input
                type="text"
                placeholder="输入交易量"
              />
            </div>
          </div>

          <div class="con-item" v-if="current == 1">
            <div class="input-items">
              <label for="name">开通后(天):</label>
              <input
                type="text"
                placeholder="输入天数"
              />
            </div>
 

          </div>
        </div>





        <!-- <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

<script setup name="Rewards">

 const current = ref(0);
 const handleChange = (val) => {
   current.value = val;
 }


</script>
相关推荐
软件20510 小时前
【vue3主题切换】
vue
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
结衣结衣.16 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
军军君013 天前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
你这-坏孩子3 天前
更改elementui 图标 css content
前端·css·elementui
xaboy3 天前
Vue 开源项目低代码表单设计器 FcDesigner v3.3 版本发布!兼容Element Plus/Ant Design/Vant,支持PC/移动端
低代码·vue·表单设计器
程序猿小D3 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+vue实现的酒店预订管理系统,推荐!
数据库·mysql·spring·vue·毕业设计·mybatis·酒店预订
马卡龙MK3 天前
vue 不完美的多标签页解决方案
vue
goms3 天前
前端项目集成lint-staged
前端·vue·lint-staged