Vue3选择框选择不同的值输入框刷新变化

news2024/11/24 8:44:14

场景：新增的时候根据选择框的不同来改变输入信息

例如：

实现方式：这个输入框我做的是业务字典实际的值是0和1，在点击选择框的时候用v-if判断选择的值是1还是0，如果是0则是一个输入信息，如果是1则又是另一个输入信息。

实现代码片：

 <el-row :span="24" v-if="formData.courseType === 0">

全部代码：

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" class="views" style="--el-dialog-width: 45%;">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
    <div style="padding: 8px 0;background: #f8fbff">
        <div class="tip">
          <div class="bold">1</div><span class="btitle">基本信息</span>
        </div>
        <el-row :span="24">
        <el-form-item label="课程类型" prop="courseType">
        <el-select v-model="formData.courseType" placeholder="请选择课程类型">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </el-row>
      <el-row :span="24" v-if="formData.courseType === 0">
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="formData.courseName" placeholder="请输入课程名称" />
      </el-form-item>
      <!-- <el-form-item label="课程应用范围" prop="courseApplicationScope">
        <el-select v-model="formData.courseApplicationScope" placeholder="课程应用范围">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_SOURCE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item> -->
      
      <el-form-item label="年级" prop="grade">
        <el-select v-model="formData.grade" placeholder="请选择年级">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.GRADE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="科目" prop="subject">
        <el-select v-model="formData.subject" 
        multiple
        placeholder="请选择科目">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.SUBJECT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学期" prop="term">
        <el-select v-model="formData.term" placeholder="请选择学期">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.TERM)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="课程状态" prop="courseStatus">
        <el-select v-model="formData.courseStatus" disabled  placeholder="请选择课程状态">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="备注" prop="remark" class="textarea">
        <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" />
      </el-form-item> -->
    </el-row>
  </div>
  <div style="padding: 8px 0;background: #f8fbff" v-if="formData.courseType === 1">
       
      <el-row :span="24" >
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="formData.courseName" placeholder="请输入课程名称" />
      </el-form-item>
      <!-- <el-form-item label="课程应用范围" prop="courseApplicationScope">
        <el-select v-model="formData.courseApplicationScope" placeholder="课程应用范围">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_SOURCE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item> -->
     
      <el-form-item label="年级" prop="grade">
        <el-select v-model="formData.grade" placeholder="请选择年级">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.GRADE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="课程状态" prop="courseStatus">
        <el-select v-model="formData.courseStatus" disabled  placeholder="请选择课程状态">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COURSE_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="备注" prop="remark" class="textarea">
        <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" />
      </el-form-item> -->
    </el-row>
  </div>
  <div style="padding: 8px 0;background: #f8fbff;margin-top:10px" v-if="formData.courseType === 0">
      <div class="tip" style="margin-top:10px">
          <div class="bold">2</div><span class="btitle">收费信息</span>
        </div>
        <el-row :span="24">
          <!-- <el-form-item label="收费方式" prop="chargeMethod">
        <el-select v-model="formData.chargeMethod" placeholder="请选择收费方式">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.CHARGE_METHOD)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="扣课时规则" prop="deduceClassRules">
        <el-select v-model="formData.deduceClassRules" placeholder="请选择扣课时规则">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.DEDUCE_CLASS_RULES)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="定价(元)" prop="coursePrice" class=".el-input-number">
        <el-input-number v-model="formData.coursePrice" placeholder="请输入定价(元)" />
      </el-form-item>
      <el-form-item label="学时" prop="courseStudyTime" class=".el-input-number">
        <el-input-number v-model="formData.courseStudyTime" placeholder="请输入学时" />
      </el-form-item>
    </el-row>
  </div>
  <div style="padding: 8px 0;background: #f8fbff;margin-top:10px" v-if="formData.courseType === 1">
      <div class="tip" style="margin-top:10px">
          <div class="bold">2</div><span class="btitle">收费信息</span>
        </div>
        <el-row :span="24">
          <!-- <el-form-item label="收费方式" prop="chargeMethod">
        <el-select v-model="formData.chargeMethod" placeholder="请选择收费方式">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.CHARGE_METHOD)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="扣课时规则" prop="deduceClassRules">
        <el-select v-model="formData.deduceClassRules" placeholder="请选择扣课时规则">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.DEDUCE_CLASS_RULES)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="定价(元)" prop="coursePrice" class=".el-input-number">
        <el-input-number v-model="formData.coursePrice" placeholder="请输入定价(元)" />
      </el-form-item>
      <el-form-item label="学时" prop="courseStudyTime" class=".el-input-number">
        <el-input-number v-model="formData.courseStudyTime" placeholder="请输入学时" />
      </el-form-item>
      <el-form-item label="折扣" prop="discount" class=".el-input-number">
        <el-input-number v-model="formData.discount" placeholder="请输入折扣" />
      </el-form-item>
      <el-form-item label="赠送课时" prop="giftCourseNumber" class=".el-input-number">
        <el-input-number v-model="formData.giftCourseNumber" placeholder="请输入赠送课时" />
      </el-form-item>
    </el-row>
  </div>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">保存并启用</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { CourseManageApi, CourseManageVO } from '@/api/teach/coursemanage'
