<think>我们正在讨论的是
Element UI的
分页器组件（
Pagination），用户想要修改跳转
按钮的文字。
在
Element UI的
Pagination组件中，跳转
按钮通常指的是"前往第几页"的
按钮，它旁边可能有输入页码的输入框。
根据
Element UI文档，我们可以使用`jumper
-text`属性（在
Element UI 2.x中）或通过插槽（slot）来自定义跳转
按钮的文字。
注意：在
Element UI 2.x版本中，
分页器提供了`prev
-text`（上一页）、`next
-text`（下一页）等属性，但对于跳转
按钮（即页码跳转器）的文字，我们可以使用`jumper
-text`属性。
例如：
```vue
<
el-pagination
:page
-size="20"
:total="100"
jumper
-text="跳转"
/>
```
但是，请注意，在
Element UI中，跳转
按钮通常和输入框在一起，所以实际上我们可能需要修改的是输入框后面的文字，比如默认是“前往”，我们可以改为“跳转”。
另外，在
Element Plus（对应Vue3）中，可以通过插槽`jumper`来自定义跳转部分的内容。
下面分别给出两种情况的解决方案：
1. **
Element UI 2.x (Vue2)**
使用属性`jumper
-text`：
```vue
<template>
<
el-pagination
layout="prev, pager, next, jumper"
:total="1000"
jumper
-text="跳转"
/>
</template>
```
2. **
Element Plus (Vue3)**
使用插槽`jumper`：
```vue
<template>
<
el-pagination
layout="prev, pager, next, jumper"
:total="1000"
>
<template #jumper>
<span>跳转至</span>
</template>
</
el-pagination>
</template>
```
但是，请注意，在
Element Plus中，使用插槽会完全替换整个jumper区域，所以你可能需要重新实现整个跳转部分，包括输入框和
按钮。如果你只想修改文字，而不
改变其他结构，可以使用
作用域插槽获取默认的输入框，然后添加你想要的文字。
实际上，
Element Plus的jumper插槽提供了默认的内容，你可以通过插槽参数获取到原有的输入框，然后在其前后添加文字。例如：
```vue
<template>
<
el-pagination
layout="prev, pager, next, jumper"
:total="1000"
>
<template #jumper="scope">
<span>跳转至</span>
<input :value="scope.value" @change="scope.onChange" @keyup.enter="scope.onKeyup" />
<span>页</span>
</template>
</
el-pagination>
</template>
```
但是，这样需要自己处理输入框的事件，比较麻烦。所以，如果只是修改
按钮文字，可能更简单的方式是使用
CSS选择器隐藏原有文字，然后通过伪元素添加新文字？但这样并不推荐，因为可能会破坏组件的功能。
因此，在
Element Plus中，如果只是修改
按钮文字（注意：jumper部分默认没有
按钮，只有一个输入框和后面的文字“前往”），实际上我们可以通过修改组件的国际化配置来实现。
但是，用户的问题明确是修改跳转
按钮的文字，所以我们先按照上面的插槽方式来处理。
然而，在
Element UI 2.x中，`jumper
-text`属性可以直接修改输入框后面的文字，例如默认是“前往”，我们可以改成“跳转”。
总结：
- 对于
Element UI 2.x（Vue2项目），使用`jumper
-text`属性。
- 对于
Element Plus（Vue3项目），使用插槽`jumper`来自定义，但需要自己处理输入框的绑定事件，或者使用全局配置（国际化）来修改。
注意：在
Element Plus中，可以通过设置国际化文本来修改
分页器的文字，例如：
```javascript
import { createApp } from 'vue'
import
ElementPlus from '
element
-plus'
import zhCn from '
element
-plus/lib/locale/lang/zh
-cn'
const app = createApp(App)
app.use(
ElementPlus, {
locale: {
...zhCn,
el: {
pagination: {
goto: '跳转至',
// 其他分页相关文本
}
}
}
})
```
这样可以将“前往”改为“跳转至”，同时也会影响其他分页文本。
因此，根据用户使用的版本和具体需求，可以选择不同的方法。
由于用户没有说明使用的是
Element UI还是
Element Plus，也没有说明Vue版本，我们可以给出两种方案，并让用户根据实际情况选择。
另外，如果用户使用的是其他UI库（比如Ant Design Vue等），则方法不同。但根据问题中提到的
Pagination分页器，且之前讨论的是
Element UI（因为站内引用1没有直接关系，所以忽略），我们假设用户使用的是
Element UI。
因此，回答如下：</think>在 Vue 项目中修改
Element UI
Pagination 分页器的跳转
按钮文字，可以通过以下两种方式实现：
### 方法 1：使用 `jumper
-text` 属性（
Element UI 2.x）
```vue
<template>
<
el-pagination
layout="prev, pager, next, jumper"
:total="1000"
jumper
-text="跳转到" <!
-- 修改跳转
按钮文字
-->
/>
</template>
```
效果：将默认的 "前往" 改为 "跳转到" [^1]
### 方法 2：使用插槽自定义内容（
Element Plus）
```vue
<template>
<
el-pagination
:total="1000"
layout="prev, pager, next, jumper"
>
<template #jumper>
<div class="custom
-jumper">
跳转至
<input
class="
el-pagination__editor"
:value="innerPage"
@change="handleInput"
@keyup.enter="handleEnter"
/>
页
</div>
</template>
</
el-pagination>
</template>
<script>
export default {
data() {
return {
innerPage: 1
}
},
methods: {
handleInput(val) {
this.innerPage = val
},
handleEnter() {
// 处理跳转逻辑
this.$emit('current
-change', this.innerPage)
}
}
}
</script>
<style>
.custom
-jumper {
display: flex;
align
-items: center;
margin
-left: 10px;
}
</style>
```
### 关键说明：
1. **
Element UI 2.x**：
- 使用 `jumper
-text` 属性直接修改文字
- 支持响应式设计，自动适配不同屏幕尺寸[^1]
2. **
Element Plus**：
- 使用 `#jumper` 插槽完全自定义跳转区域
- 需要手动处理输入框的值绑定和事件
- 通过
CSS 保持与整体主题一致[^1]
3. **
样式定制**：
```s
css
/* 深度选择器修改
样式 */
:deep(.
el-pagination__jump) {
.
el-input__inner {
width: 60px; /* 调整输入框宽度 */
}
}
```
> 建议：优先使用 `jumper
-text` 属性简单修改文字，如需完全自定义布局则使用插槽方案。修改后确保跳转功能正常可用[^1]。
扫一扫
5869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
