项目技术:html5、css3、javascript、vue、less、node.js
1、结构使用Element ui框架
//搜索结构
<el-input
placeholder="请输入搜索内容## "
clearable
@clear="clearKey()"
v-model="keyword"
class="input-with-select"
style="width: 400px"
>
<el-button
slot="append"
icon="el-icon-search"
@click="search()"
></el-button>
</el-input>
// 分页结构
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagenum"
:page-sizes="[1, 2, 3, 4]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
2、methods中定义方法
clearkey() {
this.keyword = "";
this.isSearch = false;
this.load();
},
search() {
this.isSearch = true;
// 清空原数据列表数据
this.arr = [];
// 重新请求全部的列表数据
this.$axios
.get("orders", {
params: {
pagenum: 1,
pagesize: 100,
},
})
.then((res) => {
// 定义数组,可用使用数组filter,indexof方法,模糊查找符合条件的数据
let arr = res.data.data.goods.filter((item) => {
return item.order_number.indexOf(this.keyword) >= 0;
});
// 分页时数据只有一页
if (arr.length <= this.pagesize) {
this.arr = arr
} else {
// 多页时可用使用数组的slice方法使用公式:从(pagenum-1)*pagesize开始,到pagenum*pagesize前结束
this.arr = arr.slice(
(this.pagenum - 1 )* this.pagesize,
this.pagenum * this.pagesize
);
}
// 分页总条数
this.total = arr.length;
});
}
3、定义分页方法
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pagesize = val;
// data中定义isSearch变量为false,
if (this.isSearch) {
// 通过变量控制页面渲染搜索内容还是全部内容
this.search();
} else {
this.load();
}
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pagenum = val;
if (this.isSearch) {
this.search();
} else {
this.load();
}
},