VUE+elementUI+SpringBoot实现分页和搜索多条数据

前端页面：
布局代码：template中的

                 <!-- 搜索选项 -->
                <el-col :span="7">
                    <div  class="inputs">
                        <!-- 联系人 -->
                        <el-checkbox label="联系人"></el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-input v-model="searchKeys.clxr" placeholder="联系人" style="width:200px;"></el-input>
                    </div>
                </el-col>

				<!-- 数据展示 -->
            <div>
                <el-table :data="tableData" border stripe style="width: 100%">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" :index="indexMethod" label="排序"></el-table-column>
                    <el-table-column prop="csqdw" label="申请单位" width="180"></el-table-column>
                    <el-table-column prop="cdh" label="电话"></el-table-column>
                    <el-table-column prop="cbzkh" label="备注（客户）"></el-table-column>
                    <el-table-column prop="clxr" label="联系人"></el-table-column>
                    <el-table-column prop="dtbsj" label="填表时间"></el-table-column>
                    <el-table-column prop="cbzyy" label="备注（医院）"></el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[1, 2, 3, 4]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>

前端逻辑代码：script中的

<script>
const cityOptions = ['支付方法名', '支付状态', '支付方式', 'his状态'];
export default {
//页面加载时调用
     mounted() {  
        this.getTeam(this.page);
        var tempInfo = localStorage.getItem(this.editFlag);
        if (tempInfo != null) {
            this.$refs.sureDialog.ok = () => {};
        }
    },
    methods: {
    //搜索
        searchKey(){
        	//js对象转化为字符串
            this.page.searchKeys = JSON.stringify(this.searchKeys)
            
            this.getTeam(this.page)
           
        },
         async getTeam(page) {
            try {
                let getData = await this.$net.Post({
                    url: config.getTeam,
                    data: page
                    
                });
                if (getData.code == 200) {
                    this.page = getData.data
                    this.tableData=getData.data.records
                }
            } catch (e) {
                this.tip = e;
              
            }
        },
        indexMethod(index) {
        return index +1;
      },
        handleSizeChange(val) {
            //console.log(`每页 ${val} 条`);
            this.page.size = val;
        
            this.getTeam(this.page);

        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page.current = val;
            
            this.getTeam(this.page);

        },
        handleCheckAllChange(val) {
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
    },
    data() {
        return {
            searchKeys:{},
            page:{
                 size:4
            },
            checkAll: false,
            checkedCities: [],
            cities: cityOptions,
            isIndeterminate: true,
            centerDialogVisible: false,
            dialogVisible: false,
     
            // 选择
            options: [
                {
                    value: '选项1',
                    label: '全部'
                },
                {
                    value: '选项2',
                    label: '已支付'
                },
                {
                    value: '选项3',
                    label: '未支付'
                }
            ],
           
            // 展示数据
            tableData: []
        };
    }
};
</script>

java后台实现分页搜索代码

 public IPage<ExamTeamAppoint> getList( MyPage p) throws NoSuchFieldException {
        Page<ExamTeamAppoint> page = MyUtil.copyPropertiesIgnoreCase(p,Page.class);
        QueryWrapper<ExamTeamAppoint> queryWrapper = new QueryWrapper<>();
        Map <String,Object> maps  = (Map)JSON.parse(p.getSearchKeys());
        if(maps!=null){
        for(Map.Entry<String,Object> map : maps.entrySet()){
            Field declaredField = ExamTeamAppoint.class.getDeclaredField(map.getKey().toUpperCase());
            Class<?> type = declaredField.getType();
            if(type.equals(Date.class)){
                queryWrapper.gt("DTBSJ",map.getValue());
                queryWrapper.lt("DTBSJ",map.getValue());
            }else if (type.equals(String.class)){
                queryWrapper.like((String) ((Map.Entry)map).getKey(),map.getValue());
            }
        }
        }
        IPage<ExamTeamAppoint> pageData = page(page, queryWrapper);
        return pageData;
    }