The introduction
This article describes the details of how I optimized the code step by step in the process of dealing with tab-page tables and pagers. If you are or have encountered such problems, I hope this article can give you some ideas.
The body of the
demand
In a recent project, I came across a TAB page with 5 tables. Each table has its own pager. The pager can change the page number and page number (if there is enough data) as shown below:
<el-table :data="handleData" border size="mini">
<el-table-column type="index" label="Serial number" width="50"></el-table-column>
<el-table-column prop="officeName" label="Institution"></el-table-column>
<el-table-column prop="userName" label="Operating user"></el-table-column>
<el-table-column prop="operateFlag_text" label="Operation"></el-table-column>
<el-table-column prop="createDate_text" label="Operation time"></el-table-column>
<el-table-column prop="operateResult_text" label="Operation Result"></el-table-column>
</el-table>
<div class="paging">
<el-pagination :current-page="pageNo" :page-size="pageSize" :page-sizes="[5, 10, 25, 50]" layout="total,sizes, prev, pager, next, jumper" :total="count" @current-change="handleCurrentChange" @size-change="handleSizeChange">
el-pagination>
</div>
</el-tab-pane>
Copy the codeIf we had nothing to do with it, we could have written five of these snippets. Tables are fine, but the stupidest ones are pagers, and we need to write five pageSize and pageNo and the methods to manipulate them. Why can’t they be shared? Because there’s a requirement that when I’m showing the data on page 2 in “Action Record” and I click on another TAB, and then I go back to “Action Record” again, I need to go back to page 2, and if I use the same parameter, I can’t save pageSize and pageNo, so I can’t keep it the same after the jump.
Method to request table data
So I thought I had to have 5 parameters, so how would that reduce my workload, after all, writing five methods to get table data and pagers is a lot of work and I feel uncomfortable. But I temporarily can not think of a good way, can only do it first again, first is the method of obtaining table data:
getTableData(useUrl, pageSize, pageNo) {
const url = "/getTableData/" + useUrl;
const params = {
dataId: this.dataId,
pageSize,
pageNo
};
this.$axios.post(url, params).then(res => { this.handleData = [] this.handleData.push(... res.data.resultData.list) }); },Copy the codeWe can see that the parameters are useUrl, pageSize and pageNo. These parameters are independent of each table. The problem is how to pass the data from the background to the corresponding object’s data. You can always figure out what TAB is and assign it to that particular data. But that’s kind of a silly thing to do, and then I think of arrays as reference types, and if I pass an array to a function, and I change the data of that object in the function then my original array changes as well. So I changed my code to look like this.
getTableData(useUrl, pageSize, pageNo, data) { ... data = [] data.push(... res.data.resultData.list) }); },Copy the codeBut I found that writing this does not change the data of the original array. The reason is that its memory changed when I assigned the array to a null value (not directly because vUE might not detect an array assignment and not update the DOM). So I improved the final code
getTableData(useUrl, pageSize, pageNo, data) {
const url = "/getTableData/" + useUrl;
const params = {
dataId: this.dataId,
pageSize,
pageNo
};
this.$axios.post(url, params).then(res => { data.splice(0, data.length, ... res.data.resultData.list); this.count = res.data.totalNum; }); },Copy the codeMethods for passing parameters needed to get table data (core)
And when I do that, I’m good. Then it’s time to think about when to retrieve the table data, and the best thing to do is to click on the TAB page to retrieve the table data, so I wrote the following code first (omit similar code)
tabClick(val) {
switch(val.name){
case "handle":
let data = this.handleData
let pageSize= this.handleSize
let pageNo = this.handleNo
this.getTableData("handleUrl",pageSize,pageNo)
break;
case "collect":
let data = this.collectData
let pageSize= this.collectSize
let pageNo = this.collectNo
this.getTableData("collectUrl",pageSize,pageNo)
break; . . . }}Copy the codeAt this point I can’t stand the fact that I have to write the same thing 5 times. So the first thing I thought about was if I have useUrl,pageSize, pageNo and data in each array, why don’t I just write them into an object? HandleObj :{useUrl:”handleUrl”,data:[],pageSize:5,pageNo:1}. At this point I thought I should give it a name. So I added a name attribute to it. When I wrote all five objects out, I wondered what would happen if I put all five together. (Actually, I originally intended to reduce the size of the data object, but writing an array of objects gave my code a qualitative boost.) So I have this extra array in my data object
showArr: [
{name: "handle",useUrl: "handleUrl",data: [],pageSize: 5,pageNo: 1},
{name: "collect",useUrl: "collectUrl",data: [],pageSize: 5,pageNo: 1},
{name: "apply",useUrl: "applyUrl",data: [],pageSize: 5,pageNo: 1},
{name: "use",useUrl: "useUrl",data: [],pageSize: 5,pageNo: 1},
{name: "evaluate",useUrl: "evaluateUrl",data: [],pageSize: 5,pageNo: 1},
]
Copy the codeThis step is crucial. A TAB page is an object, and putting their data in an array can do a lot of things. Then I notice that the name property of the array object is the same as the name of the child page of my TAB (it’s a coincidence but it saves a lot of trouble). So my tabClick code looks like this:
tabClick(val) {
let array = this.showArr;
for (let index = 0; index < array.length; index++) {
const element = array[index];
if (element.name === val.name) {
const data = element.data;
const useUrl = element.useUrl;
const pageSize = element.pageSize;
const pageNo = element.pageNo;
this.getTableData(useUrl, pageSize, pageNo, data);
break; }}}Copy the codeAt this point we finally see what this array of objects can do without having to write 5 sentences of similar code. By the way, I usually use forEach the most for array traversal, but I need a break here, because there is no need to perform traversal as long as the names are equal, and forEach cannot use a break. Our pager method could be written like this:
handleCurrentChange(pageNo) { <! Const val = this.activename; const val = this.activename; ActiveName is the name of the current TABlet array = this.showArr;
for (let index = 0; index < array.length; index++) {
const element = array[index];
if(element.name === val) { const data = element.data; const useUrl = element.useUrl; const pageSize = element.pageSize; const pageNo = pageNo; GetTableData (useUrl, pageSize, pageNo, data);break; } } }, handleSizeChange(pageSize) { const val = this.activeName; . . const pageSize = pageSize; . },Copy the codeSo I wrote a function that must first know the name of the current TAB page, and then pageSize and pageNo are changeable. Code:
provideParams(name, size, num) {
let array = this.showArr;
for (let index = 0; index < array.length; index++) {
const element = array[index];
if (element.name === name) {
const data = element.data;
const useUrl = element.useUrl;
const pageSize = size || element.pageSize;
const pageNo = num || element.pageNo;
this.getTableData(useUrl, pageSize, pageNo, data);
break; }}},Copy the codeThe results of
I then applied this method to tabClick and the pager, and it basically did this, but if you remember the requirement before the article started, I still couldn’t get back to the original page number. Why is that? Have I wasted all this time? No, we’re ignoring the fact that we do use handleSizeChange(pageSize) to pass the correct page number into the function to make sure its request parameters are correct, but we don’t assign it to the array object, so the correct page number is not saved. So the final code for this function:
provideParams(name, size, num) {
let array = this.showArr;
for (let index = 0; index < array.length; index++) {
const element = array[index];
if (element.name === name) {
const data = element.data;
const useUrl = element.useUrl;
let pageSize,let pageNo;
if(size) { pageSize = size; element.pageSize = size; // Record the number of pages and ensure that the next time you return to the same TAB page. }else {pageSize = element.pageSize}
if(num) { pageNo = num; element.pageNo = num; // Record the page number and ensure that it remains the same the next time you return to the TAB page. }else {pageNo = element.pageNo}
this.getTableData(useUrl, pageSize, pageNo, data);
break;
}
}
},
tabClick(val) {
this.provideParams(val.name)
},
handleCurrentChange(pageNo) {
const name = this.activeName;
this.provideParams(name, "", pageNo); }, handleSizeChange(pageSize) { const name = this.activeName; this.provideParams(name, pageSize); }, <! Don't forget to start with the first table fetching data.openDialog() {
const val = this.activeName;
this.provideParams(name);
},
Copy the codeIt’s finally done. I think we’ve made it. I’d love to tell you that it worked, in fact our code was 90 percent successful, but our effect was probably only 10 percent successful, because the hardest requirement, the page number remaining the same, was still unsolved. I jumped right out of the window. After testing it, I found that the contents of the table (i.e., the incoming data) kept the page number constant, meaning that pageNo was saved, but the pager style always started from the first page. There was no matching between the style and the data, and element-UI cheated us.
thinking
- One of the purposes of writing this article is that I (a self-taught newbie who has been working for less than six months) hope that the people who read it will give me some inspiration, and I will also study the principles of the Element-UI pager myself to complete the final step, and then I will update the article.
- I was also reminded that I could write an array and a pager into a component, and I was wondering if the parameters of the array, which is called prop, are different, and if I write into a component and I need to pass in so many prop values, that would be a good idea, and I’m going to try that out.
- Finally, for the first time to write an article, there must be a lot of things to be improved and even my personal understanding is wrong. I hope you can give me more suggestions. I will examine myself and correct my shortcomings.