0
点赞
收藏
分享

微信扫一扫

el-Dropdown 两个下拉框之间的动态绑定 实现默认选中值

全栈学习笔记 2022-12-26 阅读 108
vue.jsjavascriptelementui下拉框缓存OpenStack云计算


目录

​​业务场景​​

​​官方链接​​

​​实现效果​​

​​使用框架​​

​​代码展示​​

​​template代码​​

​​script代码​​

​​变量定义​​

​​事件定义​​

​​onMounted事件​​

​​courseClass事件--课程班级绑定​​

​​defaultValue事件​​

​​optionChange事件​​

​​changeClass事件​​

        ​​为什么要给课程的每个选项也绑定click事件？作用是什么？​​

​​classChange事件​​

​​getIndex事件​​

​​完整代码​​

​​总结​​

业务场景

有时候我们在项目中可能多个下拉框之间的数据具有一个级联绑定关系，通过切换某个下拉框的选项值之后，另一个下拉框的中的选项也随之改变。

这个在项目中是经常使用到的一种场景，今天我来分享分享我们具体的实现和需要注意的一些点

官方链接

Checkbox 多选框：​​Checkbox 多选框 | Element Plus​​

实现效果

这篇博客要实现的是课程和班级的一个绑定关系，当页面加载之后给课程和班级下拉框一个默认值，通过切换课程班级下拉框中的选项之后班级下拉框中的选项也随之变换成，当前选中课程下的所有班级名

el-Dropdown 两个下拉框之间的动态绑定 实现默认选中值_vue.js

使用框架

Vue3+element-plus(1.2.0-beta.5)

代码展示

template代码

<!-- 课程 -->
      <span style="margin-left: 110px">课程：</span>
      <el-select
        v-model="allCourse"
        filterable
        placeholder="请选择课程"
        @change="optionChange()"
      >
        <el-option
          v-for="(item, index) in courseOptions"
          :key="item.value"
          :label="item.label"
          :value="{ value: item.value, label: item.label }"
          @click="changeClass(index)"
        />
      </el-select>

<!-- 班级 -->
      <span style="margin-left: 80px">班级：</span>
      <el-select
        v-model="allClass"
        filterable
        placeholder="请选择班级"
        @change="classChange()"
      >
        <el-option
          v-for="item in classOptions"
          :key="item.value"
          :label="item.label"
          :value="{ value: item.value, label: item.label }"
        />
      </el-select>

script代码

变量定义

//课程
const allCourse = ref("");

//班级
const allClass = ref({
    id: "",
    name: "",
});

//课程选项
const courseOptions = ref([]);

//班级选项
const classOptions = ref([]);

事件定义

onMounted事件

当页面一加载就对课程和班级下拉框赋一个默认值

这里的课程ID和班级ID的变量是从缓存中获取的，你们也可以修改成自己需要的

onMounted(() => {
      console.log("进入到onMounted了");

      courseClass();
      classID.value = localStorage.getItem("classId");
      courseID.value = localStorage.getItem("courseId");

      //班级名称
      coursename.value = localStorage.getItem("className");
      //课程名称
      coursename.value = localStorage.getItem("courseName");
      
    });

courseClass事件--课程班级绑定

在实例中班级和课程的信息是调用后端接口获取到的。

el-Dropdown 两个下拉框之间的动态绑定 实现默认选中值_vue.js_02

//课程-班级级联
async function courseClass() {
      try {
        await getCourseIdAndClassId({
          cookie: localStorage.getItem("cookie"),
          userCode: localStorage.getItem("phone"),
          status: "teach",
        }).then((res) => {
          CourseAndClass.value = res;
          // for循环将所有的课程id与name组成courseOptions
          for (let i = 0; i < res.length; i++) {
            var o = new Object();
            o.value = res[i].id;
            o.label = res[i].name;
            o.classInfo = res[i].classInfo;
            courseOptions.value.push(o);
          }
          // 获取缓存中的值
          defaultValue();
        });
      } catch (error) {
        console.log(error);
      }
}

defaultValue事件

