el-table tab切换 加载上次请求数据
时间: 2023-10-06 22:05:29 浏览: 244
解决vue中el-tab-pane切换的问题
5星 · 资源好评率100%
要实现这个功能,你需要做以下几件事:
1. 定义一个变量,用于保存当前选中的tab索引。
2. 在`mounted()`钩子中,判断是否存在上次请求的数据,如果存在,则将数据渲染到对应的tab中。
3. 监听tab切换事件,当tab切换时,更新当前选中的tab索引,并根据索引值重新发送请求获取数据。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
tableData: null,
requestData: [
{ name: 'John', age: 28, gender: 'Male' },
{ name: 'Jane', age: 23, gender: 'Female' }
]
}
},
mounted() {
if (this.requestData[this.activeTab]) {
this.tableData = this.requestData[this.activeTab]
}
},
methods: {
handleTabClick(index) {
this.activeTab = index
if (this.requestData[this.activeTab]) {
this.tableData = this.requestData[this.activeTab]
} else {
// 发送请求获取数据
axios.get('/api/data', { params: { tab: index } }).then(res => {
// 将数据保存到requestData中
this.requestData[index] = res.data
// 将数据渲染到对应的tab中
this.tableData = res.data
})
}
}
}
}
</script>
```
在这个示例代码中,我们使用了一个数组`requestData`来保存每个tab请求的数据,如果该tab之前已经请求过数据,则直接从数组中取出数据渲染即可,否则重新发送请求获取数据,并将数据保存到数组中,以便下次使用。
阅读全文