踩坑vue table点击当行获取展开行的接口数据

时隔很久复盘一下这个问题。当时遇到了，虽然按照自己的常规写法。但是出现了一个不知道如何解决的问题----点击三次才能正常获取到数据。不知道如何产生的这种情况。但是目前先整理出来可以正常获取出来的正确操作

    <!-- 表格主体部分 -->
    <el-main class="table-container">
      <div class="tableBox" :style="height" >
        <el-table :data="tableData" style="width: 100%" height="100%" ref="topicTable" v-loading="loading"
        @expand-change="expandChange"  >
        <!-- @row-click="open" :row-key="getRowKeys" :expand-row-keys="expandRowKeys"-->
          <el-table-column type="expand">
            <template slot-scope="props">
              <div style="background-color:rgba(242, 243, 247);width:100%;padding:12px;">
                <el-table class="table-content " :data="props.row.expandTableData"  v-loading="props.row.expandLoading" >
                  <el-table-column align="center" :show-overflow-tooltip="true" label="小区名称" prop='villageName'></el-table-column>
                  <el-table-column align="center" :show-overflow-tooltip="true" label="数据来源" prop='sourceName'></el-table-column>
                  <el-table-column align="center" :show-overflow-tooltip="true" label="是否展开分类" prop='isClassify'></el-table-column>
                  <el-table-column align="center" :show-overflow-tooltip="true" label="分类等级" prop='correct'>
                    <template slot-scope="scope">
                      {{ getBackGrade(scope.row) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :show-overflow-tooltip="true" label="评定年份" prop='year'>
                    <template slot-scope="scope">
                      <span v-if="scope.row.year==''||scope.row.year==null">无</span>
                      <span v-else>{{scope.row.year}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :show-overflow-tooltip="true" label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" icon="el-icon-edit" @click="editModal(scope.row)" style="color:#4D81E1" size="small" v-if="scope.row.bb==0" :disabled='false'>编辑</el-button>
                      <el-button type="text" icon="el-icon-edit" @click="editModal(scope.row)" style="color:#4D81E1" size="small" v-else :disabled='true'>编辑</el-button>
                      <el-button type="text" icon="el-icon-menu" @click="showModal(scope.row)" style="color:#4D81E1" size="small">详情</el-button>
                      <el-button type="text" icon="el-icon-delete" @click="delModal(scope.row)" style="color:#4D81E1" size="small" v-if="scope.row.bb==0" :disabled='false'>删除</el-button>
                      <el-button type="text" icon="el-icon-delete" @click="delModal(scope.row)" style="color:#4D81E1" size="small" v-else :disabled='true'>删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" :show-overflow-tooltip="true" label='镇街' prop="zj"></el-table-column>
          <el-table-column align="center" :show-overflow-tooltip="true" label="社区" prop="communityName"></el-table-column>
          <el-table-column align="center" :show-overflow-tooltip="true" label="小区数量" prop="xqzs"></el-table-column>
          <!-- <el-table-column align="center" :show-overflow-tooltip="true" label="小区户数" prop="zhs"></el-table-column> -->
          <el-table-column align="center" :show-overflow-tooltip="true" label="操作">
            <template slot-scope="scope">
              <!-- 0可删 1不可删 -->
              <el-button type="text" icon="el-icon-delete"  style="color:#4D81E1" size="small" v-if="scope.row.auditFlag==0" :disabled='false'  @click="communityNameDelete(scope.row)">删除</el-button>
              <el-button type="text" icon="el-icon-delete"  style="color:#4D81E1" size="small" v-else  :disabled='true' @click="communityNameDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>

data(){
 return{
      tableData: [],//表格数据
      expandTableData:[],//表格展开行数据
      loading:true,//表格loading
      }
  }

  methods:{
    //展开行
    expandChange (row, expandedRows) {
      console.log(row);
      console.log(expandedRows);
      row.expandLoading = true;
      if (expandedRows.length > 0) { //展开行
      // 调取小区的接口
      var param = {
        pageNum: 0,
        pageSize: 0,
        // 以上是必传的参数，以下是选传的参数
        communityId:row.communityId,//communityId
        villageName: this.keyWord,
        isVillage: '小区',
        sf: this.sf,
        db: this.db,
        qt: this.qt,
        sjsf: this.sjsf,
        sxjsf: this.sxjsf,
        qjsf: this.qjsf,
        streetNameList: this.checkedCities1,
        villageTypeList: this.villageTypeList,//等级分类
      };
        this.$axios.post(this.MICRO_CONFIG.baseUrl + "/regionEnum/selectVillageBasic", param).then(result => {
          row.expandTableData = result.data.data
          row.expandLoading = false;
        })
      } else { //关闭行
        row.expandTableData = []; //清空当前行子列表数据
      }
    },
    //根据查询条件查询数据
    search () {
      this.loading = true
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // 以上是必传的参数，以下是选传的参数
        villageName: this.house,//小区名字
        communityName:this.community,//社区名字
        streetName: this.street,//筛选条件为镇街
        isVillage: '小区',//筛选条件为小区
        sf: this.sf,
        db: this.db,
        qt: this.qt,
        sjsf: this.sjsf,
        sxjsf: this.sxjsf,
        qjsf: this.qjsf,
        // villageTypeList: this.villageTypeList,//等级分类
      };
      this.tableData = []
      this.$axios.post(this.MICRO_CONFIG.baseUrl + "/regionEnum/selectCommunityName", param).then(res => {
          const dataList = res.data.data
        if(param.villageName!=''){// 1.根据关键词house进行搜索,有House关键词，列表才进行展开
          dataList.forEach(item=>{//2. 根据house关键词搜索结果返回需要用到的id,给expand-row-keys数组push想要展开的行id
            this.expandRowKeys.push(item.communityId)
          })
        }
        this.loading = false
        dataList.forEach(item=>{
          this.tableData.push({
            index:item.rownum,
            zj:item.zj,//
            communityName:item.communityName,//
            xqzs:item.xqzs,
            communityId:item.communityId,
            expandLoading:true,
            expandTableData:[],//展开的数据
            auditFlag:item.auditFlag,//
          })
        })
        // this.tableData = res.data.data
        this.total = res.data.total
        this.sf = ''
        this.db = ''
        this.qt = ''
        this.sjsf = ''
        this.sxjsf = ''
        this.qjsf = ''
      })
      // this.getStatistical(param)
    },
  }