后端未做分页,前端进行分页采用element.ui-pagination组件,vue框架
目录
后端未做分页，前端进行分页（采用element.ui pagination组件，vue框架）
后端未做分页，前端进行分页（采用element.ui pagination组件，vue框架）
1.data中定义私有数据，进行数据的接收和设定。
data() {
return {
// 权限列表
rightsList: [],//后台返回的所有结果
currentPage: 1, //当前页
pageSize: 20, //当前页容量
total: null, //总数
}
},2.定义的方法
getRightsList函数拿到发起请求数据，进行数据的接收
methods: {
// 获取权限列表
async getRightsList() {
const { data: res } = await this.$http.get('rights/list')
if (res.meta.status !== 200) {
return this.$message.error("获取权限列表失败！")
}
this.rightsList = res.data
this.total = res.data.length;//总条数
// console.log(this.rightsList);
},
handleSizeChange(val) {//切换每页条数容量
console.log('每页：${val}条');
this.pageSize = val;
this.getRightsList();
},
handleCurrentChange(val) {//切换当前页
console.log('当前：页${val}条');
this.currentPage = val;
this.getRightsList();
}
}3.分页区代码设置
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10,20,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>4.重点 :data=“rightsList.slice((currentPage-1) pageSize,currentPage pageSize)”
data接受的是slice（）函数处理后的对象
<!-- 卡片视图 -->
<el-card>
<el-table :data="rightsList.slice((currentPage-1)*pageSize,currentPage*pageSize)" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="权限名称" prop="authName"></el-table-column>
<el-table-column label="路径" prop="path"></el-table-column>
<el-table-column label="权限等级" prop="level">
<template slot-scope="scope">
<el-tag v-if="scope.row.level === '0'">一级</el-tag>
<el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
<el-tag type="warning" v-else>三级</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>5.定义和用法
slice() 方法可从已有的数组中返回选定的元素。
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice() 方法不会改变原始数组。
6.语法
array.slice(start, end)
7.参数Values
参数描述
start 可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
欢迎讨论