// 课程与班级下拉框的默认值
function defaultValue() {
      //为下拉框进行一个默认选中功能
      var index = courseOptions.value.findIndex((item) => {
         //判断当前遍历元素的label值(课程名称)是否与缓存中的一致
        if (item.label == localStorage.getItem("courseName")) {
          //一致，返回true，并且将当前元素的index赋值给变量
          return true;
        }
      });

      //获取课程数组中指定索引的课程
      allCourse.value = courseOptions.value[index];

      // 获取class
      getIndex(index);
      //为下拉框进行一个默认选中功能
      var proNum = classOptions.value.findIndex((item) => {
       //判断当前遍历元素的label值(班级名称)是否与缓存中的一致
        if (item.label == localStorage.getItem("className")) {
          //一致，返回true，并且将当前元素的index赋值给变量
          return true;
        }
      });

      //获取课程数组中指定索引的班级
      allClass.value = classOptions.value[proNum];
}

optionChange事件

// 课程选择器的变化事件
async function optionChange() {
      // 清空当前班级的下拉框
      allClass.value = [];
}

changeClass事件

//重选课程后，班级为重选课程的第一个班级
    function changeClass(index) {
      searchContent.value = "";
      //班级为默认班级
      getIndex(index);
      allClass.value = classOptions.value[0];

      //课程总时长和已推送活动总时长
      courseID.value = allCourse.value.value;
      classID.value = allClass.value.value;
      coursename.value = allCourse.value.label;
      classname.value = allClass.value.label;
      courseAllTime(courseID.value);
      pushedActivityTime(classID.value, courseID.value);

      //表格数据
      currentPage.value = 1;
      studentData(
        allClass.value.value,
        courseOptions.value[index].value,
        currentPage.value,
        pageSize.value
      );
      //更新导出Excel
      tableData.value = [];
      getAllStuStudying(courseID.value, classID.value);
      excelHandle(true);
      //导出Excel时文件名称
      title.value =
        coursename.value + "--" + classname.value + "--学生学习数据";
    }

为什么要给课程的每个选项也绑定click事件？作用是什么？

这里想要实现的效果是当对课程下拉框重新选择之后，班级下拉框也能够实现同步改变，给一个默认选项。从整体业务场景来看，防止用户在选择了课程下拉框之后班级下拉框不改变，给用户造成触发事件失效等现象

classChange事件

//班级改变重新获取值进行存储
async function classChange() {
      //存储课程与班级id，到变量中
      courseID.value = allCourse.value.value;
      classID.value = allClass.value.value;
      coursename.value = allCourse.value.label;
      classname.value = allClass.value.label;     
}

getIndex事件

// 单击下拉框
function getIndex(index) {
      // 获取课程中的索引进行查询到该课程下的班级
      var body = CourseAndClass.value[index].classInfo;
      classOptions.value = [];
      for (let i = 0; i < body.length; i++) {
        var o = new Object();
        o.value = body[i].id;
        o.label = body[i].name;
        classOptions.value.push(o);
      }
}

完整代码

<template>
  <div>
    <div style="color: #409eff; font-size: 20px">
      <!-- 课程 -->
      <span style="margin-left: 110px">课程：</span>
      <el-select
        v-model="allCourse"
        filterable
        placeholder="请选择课程"
        @change="optionChange()"
      >
        <el-option
          v-for="(item, index) in courseOptions"
          :key="item.value"
          :label="item.label"
          :value="{ value: item.value, label: item.label }"
          @click="changeClass(index)"
        />
      </el-select>

      <!-- 班级 -->
      <span style="margin-left: 80px">班级：</span>
      <el-select
        v-model="allClass"
        filterable
        placeholder="请选择班级"
        @change="classChange()"
      >
        <el-option
          v-for="item in classOptions"
          :key="item.value"
          :label="item.label"
          :value="{ value: item.value, label: item.label }"
        />
      </el-select>
    </div>
  </div>


</template>

<script>
import { reactive, ref, onMounted } from "vue";
import { Grid } from "@element-plus/icons-vue";
import {
  getAllChapterTimeByCourseId,
  getCourseIdAndClassId,
} from "@/api/CourseAndClassAndStudentManage/CourseManage";

