若依框架element多选框组件延迟显示的简单解决方法

一、问题描述：

学习Vue两天，记录一下本小白使用若依框架Vue开发网页时遇到的一个小问题。

当在若依中写Vue网页时使用了一个element多选框组件，从后端获得数据并且绑定到多选框，具体代码如下（cv公司前辈的）：

      <div class="wrap">
        <el-tag>选择班级</el-tag>
        <div class="content" style="margin-left: 15px;">
          <template v-if="grades!=0 && grades.length>0">
            <div class="item" v-for="(first,firIndex) in grades">
              <div class="itemHeader">
                <div v-cloak>{{first.gradeName}}</div>
                <div class="allCheck">
                  <el-checkbox
                    v-model="first.list"
                    @change="firstChanged(firIndex,first.grade)"
                    :label="first.gradeName"
                  >全选</el-checkbox>
                </div>
                <div class="itemContent">
                  <template v-for="(second,index) in first.classesList">
                    <el-checkbox
                      v-model="second.list"
                      @change="secondChanged(firIndex,second.id)"
                      :title="second.className"
                      :label="second.id"
                    >{{second.className}}</el-checkbox>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>

       
//将取得的数据进行属性绑定
        res => {
          if(res.code == 0){
            // console.log(res)
            this.grades=res.responseData;
            // // 检验返回数据是否进入grades
            // console.log(this.grades)
            if(res.code==0 && res.responseData !== null){
              var list =res.responseData;
              for (var i=0;i<list.length;i++){
                list[i]["abc"] = false;
                for (var j=0;j<list.length;j++){
                  list[i].classesList[j]["abc"] = false;
                }
              }
              this.grades = list;
              console.log(this.grades)
            }
          }



    // 一级change事件
    firstChanged(index) {　　　　　　　　//一级未选中 则对应的二级都不选中
      if (this.grades[index].list == false) {
        var classesList = this.grades[index].classesList;
        if (classesList) {
          for (var i = 0, len = classesList.length; i < len; i++) {
            classesList[i].list = false;
          }
        }　　　　　　　　//一级选中  则对应的二级都选中
      } else if (this.grades[index].list = true) {
        var childrenArray = this.grades[index].classesList;
        if (childrenArray) {
          for (var i = 0, len = childrenArray.length; i < len; i++) {
            childrenArray[i].list = true;
          }
        }
      }

    },
    //二级change事件
    secondChanged(firIndex) {
      var childrenArray = this.grades[firIndex].classesList;
      var tickCount = 0,
        unTickCount = 0,
        len = childrenArray.length
      for (var i = 0; i < len; i++) {
        if (childrenArray[i].list == true) {
          tickCount++;
        }
        // if (childrenArray[i].list == false) {
        //   unTickCount++;
        // }
      }
      if (tickCount == len) { //二级全勾选  一级勾选
        this.grades[firIndex].list= true;
      } else {//二级未全选  一级不勾选
        this.grades[firIndex].list = false;
      }

    }

代码生成的多选框在前端显示没有问题，但是点击同一行多选框时会没有反应，点击另外一行多选框时之前点击的多选框会统一改变选中状态。

二、问题分析

问题在于当我们执行一个change方法时，虽然后端执行了方法，表单却没有更新多选框的状态。所以只需要更新表单信息，就可以解决页面延迟更新的状态。

三、问题解决

本人学习时间尚短，只能提供一个比较笨的方法：在表单中写一个没有内容的组件，绑定一个重置方法，将其方法写在change方法的最后。这样我们每次执行change方法都可以更新一次表单，如此就能实现每次执行change方法都强制更新一次表单。

以下是一个简单示例：

<template>：

    <el-form ref="workInsertForm" :model="workInsert1" >
    </el-form>

<script>

      // 工具表（跑多选框）
      workInsert1:{
        workScore:'1',
      },


      //工具方法（跑多选框）
    resetForm1() {
      this.workInsert1={
        workScore:'1',
      }
    },

    // 一级change事件
    firstChanged(index) {　　　　　　　　//一级未选中 则对应的二级都不选中
      if (this.grades[index].list == false) {
        var classesList = this.grades[index].classesList;
        if (classesList) {
          for (var i = 0, len = classesList.length; i < len; i++) {
            classesList[i].list = false;
          }
        }　　　　　　　　//一级选中  则对应的二级都选中
      } else if (this.grades[index].list = true) {
        var childrenArray = this.grades[index].classesList;
        if (childrenArray) {
          for (var i = 0, len = childrenArray.length; i < len; i++) {
            childrenArray[i].list = true;
          }
        }
      }
      this.resetForm1()
    },
    //二级change事件
    secondChanged(firIndex) {
      var childrenArray = this.grades[firIndex].classesList;
      var tickCount = 0,
        unTickCount = 0,
        len = childrenArray.length
      for (var i = 0; i < len; i++) {
        if (childrenArray[i].list == true) {
          tickCount++;
        }
        // if (childrenArray[i].list == false) {
        //   unTickCount++;
        // }
      }
      if (tickCount == len) { //二级全勾选  一级勾选
        this.grades[firIndex].list= true;
      } else {//二级未全选  一级不勾选
        this.grades[firIndex].list = false;
      }
      this.resetForm1()
    }

添加了这样一个简单方法之后就不再有代码执行但是表单不更新的情况了。