前言

最近在写项目的时候，有个使用 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 渲染的问题，为何我不先给这行数据里面加上一个我需要的数据，动态获取的数据直接丢进去，这样是不是就解决了呢？说干就干：** 第一步 **：原来的设置不变，稍微改动一下展开行 

<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>

第二步 ：获取外部 table 表数据的时候强制追加一个数据项

// 获取表数据
    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;
              }
            });
          });
      }
    }

这样就完美了，不论点开哪一行都是动态渲染哪一行的内嵌表数据。

附上精简了一下的整体代码供大家参考

<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>

希望对遇到相同问题的小伙伴有帮助，收工！