el-card中打印分页总数信息

在 Vue.js 中的 Element UI 组件库（el-card）里，如果你想在卡片上显示分页的总数量信息，你可以使用 `<el-pagination>` 元素配合 `<template slot-scope="{ pageInfo }">` 来动态渲染内容。假设你已经在使用 Element UI 的数据分页组件。

首先，在你的 Vue 组件模板中引入 `<el-pagination>`：

<template>
  <div>
    <el-pagination :total="totalCount" :current-page="currentPage" @current-change="handleCurrentChange">
      <!-- 分页内容将插入到这里 -->
    </el-pagination>
    
    <!-- 在这里显示当前页面和总页数的信息 -->
    <el-card>
      <template slot-scope="scope">
        <div>共{{ scope.total }}条数据，当前第{{ scope.current }}页</div>
      </template>
    </el-card>
  </div>
</template>

然后，在你的 JavaScript 部分获取并存储总记录数 (`totalCount`) 和当前页码 (`currentPage`)，并在事件监听器 (`@current-change`) 中更新分页状态：

export default {
  data() {
    return {
      totalCount: 0,
      currentPage: 1,
    };
  },
  computed: {
    // 如果是从服务器获取的总记录数，可以在这里计算或获取
    totalRecords() {
      // 这里假设你有一个方法能获取总记录数
      if (!this.totalCount) {
        this.totalCount = this.fetchTotalRecords();
      }
      return this.totalCount;
    },
  },
  methods: {
    fetchTotalRecords() {
      // 实现从服务器或其他数据源获取总记录数的方法
      // ...
      return someNumber; // 假设返回的是一个数字
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
  },
};

记得在实际应用中替换 `fetchTotalRecords()` 方法来获取真正的分页总数。当分页总数发生变化时，`totalRecords` 计算属性会自动更新，从而在 `<el-card>` 中显示正确的信息。