js 纯前端实现数组分页、列表模糊查询、将数组转成formdata格式传给接口

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