Vue2 使用 Element UI 实现选项卡切换及表格展示

以下是使用 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 的相关库文件。