记录：el-table手风琴expand-change事件触发数据请求时重复的问题

<template>

  <el-table ref="classTable" :data="classList" style="width: 100%" @expand-change="handleExpandChange">

    <el-table-column type="expand">

      <template slot-scope="props">

        <el-table :data="studentMap[props.row.id]" style="width: 100%">

          <el-table-column label="学号" align="center">

            <template slot-scope="scope">{{ scope.row.id }}</template>

          </el-table-column>

          <el-table-column label="学生姓名" align="center">

            <template slot-scope="scope">{{ scope.row.name }}</template>

          </el-table-column>

          <el-table-column label="年龄" align="center">

            <template slot-scope="scope">{{ scope.row.age }}</template>

          </el-table-column>

        </el-table>

      </template>

    </el-table-column>

    <el-table-column label="班级编号" align="center">

      <template slot-scope="scope">{{ scope.row.id }}</template>

    </el-table-column>

    <el-table-column label="班级简称" align="center">

      <template slot-scope="scope">{{ scope.row.name }}</template>

    </el-table-column>

    <el-table-column label="班级全称">

      <template slot-scope="scope">{{ scope.row.fullName }}</template>

    </el-table-column>

    <el-table-column label="班主任" align="center">

      <template slot-scope="scope">{{ scope.row.teacher }}</template>

    </el-table-column>

  </el-table>

</template>

<script>

export default {

  name: 'Table',

  data() {

    return {

      currentClassId: '',

      classList: [],

      studentMap: {},

      getRowKey(row) {

        console.log(row.id)

        return row.id

      },

      test: true

    }

  },

  created() {

    this.fetchClassList()

    this.fetchStudentClassMap()

  },

  methods: {

    fetchClassList() {

      this.classList = [{

        id: 'class-1',

        name: '软工1班',

        teacher: '于老师',

        fullName: '软件工程学院-软件工程-1班'

      }, {

        id: 'class-2',

        name: '计科1班',

        teacher: '张老师',

        fullName: '软件工程学院-计算机科学技术-1班'

      }, {

        id: 'class-3',

        name: '软工2班',

        teacher: '李老师',

        fullName: '软件工程学院-软件工程-2班'

      }, {

        id: 'class-4',

        name: '工商1班',

        teacher: '钱老师',

        fullName: '商学院-工商管理-1班'

      }]

    },

    fetchStudentClassMap() {

      this.studentMap = {

        'class-1': [

          {

            id: '20200101',

            name: '小范',

            age: 18

          }, {

            id: '20200102',

            name: '小王',

            age: 19

          }, {

            id: '20200103',

            name: '小李',

            age: 19

          }

        ],

        'class-2': [

          {

            id: '20200201',

            name: '小左',

            age: 18

          }, {

            id: '20200202',

            name: '小夏',

            age: 19

          }

        ],

        'class-3': [

          {

            id: '20200301',

            name: '小丁',

            age: 18

          }, {

            id: '20200302',

            name: '小杨',

            age: 19

          }

        ],

        'class-4': [

          {

            id: '20200401',

            name: '小许',

            age: 18

          }

        ]

      }

    },

    handleExpandChange(row, expandRows) {

      const $classTable = this.$refs.classTable

      console.log(row, expandRows);

      if (expandRows.length > 1) {

        expandRows.forEach(expandRow => {

          if (row.id !== expandRow.id) {

            $classTable.toggleRowExpansion(expandRow, false)

         setTimeout(() => {

        this.test = true

        console.log('click', row);

      });

          }

        })

      }

      this.currentClassId = row.id

      if(this.test)

setTimeout(() => {

        // this.test = true

        console.log('click', row);

      });

      this.test = false

    }

  }

}

</script>

<style>

    .demo-table-expand {

        font-size: 0;

    }

    .demo-table-expand label {

        width: 90px;

        color: #99a9bf;

    }

    .demo-table-expand .el-form-item {

        margin-right: 0;

        margin-bottom: 0;

        width: 50%;

    }

</style>