elementUI中page（分页）的使用方法

HTML部分

<!-- 快捷键 page-div -->

<el-pagination

  background

  layout="sizes,prev, pager, next"

  :total="data.table.total"

  :page-size="config.page.count"

  :page-sizes="[10,30,50,70,100]"

  :current-page="config.page.index"

  @current-change="pageToMe"

  @size-change="changePageMe"

>

</el-pagination>

data部分

// data部分 快捷键page-js-data

config: {

  page: {

    count: 10,

    index: 1

  }

}

methods部分

// methods 快捷键 page-js-me

// 点击上一页、下一页以及指定页

pageToMe (index) {

  const info = this.$pageSet('test', null, index)

  this.config.page = info

},

// 改变每页显示的条数

changePageMe (index) {

  const info = this.$pageSet('test', index, 1)

  this.config.page = info

},

async getList(){

  const data = await this.$http.get('?count=' + this.config.page.count + '&index=' + this.config.page.index)

  if(data){

  this.data=data

  }

}

mounted部分

// 快捷键 pgae-js-mo

// 页面初始化值，一定要写

this.config.page = this.$pageSet('test',this.config.page)

this.getList()

如果涉及到搜索则在methods部分增加搜索按钮，并给搜索按钮增加以下方法

search(){

  // 为了避免非搜索模式下index调到N页，但是搜索结果没有这么多页导致查不到，所以要重置index页和count数量

  this.config.page = this.$pageSet('rwap-index', { count: 10, index: 1 }, false)

  this.getList()

}

巴特西

elementUI中page（分页）的使用方法

最新文章

热门文章