element ui表格組件 擴展行展開時通過@expand-change異步加載數據，頁面不更新問題，第一次展開沒有數據，第二次點擊顯示

摘自：https://msd.misuland.com/pd/4146263880261177365

前言

最近在寫項目的時候，有個使用el-table內嵌動態table的功能需求，也就是table內嵌table，同時里面的table數據是動態獲取的，動態獲取動態展開

問題

按照element的table里面的方法，行屬性設置了type=‘expand’，也在table里面添加了@expand-change="expandChange"事件監聽展開行事件，在監聽事件里面動態獲取數據賦值給里面展開的table， 問題出現了，第一次點開沒數據，第二次點開才有數據 ①：第一次點開效果 ②：第二次展開數據顯示出來

解決

看到這個其實都知道是dom數據渲染不同步造成的（沒有及時回顯），那么該怎么做呢？於是開始了自我嘗試以及度娘的過程，過程中發現了很多小伙伴也遇到了這樣的問題，也有很多方法： 1：使用this.$nextTick的， 2：使用v-if顯示隱藏內嵌table的， 3：有不使用@expand-change方法—改成toggleRowExpansion控制的， 但是最終這些方法或多或少都有問題，當時自己也是一臉懵逼不知道咋辦， 中午休息的時候突然靈光一閃，既然是dom渲染的問題，為何我不先給這行數據里面加上一個我需要的數據項，動態獲取的數據直接丟進去，這樣是不是就解決了呢？說干就干： 第一步：原來的設置不變，稍微改動一下展開行

 

<template>
  <div class="common-page">
    <el-table
      class="common-table"
      :data="tableData"
      style="width: 100%"
      stripe
      border
      @expand-change="expandChange"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.ruleItemData" border stripe style="width: 100%">
            <el-table-column prop="questioncount" label="試題數量"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="regionName" label="地區"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { rule } from "@/api/api";
export default {
  data() {
    return {
      queryForm: {},
      tableData: []
    };
  },
  created() {
    this.queryData();
  },
  methods: {
    // 獲取表數據
    queryData() {
      rule.selectByPage(this.queryForm).then(res => {
        if (res) {
          //給每行數據強制追加一個數據項
          res.content.list.map(item => {
            item.ruleItemData = [];
          });
          this.tableData = res.content.list;
        }
      });
    },
    // 展開事件----動態獲取內嵌表數據
    expandChange(row, expandedRows) {
      // 該處是用於判斷是展開還是收起行，只有展開的時候做請求，避免多次請求！
      // 展開的時候expandedRows有值，收起的時候為空.
      if (expandedRows.length > 0) {
        rule
          .itemSelectByRuleID({
            examruleid: row.id
          })
          .then(res => {
            // 遍歷當前頁面表
            this.tableData.forEach((temp, index) => {
              // 找到當前點擊的行，把動態獲取到的數據賦值進去
              if (temp.id === row.id) {
                this.tableData[index].ruleItemData = res.content;
              }
            });
          });
      }
    }
  }
};
</script>

<style>
</style>