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>
相关推荐
Zz_waiting.10 分钟前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
GISer_Jing1 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第一章 webpack5+vue2+cornerstonejs项目创建
vue·cornerstone·cornerstone3d·cornerstonejs
摇滚侠11 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记02
vue
zhong liu bin12 小时前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
前端 贾公子12 小时前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐12 小时前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
知识分享小能手12 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
知识分享小能手19 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react