Element UI 中如何重新渲染组件

某些情况下组件需要在没有数据的情况下预先加载到页面上，如 el-table，此时若通过其他手段刷新了数据，该组件并不会立即重载，要解决这个问题，可为组件指定一个 key ，在数据被刷新后修改 key 的值，即可触发组件刷新机制。

例：el-table 展开后从外部获取数据并重载内部的 el-table：

<el-table
  border stripe
  :data="data"
  @expand-change="onExpandSelected">
  <el-table-column type="expand">
    <template slot-scope="scope">
      <el-table
        border stripe
        max-height="400"
        :key="timeStamp"
        :data="scope.row.fileList">
        <el-table-column label="文件名">
          <template slot-scope="props">
            {{ props.row.file }}
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-table-column>
</el-table>

onExpandSelected(row, expandedRows) {
  if (!row.fileList) {
    this.getChangeFileList(row);
  }
  if (expandedRows.length > 1) {
    for (let epRow of expandedRows.filter(item => item !== row)) {
      this.$refs.changeList.toggleRowExpansion(epRow, false);
    }
  }
},
async getChangeFileList(row) {
  let req_url = '';
  await axios.get(req_url)
    .then(res => {
      if (res.data.status === 'success') {
        row.fileList = res.data.fileList;
        // 重设内部 el-table 的 key 值，手动触发组件的重载机制
        this.timeStamp = new Date().getTime();
      }
    })
    .catch(function (err) {
      self.$message.error(err);
    });
}