你可以帮我封装一个有tabs切换功能的table嘛
时间: 2024-03-17 09:43:31 浏览: 65
可以切换的tab框
当然可以,我可以为您提供一个简单的封装有tabs切换功能的table的示例代码。这个示例代码基于Vue.js框架和Element UI组件库,您可以在此基础上进行修改和扩展。以下是示例代码:
```html
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClickTabs">
<el-tab-pane label="Tab1" name="tab1">
<el-table :data="tableData1" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="Tab2" name="tab2">
<el-table :data="tableData2" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeName: 'tab1',
tableData1: [
{
date: '2022-01-01',
name: '张三',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2022-01-02',
name: '李四',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2022-01-03',
name: '王五',
address: '上海市普陀区金沙江路 1519 弄'
}
],
tableData2: [
{
date: '2022-01-01',
name: '赵六',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2022-01-02',
name: '钱七',
address: '上海市普陀区金沙江路 1515 弄'
},
{
date: '2022-01-03',
name: '孙八',
address: '上海市普陀区金沙江路 1514 弄'
}
]
};
},
methods: {
handleClickTabs(tab) {
console.log(tab);
}
}
};
</script>
```
在上面的代码中,我们使用了Element UI中的`el-tabs`和`el-table`组件,`el-tabs`组件用于实现tabs切换功能,`el-table`组件用于渲染表格数据。我们通过`v-model`绑定`activeName`变量实现选项卡的选中状态和切换,同时通过`@tab-click`事件监听选项卡的点击事件,可以在事件处理函数中实现一些逻辑操作。以上代码仅为示例,您可以根据自己的需求进行修改和扩展。
阅读全文