vue+element实现分页--之--前端分页

vue

效果图:

访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选

 官网的完整案例

<div class="block">

<span class="demonstration">完整功能</span>

<el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="currentPage4"

:page-sizes="[100, 200, 300, 400]" //显示 5条/页的值

:page-size="100"

layout="total, sizes, prev, pager, next, jumper" //分别对应了[共33条, 5条/页,<.......>]

:total="400"> //设置总条数

</el-pagination>

</div>

<script>

export default {

methods: {

handleSizeChange(val) {

console.log(`每页 ${val} 条`);

},

handleCurrentChange(val) {

console.log(`当前页: ${val}`);

}

},

data() {

return {

currentPage1: 5,

currentPage2: 5,

currentPage3: 5,

currentPage4: 4

};

}

}

</script>  

 demo的使用

 <el-table

:data="list"

style="width: 100%"

@selection-change="selectItem">

<el-table-column type="selection" width="50"></el-table-column>

<el-table-column label="用户名" prop="userName" width="150"></el-table-column>

<el-table-column label="用户代码" prop="userCode" width="150"></el-table-column>

<el-table-column label="所属机构代码" prop="comCode" width="140"></el-table-column>

<el-table-column label="用户描述" prop="userDescription" width="300"></el-table-column>

<el-table-column label="用户状态" align="center" prop="userState" width="100">

<template scope="scope">

<div>

<!-- {{ scope.row.userState | userState }}-->

{{scope.row.userState == 0 ? "启用" : scope.row.userState == 1 ? "禁用" : "解锁"}}

</div>

</template>

</el-table-column>

<el-table-column label="创建时间" prop="makeDate" width="140"></el-table-column>

<el-table-column label="操作" width="200" align="center">

<template scope="scope">

<div>

<span>

<router-link :to="{ name: \'usersEdit\', params: { id: scope.row.userCode }}"

class="btn-link edit-btn"> 编辑 </router-link>

</span>

<span>

<el-button size="small" type="danger" @click="confirmDelete(scope.row)">删除</el-button>

</span>

</div>

</template>

</el-table-column>

</el-table>

<div class="pos-rel p-t-20">

<btnGroup :selectedData="multipleSelection" :type="\'users\'"></btnGroup>

<div class="block pages">

<el-pagination

@current-change="handleCurrentChange"

@size-change="handleSizeChange"

layout="total, sizes,prev, pager, next"

:page-sizes="[1, 5,8, 10]"

:page-size="limit"

:current-page="page"

:total="total">

</el-pagination>

</div>

</div>

接着设置data(){   }

    data() {

return {

list:[],

tableData: [],

realname: \'\',

multipleSelection: [],

pagesize: 8,

page:1, //对应el-pagination current-page

limit:5, //和:page-size 对应

total:null, //和:total对应

}

},

 请求数据

      getAllUsers() {

this.loading = true

const data = {

params: {

realname: this.realname,

page: this.currentPage,

rows: this.limit

}

}//不要了这个是按后台分页所需要的数据

this.apiGet(\'admincrud/users\', data).then((res) => {

console.log(\'res = \', _g.j2s(res))

this.handelResponse(res, (data) => {

this.tableData = data.list

this.dataCount = data.total

this.pageList()

})

})

},

 数据过滤

        //处理数据

getList() {

//es6过滤得到满足搜索条件的展示数据list

// let list2 = this.data.filter((item, index) =>

// item.name.includes(this.tableData)

// )

let list=this.tableData;

this.list = list.filter((item, index) =>

index < this.page * this.limit && index >= this.limit * (this.page - 1)

)

this.total = list.length

},

 俩个按钮事件的处理函数

        // 当每页数量改变

handleSizeChange(val) {

console.log(`每页 ${val} 条`);

this.limit = val

this.getList()

},

// 当当前页改变

handleCurrentChange(val) {

console.log(`当前页: ${val}`);

this.page = val

this.getList()

},

  这里主要参考了文章:https://blog.csdn.net/weixin_43216105/article/details/90043828?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

vue+element实现前端分页及前端搜索功能

主要他的这个搜索过滤挺好的简单不要重新访问后台,我自己没时间改了,现在把思路过程放这里

             见下一篇

 

atzhang

以上是 vue+element实现分页--之--前端分页 的全部内容, 来源链接: utcz.com/z/379164.html

回到顶部