el-pagination修改下拉提示

### 修改 `el-pagination` 组件的下拉提示

为了自定义 Element UI 中 `el-pagination` 的下拉选择器提示文本，可以通过覆盖默认模板并使用插槽 (slot) 来实现。具体方法是在页面中引入一个新的 Select 组件作为分页组件的一部分，并通过 JavaScript 控制其显示逻辑。

对于修改下拉框的选择项以及更改提示文字的情况，可以考虑重写布局(layout)，加入自定义的下拉菜单部分[^4]：

<template>
  <div class="pagination-container">
    <!-- 自定义分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total">
      <!-- 插入自定义跳转到指定页码的下拉框 -->
      <template slot="suffix" v-if="showDropdown">
        跳至
        <el-select v-model="currentPage" placeholder="请选择" size="mini" style="width:70px;">
          <el-option
            v-for="(item,index) in totalPages"
            :key="index"
            :label="'第 '+(index+1)+' 页'"
            :value="index+1">
          </el-option>
        </el-select>
        页
      </template>
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 10,
      total: 100,
      currentPage: 1,
      showDropdown: true // 是否展示下拉框，默认开启
    };
  },
  computed:{
    totalPages(){
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    handleSizeChange(val){
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val){
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  }
};
</script>

上述代码展示了如何创建一个带有自定义下拉列表的分页控件，在这里不仅改变了原有的输入框为下拉选项，还调整了前后缀的文字描述以适应新的交互方式。注意这里的“跳至”和“页”的中文表述可以根据实际需求进一步定制化。