elementUI实现分页效果+模糊搜索效果

结构
<!-- 分页div -->
<div class="pagingDive">
<div class="block">
<el-pagination
background
@size-change="handleSizeChange" //当前页
@current-change="handleCurrentChange" // 每页条数
:current-page.sync="page" //绑定当前页
:page-size="limit" //一页显示多少条
layout="total, prev, pager, next"
:total="total" //绑定总条数
@click.native="tablePagination()" //点击切换的事件
></el-pagination>
</div>
</div>
<!-- 表格 -->
<Table border :columns="columnsPrivate" :data="roleManagementList"> --->替换为 <Table border :columns="columnsPrivate" :data="Ary">
绑定的值
data(){
return {

// 分页 需要绑定的值
limit: 8, //一页显示多少条
page: 1, //当前页
total: "16", //总条数,
// 接受接口数据
roleManagementList: [],
//定义的新数组
Ary : []

}
}
methods事件
//为什么要在搜索接口方法和显示数据的接口方法中重新调用分页的方法呢,如果不在查看接口调用数据需要点击后才能显示,搜索也是同理,还有就是数据显示了但是总条数需要点击后才能显示所以重新调用会解决这些问题//删除事件中一定要调下查看接口
// 查看接口 === 搜索接口
dim() {
this.$ajax
.post("/role/list", {
name: this.selectVal
})
.then(res => {
this.roleManagementList = res.data.data;//后端数据
this.tablePagination();
console.log(this.roleManagementList, "模糊搜索================");
});
}
// 查看接口
getList() {
let val = {
id: this.roleManagementList.id,
name: this.roleManagementList.name,
useStatus: this.roleManagementList.useStatus,
page: this.roleManagementList.page, //告诉后端我要给你传两个参数后端也分页,然后给他传过去就好了
limit: this.roleManagementList.limit //传递的两个参数是 当前页和每页显示数量
};
this.$ajax.post("/role/list", val).then(res => {
this.roleManagementList = res.data.data;//后端数据
console.log(this.roleManagementList);
this.tablePagination();
});
}
// 分页操作
handleCurrentChange(val) {
//当前页
this.page = val;
// alert(this.page);
console.log(this.page, "8585945048215");
},
handleSizeChange: function(size) {
//每页条数
this.limit = size;
console.log(this.limit); //每页下拉显示数据
},
/**
* 表格数据分页的方法
*/
tablePagination() {
let array = [],
startNum = 0,
endNum = 0;
this.total = this.roleManagementList.length;
startNum = (this.page - 1) * this.limit;
if (this.page * this.limit < this.total) {
endNum = this.page * this.limit;
} else {
endNum = this.total;
}
array = this.roleManagementList.slice(startNum, endNum);
this.Ary= array;//给新数组赋值并替换绑定 这个时候的Ary就是表格中的所有数据
console.log(startNum, endNum, "总条数");
console.log(this.page);
},
created() {
// 执行查看接口
this.getList();
// 分页执行
this.tablePagination();
}
有一点需要记住一下,就是定义一个新数组替换掉表格data绑定的值( 如果不替换分页数据不刷新 )

0 个评论

要回复文章请先登录注册