当前位置：首页 > VUE

vue实现分页缩进

2026-03-30 10:39:07VUE

Vue 实现分页缩进的方法

在 Vue 中实现分页缩进可以通过多种方式完成，包括使用 CSS 样式、组件封装或第三方库。以下是几种常见的方法：

使用 CSS 控制缩进

通过 CSS 的 margin 或 padding 属性实现分页内容的缩进效果。例如，为分页容器添加左缩进：

<template>
  <div class="pagination-container">
    <div v-for="page in pages" :key="page" class="page-item">
      {{ page }}
    </div>
  </div>
</template>

<style>
.pagination-container {
  margin-left: 20px; /* 缩进距离 */
}
.page-item {
  padding: 8px 12px;
}
</style>

使用 Vue 组件封装

封装一个可复用的分页组件，支持通过 props 动态设置缩进值：

<template>
  <div :style="{ marginLeft: indent + 'px' }">
    <button 
      v-for="page in totalPages" 
      :key="page"
      @click="changePage(page)"
    >
      {{ page }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    totalPages: Number,
    indent: {
      type: Number,
      default: 0 // 默认缩进为 0
    }
  },
  methods: {
    changePage(page) {
      this.$emit('page-change', page);
    }
  }
};
</script>

结合第三方库（如 Element UI）

若使用 Element UI 的分页组件，可通过自定义样式或插槽实现缩进：

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    :style="{ marginLeft: '30px' }"
    @current-change="handlePageChange"
  />
</template>

<script>
import { ElPagination } from 'element-ui';

export default {
  components: { ElPagination },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

动态响应式缩进

通过计算属性或响应式数据动态调整缩进值，例如根据屏幕宽度适配：

vue实现分页缩进

<template>
  <div :style="{ marginLeft: computedIndent + 'px' }">
    <!-- 分页内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseIndent: 20,
      screenWidth: window.innerWidth
    };
  },
  computed: {
    computedIndent() {
      return this.screenWidth < 768 ? this.baseIndent / 2 : this.baseIndent;
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.screenWidth = window.innerWidth;
    });
  }
};
</script>