ElementUI分页详解

三、ElementUI分页器样式修改

ElementUI默认的分页器样式可能会与某些网站的UI不一致，需要对其进行修改。可以通过以下方式来实现分页器样式的修改。

1、使用scoped样式：在使用分页器的组件中添加scoped样式，并对分页器中的class进行样式覆盖。

<template>
  <el-pagination
    v-model="currentPage"
    :current-page.sync="currentPage"
    :page-size="pageSize"
    :total="total"
    :page-size-choices="[10, 20, 30, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    class="my-pagination"
  >
  </el-pagination>
</template>
<style scoped>
.my-pagination {
  /* 样式覆盖 */
}
</style>

2、使用全局样式：在全局样式中对ElementUI中的分页器样式进行覆盖。

/* 全局样式 */
.el-pagination {
  /* 样式覆盖 */
}

四、ElementUI分页page不生效

在使用ElementUI分页器时，可能会遇到page属性不生效的情况。

解决这个问题可以尝试以下几个方法：

1、检查pageSize属性：分页器的pageSize属性设置的是每页显示的数据条数，如果pageSize过小，page就会失效。可以尝试将pageSize设置为更大的值，比如50，100。

2、检查total属性：分页器的total属性设置的是总数据条数，如果total设置不正确，就会影响到分页器的page属性。可以尝试修改total的值。

3、手动修改page：可以使用watch来监听pageSize和total属性的变化，并手动修改page。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-count="pageCount"
  layout="total, sizes, prev, pager, next, jumper"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
>
</el-pagination>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // 根据当前页码请求对应的数据
      // ...
    }
  },
  watch: {
    pageSize(newVal, oldVal) {
      this.currentPage = 1
    },
    total(newVal, oldVal) {
      this.currentPage = 1
    }
  }
}

五、ElementUI分页器

ElementUI分页器是网页中常见的一种组件，主要用于分页展示数据。在使用分页器时，需要注意以下几点：

1、分页器的total属性必须设置为总数据条数。

2、分页器的pageSize属性必须设置为每页显示的数据条数。

3、分页器的currentPage属性必须设置为当前页码。

4、分页器的@current-change事件必须绑定一个方法，用于监听页码变化。

5、分页器的layout属性用于设置分页器的布局，可以自定义。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-size-choices="[10, 20, 30, 50]"
  layout="total, sizes, prev, pager, next, jumper"
  @current-change="handleCurrentChange"
>
</el-pagination>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      // 根据当前页码请求对应的数据
      // ...
    }
  }
}

六、ElementUI分页二次封装

在实际开发中，我们会发现ElementUI提供的分页器并不满足我们的需求，需要对分页器进行二次封装。

封装的过程主要包括以下几个步骤：

1、封装分页器：将ElementUI分页器封装成一个组件，并对其进行扩展，添加一些自己需要的属性。

<template>
  <el-pagination
    v-model="currentPage"
    :current-page.sync="currentPage"
    :page-size="pageSize"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>
export default {
  name: 'MyPagination',
  props: {
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit('change', val)
    }
  }
}

2、引入组件：在需要使用分页器的组件中引入自定义的分页器组件，并绑定事件，以便在当前组件中监听页码变化。

<template>
  <my-pagination
    :page-size="pageSize"
    :current-page="currentPage"
    :total="total"
    @change="handleChange"
  >
  </my-pagination>
</template>
import MyPagination from '@/components/MyPagination'
export default {
  components: {
    MyPagination
  },
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      total: 0
    }
  },
  methods: {
    handleChange(page) {
      this.currentPage = page
      // 根据当前页码请求对应的数据
      // ...
    }
  }
}

七、ElementUI分页属性

在使用ElementUI分页器时，有一些属性是比较容易被忽略的。以下是常用的一些分页属性：

1、pageSize：每页显示的数据条数。

2、total：总数据条数。

3、page-size-choices：每页可选的数据条数。

4、layout：分页器的布局。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-size-choices="[10, 20, 30, 50]"
  layout="total, sizes, prev, pager, next, jumper"
  @current-change="handleCurrentChange"
>
</el-pagination>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      // 根据当前页码请求对应的数据
      // ...
    }
  }
}

八、ElementUI分页刷新后回到第一页

在一些场景中，我们需要在分页刷新后将页码重置为第一页。可以使用watch来监听pageSize和total属性的变化，并在变化时重置currentPage为1。

<el-pagination
  v-model="currentPage"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="total"
  :page-size-choices="[10, 20, 30, 50]"
  layout="total, sizes, prev, pager, next, jumper"
  @current-change="handleCurrentChange"
>
</el-pagination>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val