以下是使用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中定义了三个数据数组activityDatacheckInDatafeedbackData,分别表示活动说明、打卡统计和心得提交统计的数据。

handleTabClick方法中可以获取当前选中的选项卡的name属性值,可以根据需要进行相应的操作。

注意:以上示例需要确保已正确引入Vue2和Element UI的相关库文件

用classvue2elementui写一个页面页面使用tap切换tap头有3个为活动说明打卡统计心得提交统计tap内容为table

原文地址: https://www.cveoy.top/t/topic/hYT9 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录