AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2024-08-02 79
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3选择框选择不同的值输入框刷新变化

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

例如：

image.gif 编辑

image.gif 编辑

image.gif 编辑

实现方式：这个输入框我做的是业务字典实际的值是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>

image.gif


关键词：
vue3输入框VUE.js
输入框VUE.js
vue3刷新VUE.js
小宋1021
目录
相关文章
游客62mqllx53nctc
|
19天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
游客62mqllx53nctc
46 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
CamilleKing
|
16天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
37 7
小宋1021
|
17天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
39 3
CamilleKing
|
16天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
16天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
38 1
游客zi3qmblbcdexu
|
19天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
35 1
大树营养快线
|
19天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
大树营养快线
24 2
我是快乐的嘟嘟
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
74 26
html的七十二变
|
7天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
25 8
html的七十二变
|
7天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
21 7

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 4
    自制简单的range（Vue）
  • 5
    vite原理之解析.vue文件
  • 6
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 7
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 8
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 9
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 10
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 1
    vue(1)，小白看完都会了
    43
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    146
  • 3
    Vue中避免滥用this去读取data中数据
    43
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    120
  • 5
    vue中使用pinia及持久化
    60
  • 6
    Vue3与Vue2：对比分析与迁移指南
    394
  • 7
    双向数据绑定：Vue.js的魔法背后
    56
  • 8
    Vue class和style绑定：动态美化你的组件
    82
  • 9
    Vue 监听器：让你的应用实时响应变化
    199
  • 10
    vue3封装面包屑
    146

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    阿里云OSS设置跨域访问