一、商品分页

引入分页

定义分页主件的参数

 

在请求url上拼接参数

 定义改变当前页码后触发的事件，把当前页码的值给到分页表单，重新查询

二、商品查询（以商品的名称查询name为例）

 引入elementplus的from表单组件

定义一个FormData函数用于存放表单对象 

 

定义按钮的点击事件

 在请求中拼接参数

 后端实现模糊查询，在查询语句中使用函数拼接

问题：

直接点击查询按钮，即使不传参数也会在查询语句中拼接 

解决方法：

1、在后端查询语句判断是否等于空

2、 在前端加上三元运算符进行判断

 三、代码：

<template><!-- 用于查询的表单 --><el-form :inline="true" :model="FormData"><el-form-item label=""><el-form-item label="商品查询"><el-input v-model="FormData.name" /></el-form-item></el-form-item><el-form-item><el-button type="primary" @click="onQuery">查询</el-button></el-form-item></el-form><!-- 用于存放数据的表格 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="商品id" width="150" /><el-table-column prop="name" label="商品名称" width="120" /><el-table-column prop="categoryId" label="商品分类" width="120" /><el-table-column fixed="right" label="Operations" min-width="120"><template #default><el-button type="primary" size="small">修改</el-button><el-button type="danger" size="small">删除</el-button></template></el-table-column></el-table><br/><!-- 引入elementPluse分页组件 --><el-pagination background layout="prev, pager, next" :total=pageDate.total :page-size = pageDate.pageSize :current-page ="pageDate.pageNum" @current-change="changePage"/>
</template><script setup lang="ts">import {ref,onMounted, reactive} from 'vue';import http from '@/http';const tableData = ref<any>([])onMounted(()=>{//调用查询商品信息函数callProductApi()})const FormData = reactive({name:"",
})const onQuery = () =>{//点击按钮时，重新查询数据刷新页面callProductApi()console.log(FormData.name)
}const changePage = (pageNum: number) =>{console.log(pageNum)pageDate.pageNum=pageNum//改变了当前页的值，重新查询刷新页面callProductApi()}const pageDate = reactive({total:10,pageSize:2,pageNum:1, })//定义查询商品信息函数const callProductApi = () =>{let name = FormData.name==''? undefined :FormData.namehttp.get('/api/product',{pageNum: pageDate.pageNum,pageSize:pageDate.pageSize,name:name}).then(res =>{tableData.value=res.itmesconsole.log(res)pageDate.total = res.total})}</script>