vue分页获取数据总条数

要获取数据总条数，你需要先向后端发送请求，并在响应中获取到总条数。然后你可以在前端使用分页组件，如element-ui的el-pagination来实现分页功能。以下是一个简单的示例代码：

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    />
    <!-- 显示数据内容 -->
    <ul>
      <li v-for="(item, index) in tableData" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableData: []
      };
    },
    methods: {
      fetchData() {
        // 向后端发送请求获取数据
        axios
          .get('/api/data', {
            params: {
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
          })
          .then(res => {
            this.tableData = res.data.data;
            this.total = res.data.total;
          });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.fetchData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.fetchData();
      }
    },
    mounted() {
      this.fetchData();
    }
  };
</script>

在这个示例中，我们通过axios向后端发送请求获取数据，并在响应中获取到了总条数total和数据tableData。然后我们使用el-pagination组件来实现分页功能，并将total作为总条数传递给el-pagination组件。在分页组件的change事件中，我们可以根据用户选择的每页条数pageSize和当前页码currentPage来向后端发送请求获取对应的数据。