vue中分页的样式如何设置

发布时间：2026-09-28 08:30:35 阅读量： 27 来源： 互联网转载

在Vue中设置分页样式主要通过以下几种方式实现：1、使用内置组件库、2、手动编写样式、3、使用自定义分页组件。接下来我们将详细描述其中一种方式：使用内置组件库。

使用内置组件库（如Element UI）可以帮助我们快速实现分页功能，并且提供了丰富的样式自定义选项。下面是一个使用Element UI实现分页的例子。

一、使用内置组件库

使用内置组件库可以大大简化分页样式的设置过程。以下是使用Element UI库实现分页样式的详细步骤：

安装Element UI
引入Element UI
使用分页组件
自定义样式

1、安装Element UI

npm install element-ui --save

2、引入Element UI

在main.js文件中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3、使用分页组件

在你的Vue组件中使用Element UI的分页组件：

<template>
  <p>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </p>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

4、自定义样式

我们可以通过覆盖Element UI的默认样式来实现自定义分页样式：

<style scoped>
.el-pagination {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
}
.el-pagination .el-pager li.active {
  background-color: #409EFF;
  color: white;
}
</style>

二、手动编写样式

如果不想使用第三方库，可以手动编写分页组件及其样式。以下是详细步骤：

创建分页组件
设置基本样式
添加交互逻辑
优化样式

1、创建分页组件

<template>
  <p class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">Prev</button>
    <span v-for="page in totalPages" :key="page" @click="goToPage(page)" :class="{ active: page === currentPage }">{{ page }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </p>
</template>
<script>
export default {
  props: {
    totalPages: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit('update:currentPage', this.currentPage - 1);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit('update:currentPage', this.currentPage + 1);
      }
    },
    goToPage(page) {
      this.$emit('update:currentPage', page);
    }
  }
};
</script>

2、设置基本样式

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: none;
  background-color: #409EFF;
  color: white;
  cursor: pointer;
}
.pagination span {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}
.pagination span.active {
  background-color: #409EFF;
  color: white;
}
</style>

3、添加交互逻辑

在组件中已经实现了交互逻辑，包括上一页、下一页和跳转到指定页。

4、优化样式

可以根据实际需求进一步优化样式，比如添加动画效果、调整间距等。

三、使用自定义分页组件

使用自定义分页组件可以实现更灵活的样式和功能。以下是详细步骤：

创建自定义分页组件
传递必要参数
自定义样式
实现功能

1、创建自定义分页组件

<template>
  <p class="custom-pagination">
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <span v-for="page in pages" :key="page" @click="goToPage(page)" :class="{ active: page === currentPage }">{{ page }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </p>
</template>
<script>
export default {
  props: {
    totalPages: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  computed: {
    pages() {
      let pages = [];
      for (let i = 1; i <= this.totalPages; i++) {
        pages.push(i);
      }
      return pages;
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit('update:currentPage', this.currentPage - 1);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit('update:currentPage', this.currentPage + 1);
      }
    },
    goToPage(page) {
      this.$emit('update:currentPage', page);
    }
  }
};
</script>

2、传递必要参数

在使用该组件的父组件中传递必要的参数：

<template>
  <p>
    <custom-pagination :totalPages="10" v-model:currentPage="currentPage"></custom-pagination>
  </p>
</template>
<script>
import CustomPagination from './CustomPagination.vue';
export default {
  components: {
    CustomPagination
  },
  data() {
    return {
      currentPage: 1
    };
  }
};
</script>

3、自定义样式

<style scoped>
.custom-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: none;
  background-color: #409EFF;
  color: white;
  cursor: pointer;
}
.custom-pagination span {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}
.custom-pagination span.active {
  background-color: #409EFF;
  color: white;
}
</style>

4、实现功能

在自定义组件中已经实现了分页的基本功能，包括上一页、下一页和跳转到指定页。

四、总结与建议

通过本文的介绍，我们了解了在Vue中设置分页样式的几种方式：使用内置组件库、手动编写样式和使用自定义分页组件。每种方式都有其优点和适用场景。使用内置组件库可以节省时间并提供丰富的自定义选项，适合快速开发；手动编写样式则适用于对样式有特别要求的场景；使用自定义分页组件能够实现最灵活的功能和样式，适合复杂项目。

建议开发者根据实际项目需求选择合适的方式进行实现。在项目初期，可以优先选择成熟的组件库以加快开发进度；在项目后期或特定需求下，可以考虑手动编写样式或使用自定义组件来满足特定需求。希望本文能帮助您更好地掌握Vue中分页样式的设置方法。

vue中分页的样式如何设置

热门文章