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

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

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


关键词：
输入框VUE.js
vue3输入框VUE.js
vue3刷新VUE.js
小宋1021
目录
相关文章
游客izzodqdjmth2i
|
3月前
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持，重构前端开发范式。性能优化与生态协同并进，兼顾易用性与工程化，引领Web开发迈向高效、可维护的新纪元。（238字）
游客izzodqdjmth2i
658 139
AI侠客
|
3月前
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能，但仍需遵循最佳实践。合理使用 v-if、key、computed，避免深度监听，利用懒加载与虚拟列表，结合打包优化，方可充分发挥其性能优势。（239字）
AI侠客
324 1
yxybox
|
4月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
yxybox
497 11
34789737
|
3月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参，提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性，建议明确声明类型，保障代码质量。
34789737
373 0
34789737
|
5月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些？
虚拟列表在 Vue3 中通过仅渲染可视区域内容，显著提升大数据列表性能，适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景，结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
34789737
559 1
34789737
|
5月前
|
缓存 JavaScript UED
除了循环引用，Vue3还有哪些常见的性能优化技巧？
除了循环引用，Vue3还有哪些常见的性能优化技巧？
34789737
327 0
34789737
|
6月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时，使用虚拟列表只渲染可视区域的内容，显著减少 DOM 节点数量。
34789737
157 0
34789737
|
4月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
396 2
哇塞女孩
|
3月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
358 137
谢妹纸
|
7月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
887 0

热门文章

最新文章

  • 1
    SpringCloud微服务实战——搭建企业级开发框架（四十一）：扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
  • 2
    超大坑！springboot + vue + element-ui，运行前端项目报these dependencies were not found的问题
  • 3
    Vue中拖动排序功能,引入SortableJs，前端拖动排序。
  • 4
    Vue.js的webpack.config.js示例
  • 5
    vue3.0 vite引入SVG iconfont
  • 6
    Vue3 + Vite + TypeScript + Element-Plus：从零到一构建企业级后台管理系统（前后端开源）(2)
  • 7
    Vue(Vue2+Vue3)——2.使用VsCode搭建Vue开发环境
  • 8
    【Vue3从零开始-实战】S6：路由守卫实现登录校验功能
  • 9
    Vue ElementUI table给表格一个斜线分隔线
  • 10
    vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
  • 1
    基于ssm+vue.js的中国咖啡文化宣传网站附带文章和源代码设计说明文档ppt
    189
  • 2
    基于ssm+vue.js的铁岭河医院医患管理系统附带文章和源代码设计说明文档ppt
    141
  • 3
    基于ssm+vue.js的校园代购服务订单管理系统附带文章和源代码设计说明文档ppt
    223
  • 4
    基于ssm+vue.js的海鲜自助餐厅系统附带文章和源代码设计说明文档ppt
    137
  • 5
    基于ssm+vue.js的农家乐信息平台附带文章和源代码设计说明文档ppt
    129
  • 6
    基于ssm+vue.js的德云社票务系统附带文章和源代码设计说明文档ppt
    138
  • 7
    基于ssm+vue.js的个人博客网站附带文章和源代码设计说明文档ppt
    168
  • 8
    基于ssm+vue.js的高校共享单车管理系统附带文章和源代码设计说明文档ppt
    272
  • 9
    基于ssm+vue.js的智慧城市实验室主页系统附带文章和源代码设计说明文档ppt
    159
  • 10
    基于ssm+vue.js的lw管理系统附带文章和源代码设计说明文档ppt
    108

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    【DataEase】零代码数据可视化分析工具的安装部署保姆级教程