vue el-pagination的每页几条改为手动输入

最新推荐文章于 2024-04-21 02:44:43 发布

张嘉悦儿

最新推荐文章于 2024-04-21 02:44:43 发布

阅读量337

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_42234899/article/details/134072183

版权

本文介绍如何将页面分页的固定条数改为用户手动输入，通过将下拉框替换为Vue的el-input输入框，当用户输入后触发搜索查询接口，同时处理了输入验证和存储用户设置的功能。

摘要由CSDN通过智能技术生成

需求：

客户要求每页几天改为手动输入，不想用固定的条数。

思路：

将下拉框选择的条数改为el-input输入框，当焦点离开输入框后，调搜索查询的接口即可。

上代码：

html：
<div style="display: flex;">
  <el-pagination
      @size-change="sizeChange"
      @current-change="pageChanges"
      :current-page="mixinsPage.page"
      :page-size="pageWant"
      style="margin-top: 8px;"
      layout="total, prev, pager, next"
      :total="mixinsPage.count">
  </el-pagination>
  <el-input
    v-model.number="pageWant"
    style="margin-top: 8px;width: 100px;"
    placeholder="请输入条数"
    @change="pageInputChange"
    @input="inputChange">
  </el-input>
  <div class="pages"> 条 / 页</div>
</div>

js:

data() {
  pageWant: 10, // 默认给个10条每页
  size: 10,
  page: 0
},

mounted(){
  if (sessionStorage.getItem("pagesChangeWs")) {
    this.pageWant = Number(sessionStorage.getItem("pagesChangeWs"))
  } else {
    this.pageWant = 10
  }
  this.size = this.pageWant
  this.getList()
},
methods: {
  pageChanges(val) {
      this.page = val
      this.getList() // 搜索查询的方法
  },

  sizeChange(e) {
    this.page = 0
    this.size = e
    this.init()
  },
  pageInputChange(val) {
      this.mixinsPage.size = val
      this.getList()
      let pageList = []
      pageList.push(val)
      sessionStorage.setItem("pagesChangeWs",pageList)
  },
  inputChange(val) {
    if (!val) {
      this.$message.error('每页显示的条数不能为空,请输入想显示的条数!', 3)
    }
  },
},


css:

.pages{
  color: #606266;
  font-size: 15px;
  margin: 15px 0 0 8px;
  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
}