import { ref } from 'vue'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
/** 课程管理 表单 */
defineOptions({ name: 'CourseManageForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  courseName: undefined,
  courseType: undefined,
  chargeMethod: undefined,
  priceStandard: undefined,
  courseStatus: undefined,
  grade: undefined,
  subject: undefined,
  term: undefined,
  studentName: undefined,
  studentPhone: undefined,
  courseSource: undefined,
  courseApplicationScope: undefined,
  remark: undefined,
  deduceClassRules: undefined,
  operaName: undefined,
  operaTime: undefined,
  operaType: undefined,
  operaExplain: undefined,
  coursePrice: undefined,
  courseStudyTime: undefined,
  discount: undefined,
  giftCourseNumber: undefined,

})
const formRules = reactive({
  courseName: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
  courseApplicationScope: [{ required: true, message: '课程应用范围不能为空', trigger: 'blur' }],
  courseType: [{ required: true, message: '课程类型不能为空', trigger: 'blur' }],
  grade: [{ required: true, message: '年级不能为空', trigger: 'blur' }],
  subject: [{ required: true, message: '科目不能为空', trigger: 'blur' }],
  term: [{ required: true, message: '学期不能为空', trigger: 'blur' }],
  courseStatus: [{ required: true, message: '课程状态不能为空', trigger: 'blur' }],
  chargeMethod: [{ required: true, message: '收费方式不能为空', trigger: 'blur' }],
  deduceClassRules: [{ required: true, message: '扣课时规则不能为空', trigger: 'blur' }],

})

