两学一做网站 新闻网络平台

后端返回所有的数据，由前端来实现分页展示、模糊查询，并将数组格式转成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 = 1this.getPageData(result)},}
}