【vue前端】列表搜索+分页

【vue前端】列表搜索+分页

效果图

分析前后端交互的数据

发送的请求

向/users接口发送一个get请求。
params中：

• account_filter 是搜索的内容
• limit 是每页的条目数
• offset 是偏移量，即 limit*(currentPage - 1)

返回的数据

response.data中：

• list 为当前页的列表具体内容，在el-table标签中进行展示
• total 为列表的总条目数

使用Element UI的标签

<!-- 搜索框 -->
<el-input
	size="medium"
	placeholder="请输入想要搜索的用户名称"
	v-model="searchInput"
>
	<el-button
		slot="append"
		icon="el-icon-search"
		@click="getUserList()"
	></el-button>
</el-input>

<!-- 列表展示 -->
<el-table>
	<!-- 列表具体内容 -->
</el-table>

<!-- 分页状态栏 -->
<el-pagination
	background
	hide-on-single-page
	@current-change="getUserList"
	:page-size="pageSize"
	:current-page="currentPage"
	layout="prev, pager, next, jumper"
	:total="total"
	style="margin-top: 30px; text-align: center"
>
</el-pagination>

• searchInput 是搜索框中输入的内容
• getUserList 是获取列表调用的函数
• pageSize 是每页的条目数
• currentPage 是当前页号
• total 是总条目数

script标签中代码

在data中，存储所需数据

data(){
	return{
		// 搜索输入内容
		searchInput: "",
		// 当前页
		currentPage: 1,
		// 每页记录数
		pageSize: 3,
		// 总记录数
		total: null,
		// 查询到的用户列表
		userlist: [],
	}
}

在created中，初始化页面时获取第一页列表内容

created() {
	this.getUserList();
},

在methods中，获取列表内容函数

methods:{
	// 获取用户列表
	getUserList: function (currentPage = 1) {
		let that = this;
		this.$axios({
			method: "get",
			url: "/users",
			params: {
				id_order: true,
				account_filter: this.searchInput, // 搜索的内容
				limit: this.pageSize, // 每页记录数
				offset: this.pageSize * (currentPage - 1), // 偏移量
			},
		})
		.then(function (response) {
			that.currentPage = currentPage; // 更新页号
			that.userlist = response.data.list; // 返回的当前页列表
			that.total = response.data.total; // 总条目数
		})
		.catch(function (error) {
			console.log(error);
		});
	},
}