export default {
  components: {
    Grid,
  },
  setup() {

    //课程
    const allCourse = ref("");
    
    //班级
    const allClass = ref({
        id: "",
        name: "",
    });
    
    //课程选项
    const courseOptions = ref([]);
    
    //班级选项
    const classOptions = ref([]);


    onMounted(() => {
      console.log("进入到onMounted了");

      courseClass();
      classID.value = localStorage.getItem("classId");
      courseID.value = localStorage.getItem("courseId");

      //班级名称
      coursename.value = localStorage.getItem("className");
      //课程名称
      coursename.value = localStorage.getItem("courseName");
      
    });

    
   // 课程选择器的变化事件
  async function optionChange() {
      // 清空当前班级的下拉框
      allClass.value = [];
  }

    
    //班级改变重新获取值进行存储
  async function classChange() {
          //存储课程与班级id，到变量中
          courseID.value = allCourse.value.value;
          classID.value = allClass.value.value;
          coursename.value = allCourse.value.label;
          classname.value = allClass.value.label;     
  }

    

   // 课程与班级下拉框的默认值
  function defaultValue() {
          //为下拉框进行一个默认选中功能
          var index = courseOptions.value.findIndex((item) => {
             //判断当前遍历元素的label值(课程名称)是否与缓存中的一致
            if (item.label == localStorage.getItem("courseName")) {
              //一致，返回true，并且将当前元素的index赋值给变量
              return true;
            }
          });
    
          //获取课程数组中指定索引的课程
          allCourse.value = courseOptions.value[index];
    
          // 获取class
          getIndex(index);
          //为下拉框进行一个默认选中功能
          var proNum = classOptions.value.findIndex((item) => {
           //判断当前遍历元素的label值(班级名称)是否与缓存中的一致
            if (item.label == localStorage.getItem("className")) {
              //一致，返回true，并且将当前元素的index赋值给变量
              return true;
            }
          });
    
          //获取课程数组中指定索引的班级
          allClass.value = classOptions.value[proNum];
  }

    //重选课程后，班级为重选课程的第一个班级
    function changeClass(index) {
          //班级为默认班级
          getIndex(index);
         //给班级下拉框默认勾选第一个班级
          allClass.value = classOptions.value[0];
    
          //重新获取课程班级的ID和名称
          courseID.value = allCourse.value.value;
          classID.value = allClass.value.value;
          coursename.value = allCourse.value.label;
          classname.value = allClass.value.label;      
  }

    
    // 单击下拉框
  function getIndex(index) {
          // 获取课程中的索引进行查询到该课程下的班级
          var body = CourseAndClass.value[index].classInfo;
          classOptions.value = [];
          for (let i = 0; i < body.length; i++) {
            var o = new Object();
            o.value = body[i].id;
            o.label = body[i].name;
            classOptions.value.push(o);
          }
  }
    
   //课程-班级级联
    async function courseClass() {
          try {
            await getCourseIdAndClassId({
              cookie: localStorage.getItem("cookie"),
              userCode: localStorage.getItem("phone"),
              status: "teach",
            }).then((res) => {
              CourseAndClass.value = res;
              // for循环将所有的课程id与name组成courseOptions
              for (let i = 0; i < res.length; i++) {
                var o = new Object();
                o.value = res[i].id;
                o.label = res[i].name;
                o.classInfo = res[i].classInfo;
                courseOptions.value.push(o);
              }
              // 获取缓存中的值
              defaultValue();
            });
          } catch (error) {
            console.log(error);
          }
    }




    return {
      changeClass,
      courseID,
      classID,
      coursename,
      classname,    
      defalutCourse,
      defalutClass,    
      CourseAndClass,
      allCourse,
      courseOptions,
      allClass,
      classOptions,
      optionChange,
      classChange,
      defaultValue,
      courseClass,
      getIndex,
      loading,    
      checkBoxGroup,
      reload,

    };
  },
};
</script>

<style>


</style>

总结

多看官方文档，我们遇到的很多问题其实文档中都有详细说明。

如果有想要交流的内容欢迎在评论区进行留言，如果这篇文档受到了您的喜欢那就留下你点赞、收藏脚印支持一下博主~

举报

相关推荐

js判断一个下拉框的选中值是否改变

下拉框单选框Java编程语言

bootstrap实现下拉框dropdown选中select option 美爆了

Access下拉框官网HarmonyOS后端开发

解决下拉列表框默认选中值的问题

JSPList下拉列表框select标签Python后端开发

jQuery默认选中下拉框的某个值

JQuery公众号下拉框Java

关于layui的dropdown下拉框缓存问题修复

javajavascript浮点数计算

DataGridView里的下拉框绑定

serverasphtmlrss下拉框Linux系统/运维

css：鼠标经过el-dropdown 组件上会出现一个蓝色的小框

css页面刷新下拉菜单Html/CSS前端开发yyds干货盘点

EXT学习之——EXT下拉框默认绑定第一个值

下拉框编程语言

vue3通过el-dropdown实现动态菜单切换页面

vue.jsjavascript前端

el-select 下拉框 value绑定、多个值（欢迎大家补充）

elementuivue.jsjavascript
0 条评论