Vue2+ElementUI 实现页面 Tab 切换和图片列表分页展示

"以下是使用class、vue2和elementui编写的一个页面示例：\n\nhtml\n<template>\n <div class="page">\n <el-tabs v-model="activeTab" @tab-click="handleTabClick">\n <el-tab-pane label="活动说明">\n <el-table :data="activityData" style="width: 100%">\n <el-table-column prop="name" label="名称"></el-table-column>\n <el-table-column prop="date" label="日期"></el-table-column>\n </el-table>\n </el-tab-pane>\n <el-tab-pane label="打卡统计">\n <el-table :data="attendanceData" style="width: 100%">\n <el-table-column prop="name" label="姓名"></el-table-column>\n <el-table-column prop="attendance" label="打卡次数"></el-table-column>\n </el-table>\n </el-tab-pane>\n <el-tab-pane label="心得提交统计">\n <div class="image-list">\n <div v-for="image in imageData" class="image-item">\n <img :src="image.url" :alt="image.alt" @error="handleImageError">\n </div>\n </div>\n <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize" :total="imageData.length" layout="prev, pager, next"></el-pagination>\n </el-tab-pane>\n </el-tabs>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n activeTab: '活动说明',\n activityData: [\n { name: '活动1', date: '2021-01-01' },\n { name: '活动2', date: '2021-02-01' },\n { name: '活动3', date: '2021-03-01' }\n ],\n attendanceData: [\n { name: '用户1', attendance: 10 },\n { name: '用户2', attendance: 15 },\n { name: '用户3', attendance: 8 }\n ],\n imageData: [\n { url: 'image1.jpg', alt: '图片1' },\n { url: 'image2.jpg', alt: '图片2' },\n { url: 'image3.jpg', alt: '图片3' },\n { url: 'image4.jpg', alt: '图片4' },\n { url: 'image5.jpg', alt: '图片5' },\n { url: 'image6.jpg', alt: '图片6' },\n { url: 'image7.jpg', alt: '图片7' },\n { url: 'image8.jpg', alt: '图片8' },\n { url: 'image9.jpg', alt: '图片9' },\n { url: 'image10.jpg', alt: '图片10' },\n { url: 'image11.jpg', alt: '图片11' },\n { url: 'image12.jpg', alt: '图片12' },\n { url: 'image13.jpg', alt: '图片13' },\n { url: 'image14.jpg', alt: '图片14' },\n { url: 'image15.jpg', alt: '图片15' }\n ],\n currentPage: 1,\n pageSize: 8\n };\n },\n methods: {\n handleTabClick(tab) {\n console.log(tab.label);\n },\n handleImageError(event) {\n event.target.src = 'error.jpg';\n },\n handlePageChange(page) {\n this.currentPage = page;\n }\n }\n};\n</script>\n\n<style>\n.page {\n padding: 20px;\n}\n\n.image-list {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.image-item {\n margin: 10px;\n}\n\n.image-item img {\n width: 100px;\n height: 100px;\n}\n\n.error {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n background-color: lightgray;\n color: white;\n font-size: 24px;\n}\n</style>\n\n\n在这个示例中，使用了el-tabs组件实现了tap切换，tap头部有3个为活动说明、打卡统计和心得提交统计。在每个tap的内容区域中，使用了el-table组件展示表格数据，并使用了v-for指令和el-pagination组件实现了图片列表和分页功能。默认图片为error.jpg，当图片加载失败时会显示该错误图片。\n\n请注意，你需要将示例中的图片路径和错误图片路径替换为你项目中实际的图片路径。