This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Using ElementUI already has a period of time, in the side to fit the development background management system’s colleague, also recorded some notes, has not time to sum up, the odd note into a more detail tutorial system, can be left to look at, just saw on the nuggets about August more challenge activity, After reading it, I was moved and decided to spend some time and energy to participate in this more meaningful activity.

In the development process, it is true that a large part of the documents are used. It is said that front-end development cannot be separated from documents. The important words say three times, must read more documents.

Manage back-end solutions

Vue-element-admin is a back-end front-end solution based on vUE and Element-UI implementations.

The positioning of this project is the background integration scheme, which is not suitable for secondary development when the basic template. Because this project integrates a lot of functionality that you may not need, there is a lot of code redundancy. If your project doesn’t focus on this, you can build on it directly.

Vue+ElementUI build background management system (actual combat series six) – table paging

Previously mentioned in VUE, for the use of the table: VUE 2.0 + element- UI actual project – rendering table series of articles, in the actual process, often also want to choose a suitable page, with use together, especially when the data is more, will inevitably make paging effect.

Some of the most frequently used reference documents: here are listed, easy to find.

1: Find a favorite paging style in the component element.eleme.cn/#/zh-CN/com…

In fact, as you can see, the style in the document is very simple just copy this code

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

Copy the code

You should see a static pagination effect on the page

2: The most important step is to click the paging method

Data handleSizeChange: function (size) {this.pagesize = size; console.log(this.pagesize); }, handleCurrentChange: function (currentPage) {this.currentPage = currentPage; console.log(this.currentPage); // Click the page},Copy the code

3: Processing the JSON data obtained from the table

:data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"

Copy the code

4: the previous static page is also modified to add methods and variables

 <el-pagination
      style="margin: 12px 0px"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pvData.length"
    >
    </el-pagination>

Copy the code

5: Write a complete example:

json

{"msg":"success","total":0,"code":1,"data":[{"id":6,"userOrganId":null,"userName":"super","sex":1,"realName":"super","bi Rthday: null, "" password" : "202 cb962ac59075b964b07152d234b70", "roleId" : 1, "roleName role" : "1", "organId" : 1, "organName department" : "1", "au thority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":13,"userOrganId":nul l,"userName":"super2","sex":1,"realName":"super","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId": 1,"roleName":" role 1","organId":1,"organName":" Department 1"," Authority ":0,"companyId":1,"phone": NULL,"organIds": NULL,"isPagination" :false,"page":1,"rows":1},{"id":14,"userOrganId":null,"userName":"999","sex":1,"realName":"999","birthday":null,"passwor d":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"1","organId":1,"organName":"1","authority":1,"companyId":1, "phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":27,"userOrganId":null,"userName":"21","sex":n ull,"realName":"21","birthday":null,"password":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"","organId":1," organName":"","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":28, "userOrganId":null,"userName":"111","sex":1,"realName":"111","birthday":null,"password":"202cb962ac59075b964b07152d234b7 0","roleId":1,"roleName":"1","organId":1,"organName":"14","authority":1,"companyId":1,"phone":null,"organIds":null,"isPa gination":false,"page":1,"rows":1},{"id":29,"userOrganId":null,"userName":"212","sex":0,"realName":"121","birthday":null ,"password":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"1","organId":1,"organName":"13","authority":1,"com panyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1}]}Copy the code

The sample code

<template> <div class="tab-container"> <el-table :data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border fit highlight-current-row style="width: ">< el-table-column prop="userName" label=" userName" width="180" ></el-table-column> <el-table-column prop="realName" </el-table-column> <el-table-column prop="sex" label=" gender ":formatter=" sex" ></el-table-column> <el-table-column prop="organName" label=" department "></el-table-column> <el-table-column prop="authority" Label =" permission "></el-table-column> <el-table-column prop="roleName" label=" role "></el-table-column> </el-table> <el-pagination style="margin: 12px 0px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, > </ el-Pagination > </div> </template> <script "@/api/permission/user"; Export default {data() {return {// pagination currentPage: 1, // initial pagesize: 5, // data per page total: 0, pvData: [],}; }, created() { this.getQuerycheckList(); }, methods: {// handleSizeChange: function (size) {this.pagesize = size; console.log(this.pagesize); }, handleCurrentChange: function (currentPage) {this.currentPage = currentPage; console.log(this.currentPage); GetQuerycheckList () {const params = {organId: 1, userOrganId: 1, authority: 0, page: 1, rows: 1 5, isPagination: false, }; GetQuerycheckList (params).then((res) => {console.log(" Query topic list information ", res); this.pvData = res.data; }); }, // formatSex(row, column) {return row.sex === 1? "Male" : "female "; }}}; </script> <style scoped> .tab-container { margin: 30px; } </style>Copy the code

Effect: