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>
相关推荐
海天胜景1 天前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
海天胜景1 天前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
百锦再1 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code2 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16882 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员2 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
华子w9089258592 天前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
海的诗篇_2 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
hackchen2 天前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
蓝胖子的多啦A梦2 天前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改