从多个方面了解el-pagination分页组件

发布时间：2023-05-18

一、el-pagination 分页

el-pagination 是饿了么团队开发的 Vue.js 分页组件，具有简单易用、配置灵活等特点，是开发 Web 应用时常用的分页组件之一。 使用 el-pagination，在前端页面可以轻松实现分页功能。要使用 el-pagination 分页组件，可以在 Vue 组件中引入并在 template 中进行配置。其中，必须指定总页数和每页显示的数据条数。

// 引入 el-pagination 组件
import { Pagination } from 'element-ui'
// Vue 组件中使用 el-pagination 组件
<template>
  <div class="container">
    <el-pagination
      :total="total"
      :page-size="pageSize"
      layout="prev, pager, next"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 100,  // 总页数
      pageSize: 10 // 每页显示的条数
    }
  },
  components: {
    'el-pagination': Pagination
  }
}
</script>

二、el-pagination 所有页都有背景色

在 el-pagination 组件中，所有的页码数都会有背景色，以区分选中的页码和未选中的页码。 要设置所有页都有背景色，可以在 el-pagination 组件中加入 background 属性，设为 true 即可。

<template>
  <div class="container">
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :background="true"
      layout="prev, pager, next"
    />
  </div>
</template>

三、el-pagination 的 jumper

el-pagination 组件支持用户手动输入页码，通过 jumper 属性来实现。可以点击 jumper 后，输入想要跳转的页码数，点击确定，即可跳转到对应页码。

<template>
  <div class="container">
    <el-pagination
      :total="100"
      :page-size="10"
      :show-jumper="true"
      layout="prev, pager, next, jumper"
    />
  </div>
</template>

四、el-pagination 跳转按钮点不了

当 el-pagination 组件的 hide-on-single-page 属性设置为 true 时，只在有多页时显示分页组件。如果只有一页，则隐藏分页组件。这样就会导致无法点击跳转按钮。可以将 hide-on-single-page 设置为 false，即可解决问题。

<template>
  <div class="container">
    <el-pagination
      :total="100"
      :page-size="10"
      :show-jumper="true"
      :hide-on-single-page="false"
      layout="prev, pager, next, jumper"
    />
  </div>
</template>

五、el-pagination 变成中文

el-pagination 组件支持多国语言，可以通过 locale 属性来切换语言。使用 locale 属性前，需要在组件中引入相应的语言包。

// 引入中文语言包
import lang from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'
// Vue 组件中使用 el-pagination 组件，并设置为中文
<template>
  <div class="container">
    <el-pagination
      :total="100"
      :page-size="10"
      :show-jumper="true"
      :hide-on-single-page="false"
      layout="prev, pager, next, jumper"
      :locale="lang"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      lang: lang  // 引入的中文语言包
    }
  },
  components: {
    'el-pagination': Pagination
  },
  mounted() {
    // 设置为中文
    locale.use(lang)
  }
}
</script>

六、el-pagination 分页按钮

在 el-pagination 组件中，可以通过 layout 属性来自定义分页组件的布局。 默认的布局是 "prev, pager, next"，即前一页、页码数和后一页。如果想要添加省略号或更多页码按钮，可以在 layout 中加入逗号分隔的字符串。

<template>
  <div class="container">
    <el-pagination
      :total="100"
      :page-size="10"
      :hide-on-single-page="false"
      layout="prev, pager, next, ->, total"
    />
  </div>
</template>

七、el-pagination 设置当前页

在 el-pagination 组件中，可以使用 v-model 属性来绑定当前页码数，从而实现获取和设置当前页的功能。

<template>
  <div class="container">
    <el-pagination
      :total="100"
      :page-size="10"
      :hide-on-single-page="false"
      layout="prev, pager, next, jumper, ->, total"
      v-model="currentPage"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1
    }
  },
  components: {
    'el-pagination': Pagination
  }
}
</script>

以上就是 el-pagination 分页组件的相关介绍和实现方法。使用 el-pagination，可以轻松地实现分页功能，提高 Web 应用对大量数据的展示和浏览的效率。

推荐文章