const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await CourseManageApi.getCourseManage(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as CourseManageVO
    if (formType.value === 'create') {
      await CourseManageApi.createCourseManage(data)
      message.success(t('common.createSuccess'))
    } else {
      await CourseManageApi.updateCourseManage(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    courseName: undefined,
    courseType: undefined,
    chargeMethod: undefined,
    priceStandard: undefined,
    courseStatus: undefined,
    grade: undefined,
    subject: undefined,
    term: undefined,
    studentName: undefined,
    studentPhone: undefined,
    courseSource: undefined,
    courseApplicationScope: undefined,
    remark: undefined,
    deduceClassRules: undefined,
    operaName: undefined,
    operaTime: undefined,
    operaType: undefined,
    operaExplain: undefined,
    coursePrice: undefined,
    courseStudyTime: undefined,
    discount: undefined,
    giftCourseNumber: undefined,
  }
  formRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
.el-form-item{
  width: 47%;
}
.bold{
  width: 20px;
  height:20px;
  border-radius: 50%;
  background:#85afd5;
  text-align: center;
  margin-top:5px;
  margin-left:-10px;
  color:#fff
}
.btitle{
  line-height:30px;
  margin-left:10px;
  color:#84b0d5
}
.tip{
  border:1px solid #84b0d5;
  border-radius:0 20px 20px 0;
  width:140px;
  height:30px;
  display:flex;
  margin-left:30px;
  margin-bottom:20px
}
:deep(.el-form-item__content){
  display: block;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper){
  width: -webkit-fill-available;
}
.textarea{
  width: 94%;
}
:deep(.views>.el-dialog__body){
  padding: calc(var(--el-dialog-padding-primary) - 20px) var(--el-dialog-padding-primary);
}
:deep(.el-form-item__label){
  width: 108px !important;
}
.el-input-number{
  width: 230px !important;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1965926.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【面试】前端开发中的“八股文”：助力还是阻力？

【面试】前端开发中的“八股文”：助力还是阻力？

引言 在程序员面试中&#xff0c;“八股文”已经成为一个不可或缺的环节。它通常指的是那些面试中频繁出现的、有固定答案的问题&#xff0c;涉及计算机科学的基础知识、编程语言的特性、以及一些常见的设计模式和算法。然而&#xff0c;围绕“八股文”的争议从未停歇。一方面…
阅读更多...
又是肌肉减少症！中国学者用它拿下二区top| CHARLS等七大老年公共数据库周报（7.24）...

又是肌肉减少症！中国学者用它拿下二区top| CHARLS等七大老年公共数据库周报（7.24）...

七大老年公共数据库 七大老年公共数据库共涵盖33个国家的数据&#xff0c;包括&#xff1a;美国健康与退休研究 (Health and Retirement Study, HRS)&#xff1b;英国老龄化纵向研究 &#xff08;English Longitudinal Study of Ageing, ELSA&#xff09;&#xff1b;欧洲健康、…
阅读更多...
计算机毕业设计Python+Flask微博舆情分析 微博情感分析 微博爬虫 微博大数据 舆情监控系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

计算机毕业设计Python+Flask微博舆情分析 微博情感分析 微博爬虫 微博大数据 舆情监控系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

基于Python/flask的微博舆情数据分析可视化系统 python爬虫数据分析可视化项目 编程语言&#xff1a;python 涉及技术&#xff1a;flask mysql echarts SnowNlP情感分析 文本分析 系统设计的功能&#xff1a; ①用户注册登录 ②微博数据描述性统计、热词统计、舆情统计 ③微博数…
阅读更多...
【号外】「省点时间」新功能暖心上线！

【号外】「省点时间」新功能暖心上线！

好消息&#xff0c;好消息&#xff0c;重大好消息&#xff01; 应广大用户朋友的要求&#xff0c;经过一个多月的鏖战&#xff0c;「省点时间」的VIP功能终于上线啦&#xff01; 新版本在原有基础上&#xff0c;新增VIP功能&#xff0c;用户拥有了更多选择&#xff0c;赶快来…
阅读更多...
应对移动硬盘传输中断后的无法识别挑战：数据恢复全攻略

应对移动硬盘传输中断后的无法识别挑战：数据恢复全攻略

一、现象剖析&#xff1a;移动硬盘传输中断后的识别困境 在数字化时代&#xff0c;移动硬盘作为数据存储与传输的重要工具&#xff0c;其便捷性和大容量特性深受用户青睐。然而&#xff0c;在数据传输过程中&#xff0c;一旦遭遇意外中断&#xff0c;导致移动硬盘在后续操作中…
阅读更多...
7.30 Day12 SSH的安全配置

7.30 Day12 SSH的安全配置

知识点&#xff1a; 1、OpenSSH远程管理 2、TCP Wrappers访问控制 配置OpenSSH sshd服务默认允许root用户登录&#xff0c;当在Internet中使用时这是非常不安全的。普遍的做法是&#xff1a;先以普通用户远程登录&#xff0c;进入安全shell环境后&#xff0c;根据实际需要使用…
阅读更多...
STM32的外部中断详解

STM32的外部中断详解

一、什么是中断&#xff1f; 想象一下你正在家里做饭&#xff0c;突然门铃响了&#xff0c;你听到门铃声后&#xff0c;会暂时放下手中的事情&#xff08;比如炒菜&#xff09;&#xff0c;去开门看看是谁。在这个例子中&#xff0c;门铃声就是一个“中断”&#xff0c;它打断…
阅读更多...
uniapp文件查找失败:‘./pages/classify/classify/classify.vue‘at main.is:6

uniapp文件查找失败:‘./pages/classify/classify/classify.vue‘at main.is:6

在HBuilderX这类前端开发环境中&#xff0c;当使用其项目结构管理功能&#xff08;如新建页面或目录&#xff09;时&#xff0c;工具通常会自动在项目的配置文件&#xff08;如pages.json&#xff09;中注册或更新相应的路径信息&#xff0c;以确保应用能够正确地加载和显示这些…
阅读更多...
谢希仁计算机网络第八版期末复习简答（3）

谢希仁计算机网络第八版期末复习简答（3）

传输层 TCP与UDP的区别 区别 TCP UDP 是否连接 面向连接&#xff08;三握四挥&#xff09; 无连接 是否可靠 可靠 不可靠传输&#xff0c;不使用流量控制以及拥塞控制 连接对象 只能是一对一 无限制 传输方法 面向字节流 面向报文 首部开销 最小20字节最大60字…
阅读更多...
Renesas R7FA8D1BH (Cortex®-M85) 输入接口的应用

Renesas R7FA8D1BH (Cortex®-M85) 输入接口的应用

Renesas R7FA8D1BH (Cortex-M85) 控制DS18B20和ADC&#xff0c;实现两个页面的跳转功能 目录 概述 1 软硬件 1.1 软硬件环境信息 1.2 开发板信息 1.3 调试器信息 2 FSP和KEIL配置 2.1 硬件接口电路 2.2 FSB配置KEY的IO 3 功能实现 3.1 FSP生成项目 3.2 KEY功能实现…
阅读更多...
macOS Ventura 13.6.8 (22G820) 正式版发布，ISO、IPSW、PKG 下载

macOS Ventura 13.6.8 (22G820) 正式版发布，ISO、IPSW、PKG 下载

macOS Ventura 13.6.8 (22G820) 正式版发布&#xff0c;ISO、IPSW、PKG 下载 2024 年 7 月 30 日凌晨&#xff0c;macOS Sonoma 14.6 发布&#xff0c;本更新提供了重要的错误修复和安全更新&#xff0c;建议所有用户安装。同时带来了 macOS Ventura 13.6.8 和 macOS Monterey…
阅读更多...
java-questions-分析

java-questions-分析

系列文章目录 文章目录 目录 系列文章目录 文章目录 前言 一、问题案例 1、maven项目compile时候出现告警warn 2、java文件打包然后在命令行中运行java会找不到主类 3、程序找不到数据库驱动和配置实例 4、springboot和mybatis-plus版本不兼容导致 5、springboot项目启动的解释…
阅读更多...
中国最受欢迎的起名大师颜廷利：飞蛾投火，拥抱光明

中国最受欢迎的起名大师颜廷利：飞蛾投火，拥抱光明

标题:飞蛾投火,拥抱光明;视死如归,石破天惊…(升命学说) 在深邃的夜幕下,一只飞蛾振翅向着熊熊燃烧的火焰。它的行为,似乎暗合了一种前沿而深邃的哲学——升命学说。祖籍齐鲁大地山东济南的当代文化名人,颜廷利教授的这一学说不仅描绘了生命的不屈与顽强,更映射出生命体对于光…
阅读更多...
云借阅图书管理系统——用户登录模块

云借阅图书管理系统——用户登录模块

一、用户登录 &#xff08;一&#xff09;用户登录流程图 从图中可以看出&#xff0c;用户登录过程中首先要验证用户名和密码是否正确&#xff0c;如果正确&#xff0c;可以成功登录系统&#xff0c;系统会自动跳转到主页&#xff1b;如果错误&#xff0c;则在登录页面给出错误…
阅读更多...
浅谈电商数据采集重要的一环：数据清洗

浅谈电商数据采集重要的一环：数据清洗

在电子商务的浩瀚数据海洋中&#xff0c;数据采集是获取商业洞察力的第一步&#xff0c;而数据清洗则是这一过程中不可或缺且至关重要的环节。数据清洗不仅关乎数据的准确性与可靠性&#xff0c;更直接影响到后续数据分析的质量与深度。本文将从技术角度出发&#xff0c;深入探…
阅读更多...
Mirror学习笔记(二) 传输协议

Mirror学习笔记(二) 传输协议

文章目录 一、KCP传输协议二、Telepathy 传输协议三、WebSockets传输协议四、多路复用传输&#xff1a;五、延迟模拟传输&#xff1a;六、Ignorance协议七、LiteNetLib协议八、FizzSteamworks协议九、FizzyFacepunch协议十、加密协议十一、Edgegap协议 一、KCP传输协议 KCP是M…
阅读更多...
脊髓小伙伴的饮食秘籍来啦！吃出满满活力，康复路上不孤单

脊髓小伙伴的饮食秘籍来啦！吃出满满活力，康复路上不孤单

Hey小伙伴们~&#x1f44b; 是不是有时候觉得&#xff0c;面对美食却有点无从下手&#xff0c;心里那个小小的声音在说&#xff1a;“我该怎么做&#xff0c;才能让身体更喜欢我呢&#xff1f;”别担心&#xff0c;今天就来给你种草一份超级实用的脊髓损伤患者饮食改善攻略&…
阅读更多...
天地图电子地图矢量地图底图结合图像学实现风格底图地图

天地图电子地图矢量地图底图结合图像学实现风格底图地图

一、基础概念 天地图&#xff08;TianDiTu&#xff09;&#xff0c;全称为“国家地理信息公共服务平台”&#xff0c;是中国国家测绘地理信息局主导建设的国家级地理信息服务平台。它提供了一系列的地图服务和地理信息数据&#xff0c;包括基础地理信息、专题地理信息、地…
阅读更多...
个人健康数据管理小程序的设计

个人健康数据管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;知识科普管理&#xff0c;健康信息共享管理&#xff0c;健康计划管理&#xff0c;健康数据管理&#xff0c;数据分析管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系…
阅读更多...
【Qt】多线程示例代码（QThread）

【Qt】多线程示例代码（QThread）

从QThread继承方式 1. qdicethread.h #ifndef QDICETHREAD_H #define QDICETHREAD_H#include <QObject> #include <QThread>class QDiceThread : public QThread {Q_OBJECT public:explicit QDiceThread(QThread *parent nullptr);void diceBegin();void dicePau…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023