如何移除el-pagination分页组件页容量下拉框中的'/pages'文本

针对你使用的el-pagination组件，要去掉页容量下拉框里的“/pages”后缀，有以下几种可行方案：

方案一：通过国际化配置修改文本（推荐） #

Element Plus分页组件的文本由国际化（i18n）规则控制，你可以全局或局部覆盖分页相关的语言配置：

全局配置（Vue3 + Element Plus） #

在项目的国际化配置文件或入口文件中，自定义中文语言包，修改分页项的文本规则：

// 示例：main.js 或单独的i18n配置文件
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

// 自定义语言包，覆盖分页的每页文本
const customZhCn = {
  ...zhCn,
  el: {
    ...zhCn.el,
    pagination: {
      ...zhCn.el.pagination,
      itemsPerPage: '' // 设为空字符串，即可移除"/pages"后缀
    }
  }
}

const app = createApp(App)
app.use(ElementPlus, {
  locale: customZhCn
})
app.mount('#app')

局部配置（单个组件内） #

如果只想给当前分页组件单独修改，直接通过locale属性传入自定义配置：

<template>
  <el-pagination
    v-model:current-page="currentPage2"
    v-model:page-size="pageSize2"
    :page-sizes="[100, 200, 300, 400]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="sizes, prev, pager, next"
    :total="1000"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :locale="customLocale"
  />
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const customLocale = {
  ...zhCn,
  el: {
    ...zhCn.el,
    pagination: {
      ...zhCn.el.pagination,
      itemsPerPage: ''
    }
  }
}
</script>

方案二：使用CSS隐藏后缀 #

如果不想修改语言配置，也可以通过CSS直接定位到“/pages”文本并隐藏：

/* 全局样式文件中使用 */
.el-pagination__sizes .el-select-dropdown__item span:last-child {
  display: none;
}

/* 组件内scoped样式需加深度选择器 */
:deep(.el-pagination__sizes .el-select-dropdown__item span:last-child) {
  display: none;
}

这种方法更快捷，但属于样式层面的修改，若组件结构变动可能失效，适合快速临时解决。

内容的提问来源于stack exchange，提问作者Sreejith C