d2admin框架里,使用了elementui组件,我想写一个多tab页的数据表格页面,点击不同的tab,根据点击tab的name去后端获取数据返回给前端,不同tab下的数据格式一样,你可以给我一个具体的例子吗
时间: 2024-05-07 08:16:27 浏览: 81
当然可以!你可以使用element-ui中的Tabs组件作为你的多Tab页的容器,并在每一个Tab对应的组件中使用element-ui中的Table组件来展示数据。当用户点击不同的Tab时,可以通过监听Tabs组件的change事件获取到当前Tab的name,然后发送对应的请求获取数据。以下是一个简单的示例代码:
```
<template>
<div>
<el-tabs @tab-click="handleTabClick">
<el-tab-pane label="Tab1" name="tab1">
<el-table :data="tab1Data"></el-table>
</el-tab-pane>
<el-tab-pane label="Tab2" name="tab2">
<el-table :data="tab2Data"></el-table>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
tab1Data: [],
tab2Data: []
}
},
methods: {
handleTabClick(tab) {
if (tab.name === 'tab1') {
// 发送请求获取tab1的数据,例如:
fetch('/api/tab1Data')
.then(response => response.json())
.then(data => this.tab1Data = data)
} else if (tab.name === 'tab2') {
// 发送请求获取tab2的数据,例如:
fetch('/api/tab2Data')
.then(response => response.json())
.then(data => this.tab2Data = data)
}
}
}
}
</script>
```
希望这个例子能够帮助你实现你想要的多Tab页的数据表格页面!
阅读全文