vue表单联动 +导入数据

最新推荐文章于 2024-10-11 03:59:45 发布

NoTelecom

最新推荐文章于 2024-10-11 03:59:45 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签：表单联动 vue

本文链接：https://blog.youkuaiyun.com/yuanfangyoushan/article/details/102730463

版权

本文介绍如何在Vue项目中实现表单联动效果，当选择不同学院时，专业下拉框动态更新。使用了Element UI库，但也可适配普通HTML标签。通过监听select组件的选择变化，更新相关数据，实现数据驱动视图的更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

在这里插入图片描述
默认选择是计算机学院软件工程，当把第一个下拉框选项改为通信与信息工程学院时
，后边的下拉框选项变化，比如第一项变成了通信工程
注：使用了elemenui，若不需要，可以改成将标签改为普通HTML标签

实现过程：

select部分：用v-for加载选项列表，选择的选项改变时使用v-on:change定义一个方法跟踪选择值的变化

 <select v-on:change="indexSelectCollege($event)">
            <option v-for="(option1, index1) in college" :value="option1.text" :key="index1">{
   {
   option1.text}}</option>
          </select>
          <select v-on:change="indexSelectProfession($event)">
            <option v-for="(option2, index2) in professionList" :value="option2.text" :key="index2">{
   {
   option2.text}}</option>

method部分：默认选择设置字段 activeCollege和 activeProfession，设置初值后，每次选择改变时，改变他们的值（ activeCollege和 activeProfession是当前选择的学院以及专业）

methods: {
   
    indexSelectCollege (event) {
   
      this.joinForm.activeCollege = event.target.value
      console.log(this.joinForm.activeCollege)
    },
    indexSelectProfession (event) {
   
      this.joinForm.activeProfession = event.target.value
      console.log(this.joinForm.activeProfession)
    }
  }

watch部分，监视data中 activeCollege的变化情况， activeCollege变化时，遍历college数组，找出对应的profession数组，更新professionList数组

 watch: {
   
    'joinForm.activeCollege': function () {
   
      for

最低0.47元/天解锁文章