Element UI 中如何重新渲染组件
某些情况下组件需要在没有数据的情况下预先加载到页面上,如 el-table,此时若通过其他手段刷新了数据,该组件并不会立即重载,要解决这个问题,可为组件指定一个 key ,在数据被刷新后修改 key 的值,即可触发组件刷新机制。例:el-table 展开后从外部获取数据并重载内部的 el-table:<el-tableborder stripe:data="data"@expand-chan
·
某些情况下组件需要在没有数据的情况下预先加载到页面上,如 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);
});
}
更多推荐
已为社区贡献2条内容
所有评论(0)