欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

[分页] Spring Boot 列表分页 + javaScript 前端显示 - 前端:

最编程 2024-09-30 07:20:49
...

前端使用实现分页vue2()

链接: 饿了么UI

1、api/xxx/xxx.js 中

export function esList(equipmentCategoryRequest) {
  return request({
    url: '/dms/ec/list' ,
    method: 'get',
    params: equipmentCategoryRequest,
  })
}

2、view/xxx/xxx.vue 中

<template>
	<div>
	 <label for="category-name" style="margin-left: 20px">类目名称:</label>
      <el-input
        id="category-name"
        type="text"
        placeholder="请输入名称"
        v-model="searchForm.equipmentCategoryName"
        clearable
        style="width: 200px;margin-bottom: 20px;margin-right: 10px "
      />
      <label for="category-name">状态:</label>
      <el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 200px; margin-right: 10px" clearable>
        <el-option label="停用" value="0"></el-option>
        <el-option label="启用" value="1"></el-option>
      </el-select>
<!--      搜索按钮-->
      <el-button @click="esList"
                 style="color: #1482f0"
                 class="el-icon-search"
      >搜索</el-button>


		<div class="block" style="margin-top: 10%;text-align: center;">
	        <el-pagination
	          @size-change="handleSizeChange"
	          @current-change="handleCurrentChange"
	          :current-page="searchForm.pageNum"
	          :page-sizes="[3, 5, 10, 30]"
	          :page-size="searchForm.pageSize"
	          layout="total, sizes, prev, pager, next, jumper"
	          :total="total">
	        </el-pagination>
	      </div>
      </div>
</template>
........data() {
	    return {
	      searchForm: {
	        pageNum: 1,
	        pageSize: 3,
	      },
     	 total: 0,
     	}
     },
	methods: {
	  	//列表
	   esList(){
	     esList(this.searchForm).then(response => {
	       this.equipmentCaTableData = response.data.list;
	       this.total = response.data.total;
	     })
	   },
	    handleSizeChange(val) {
	      this.searchForm.pageSize = val;
	      this.esList();
	    },
	    handleCurrentChange(val) {
	      this.searchForm.pageNum = val;
	      this.esList();
	    },
	},

推荐阅读