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

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

2024-08-02 139
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
潜意识Java
|
30天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南，涵盖从环境搭建到项目部署的全过程。
潜意识Java
156 1
蓝易云
|
2月前
|
JavaScript API 数据处理
vue3使用pinia中的actions，需要调用接口的话
通过上述步骤，您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store，都能轻松实现高效的状态管理和数据处理。
蓝易云
146 3
mao29955
|
3月前
|
存储 JavaScript 数据管理
除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
需要注意的是，在实际开发中，应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时，要综合考虑代码的可读性、可维护性和性能等因素，以确保系统的稳定和高效运行。
mao29955
64 1
mao29955
|
3月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性，在处理一些复杂的组件间通信问题时，可以提供一种灵活的解决方案。通过合理使用它们，可以帮助我们更好地避免`v-model`的循环引用问题，提高代码的质量和可维护性。
mao29955
144 54
mao29955
|
3月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
74 8
光明顶阳顶天
|
3月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
181 64
光明顶阳顶天
|
3月前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
103 2
心疼你的一切
|
7天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中，class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定，可以动态更新元素的 class 属性，支持对象和数组语法，适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式，Vue 会根据数据变化自动更新 DOM。
心疼你的一切
23 3
心疼你的一切
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器，用于实现单页面应用（SPA）的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系，Vue Router 将用户访问的路径与对应的组件关联，支持哈希和历史模式监听 URL 变化，确保页面导航时正确渲染组件。
心疼你的一切
29 9
心疼你的一切
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库，用于构建单页面应用（SPA）。它将不同页面映射到对应组件，支持嵌套路由、路由参数和导航守卫等功能，简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载，提升性能和开发效率。安装命令：`npm install vue-router`。
心疼你的一切
22 1

热门文章

最新文章

  • 1
    创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
  • 2
    Vue 组件化开发：构建高质量应用的核心
  • 3
    ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
  • 4
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 5
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
  • 6
    Vue.js应用结合Redis数据库：实践与优化
  • 7
    iframe嵌入页面实现免登录思路（以vue为例）
  • 8
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
  • 9
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
  • 10
    Vue Router 核心原理
  • 1
    Vue中的class和style绑定
    23
  • 2
    Vue Router 核心原理
    29
  • 3
    Vue Router 简介
    22
  • 4
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 5
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 6
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 7
    ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
    66
  • 8
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 9
    iframe嵌入页面实现免登录思路（以vue为例）
    58
  • 10
    Vue 组件化开发：构建高质量应用的核心
    77

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云oss简介和如何对接使用