后端返回所有的数据,由前端来实现分页展示、模糊查询,并将数组格式转成formdata格式给后端
1、数组转formdata
let formData = new FormData()
for (let i = 0; i < list.length; i++) {
let item = list[i];
for (let property in item) {
formData.append(`newList[${i}].${property}`, item[property])
}
}
查看formdata数据
// 查看键、值信息
for (let [key, value] of formData.entries()) {
console.log('formData--------', key, value);
}
2、纯前端实现分页
表格+分页组件进行展示列表数据,切换页码或数量时不需再重复请求接口获取数据
getPageData(pageNum, pageSize, arr) {
// 计算起始索引和结束索引
const startIndex = (pageNum - 1) * pageSize;
const endIndex = pageNum * pageSize;
// 返回分页后的数组
let result = []
result = arr.slice(startIndex, endIndex);
let total = arr.length // 总条数
}
3、纯前端实现列表模糊查询
<template>
<div>
<el-input v-model="name" placeholder="模糊搜索" size="mini" clearable @clear="handleQuery" @keyup.enter.native="handleQuery" />
<el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
</div>
</template>
export default {
data() {
return {
name: '',
pageNum: 1,
allData: [], // 接口一次性返回的全部数据列表
}
},
methods: {
handleQuery() {
let result = this.allData.filter(item => {
return item.name.toLowerCase().includes(this.name.toLowerCase())
})
this.pageNum = 1
this.getPageData(result)
},
}
}