Vue(ElementUI)解决如何在tab选项卡中设计表格并回显时候勾选对应的复选框

最近有应该问题困扰了我，就是如何在vue的tab标签内设置表单且完成对表格的回显和勾选操作

先上实现后的效果图

先看界面的代码

 
    
      

      

        重 置
        取 消
        确 定
      
    

tab标签用法可以通过官方文档查看，不是本文的重点

通过activeName来选中第几个选项卡，如可以通过下面设置，打开时候始终在第一个选项卡

activeName: "first",

重点讲几个函数

selecthandleClick：通过这个方法可以知道选中了那个选项卡，并通过index值来对其进行一系列的操作(第一个选项卡的index值是0，后面递增)

selecthandleClick(tab, event) {
    console.log(tab, event);
    //tab转换奥在点击对应的也的时候，发起对应的请求，不然可能会造成网络堵塞，通过观察打印的index值来判断是宁一个标签
    if (tab.index == 1){
		console.log("第二个选项卡");
    }
},

handleSelectionChange:表格选中复选框，会打印选中复选框的id（是一个数组）

handleSelectionChange1:function(val) {
    console.log(val);
    this.multipleSelection = val;
},

toggleRowSelection：勾选函数，把对应的表格的复选框勾选上

toggleRowSelection(row, selected) {
    this.store.toggleRowSelection(row, selected, false);
    this.store.updateAllSelected();
},

实际操作

formDataRowId：这个是打开编辑框弹出tab前的学生id，通过这个id来获取其班级的id数组，这个是一个全局变量，每次使用后都会变成-1（相当于无效），等待下次打开重新赋值

multipleTable：是班级表格的ref值

注意：在打开选项卡二的时候，才完成勾选的数据回显，避免网络堵塞的情况

selecthandleClick(tab, event) {
      console.log(tab, event);
      //tab转换奥在点击对应的也的时候，发起对应的请求，不然可能会造成网络堵塞，通过观察打印的index值来判断是宁一个标签
       if (tab.index == 1){
          if (formDataRowId !=null && formDataRowId != -1){
            //发送ajax请求，查询所有的班级信息
            this.axios({
              method: "GET",
              url: "/v1/classes/findall",
              data: {},
            }).then((res) => {
              //console.log(res.data)
              this.$data.loading = false;
              let code = res.data.code;
              if (code == 200) {
                this.dialogAddFormVisible = true;
                //console.log(res.data);
                this.formData = res.data.data;
              }
            }).catch((error) => {
              console.log(error)
            });
            //回显学生的班级
//发送ajax请求，查询学生的班级信息
            this.axios({
              method: "GET",
              async:"true",
              url: "/v1/student/findClassesIdsByStudentId"+"?id=" + formDataRowId,
              data: {},
            }).then((res) => {
              this.$data.loading = false;
              let code = res.data.code;
              if (code == 200) {
                this.dialogAddFormVisible = true;
                //console.log(res.data)
                let arr = res.data.data;
                this.formData.forEach(row => {
                  for (let j in arr) {
                    //console.log(arr[j])
                    if (row.id == arr[j]) {
                      //把对应的数据回显的时候，勾选上
                      this.$nextTick(() => {
                        this.$refs.multipleTable.toggleRowSelection(row,true);
                      });
                      break;
                    }
                  }
                  formDataRowId = -1;
                })
              }
            }).catch((error) => {
              console.log(error)
            });
          }
       }
       }
    },