某些情况下组件需要在没有数据的情况下预先加载到页面上,如 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);
    });
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