用classvue2elementui写一个页面页面使用tap切换tap头有3个为活动说明打卡统计心得提交统计tap内容为table
以下是使用class、Vue2和Element UI编写的页面示例:
<template>
<div class="container">
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="活动说明" name="activity">
<el-table :data="activityData" style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="打卡统计" name="checkIn">
<el-table :data="checkInData" style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="count" label="打卡次数"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="心得提交统计" name="feedback">
<el-table :data="feedbackData" style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="count" label="提交数量"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'activity',
activityData: [
{ date: '2022-01-01', description: '活动说明1' },
{ date: '2022-01-02', description: '活动说明2' },
{ date: '2022-01-03', description: '活动说明3' }
],
checkInData: [
{ date: '2022-01-01', count: 3 },
{ date: '2022-01-02', count: 5 },
{ date: '2022-01-03', count: 2 }
],
feedbackData: [
{ date: '2022-01-01', count: 10 },
{ date: '2022-01-02', count: 8 },
{ date: '2022-01-03', count: 12 }
]
};
},
methods: {
handleTabClick(tab) {
console.log(tab.name);
}
}
};
</script>
<style>
.container {
padding: 20px;
}
</style>
在上述示例中,我们使用了el-tabs组件来实现选项卡切换,每个选项卡使用el-tab-pane组件包裹,并通过label属性设置选项卡的显示文本,name属性表示选项卡的唯一标识。
每个选项卡的内容都是一个el-table组件,通过设置data属性绑定数据源,使用el-table-column组件定义表格列,通过prop属性指定数据字段,label属性设置列的标题。
在data中定义了三个数据数组activityData、checkInData和feedbackData,分别表示活动说明、打卡统计和心得提交统计的数据。
在handleTabClick方法中可以获取当前选中的选项卡的name属性值,可以根据需要进行相应的操作。
注意:以上示例需要确保已正确引入Vue2和Element UI的相关库文件
原文地址: https://www.cveoy.top/t/topic/hYT9 著作权归作者所有。请勿转载和采集!