当前位置：首页 > VUE

vue mui实现分页

2026-02-20 05:25:29VUE

使用 Vue 和 MUI 实现分页功能

在 Vue 项目中结合 MUI（Material-UI）实现分页功能，可以通过以下步骤完成。这里假设使用的是 Vue 3 和 MUI 的 Vue 版本（如 @mui/material 或 @mui/core）。

安装依赖

确保项目中已安装 Vue 和 MUI 的相关依赖。如果尚未安装，可以通过以下命令安装：

npm install @mui/material @emotion/react @emotion/styled

如果需要使用 MUI 的图标，还需安装：

vue mui实现分页

npm install @mui/icons-material

引入分页组件

在 Vue 单文件组件中，引入 MUI 的分页组件 Pagination：

<template>
  <div>
    <Pagination 
      :count="totalPages" 
      :page="currentPage" 
      @change="handlePageChange"
    />
  </div>
</template>

<script>
import { Pagination } from '@mui/material';

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      currentPage: 1,
      totalPages: 10, // 根据实际数据动态计算
    };
  },
  methods: {
    handlePageChange(event, page) {
      this.currentPage = page;
      this.fetchData(); // 调用数据加载方法
    },
  },
};
</script>

动态计算总页数

根据后端返回的数据动态计算总页数。通常，后端会返回总数据条数和每页条数，可以通过以下公式计算：

vue mui实现分页

totalPages: Math.ceil(totalItems / itemsPerPage)

例如：

fetchData() {
  // 模拟 API 调用
  api.getItems(this.currentPage, this.itemsPerPage).then(response => {
    this.totalItems = response.total;
    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
    this.items = response.data;
  });
}

分页样式调整

MUI 的 Pagination 组件支持通过 sx 属性或 CSS 类名自定义样式。例如：

<template>
  <Pagination
    :count="totalPages"
    :page="currentPage"
    @change="handlePageChange"
    sx={{
      marginTop: '20px',
      display: 'flex',
      justifyContent: 'center',
    }}
  />
</template>

结合表格或列表

分页通常与表格或列表数据一起使用。以下是一个完整示例：

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <Pagination
      :count="totalPages"
      :page="currentPage"
      @change="handlePageChange"
    />
  </div>
</template>

<script>
import { Pagination } from '@mui/material';

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 0,
      items: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟 API 调用
      api.getItems(this.currentPage, this.itemsPerPage).then(response => {
        this.totalItems = response.total;
        this.items = response.data;
      });
    },
    handlePageChange(event, page) {
      this.currentPage = page;
      this.fetchData();
    },
  },
};
</script>