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>
相关推荐
蜚鸣3 天前
Vue的快速入门
vue
蓝胖子的多啦A梦3 天前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
吃饭最爱4 天前
⽹络请求Axios的概念和作用
vue
魂尾ac4 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
wangbing11254 天前
界面规范11-对话框
javascript·vue.js·elementui
是罐装可乐5 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞5 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52145 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
Hexene...6 天前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
小胖墩有点瘦6 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台