I. Introduction.
I have talked about today's project development scenarios before. When it comes to list requirements, most of them are realized by combining table (el-table) and pagination (el-pagination) . Provide the corresponding data, and this article will describe how to implement it elegantly and efficiently for the purpose of this effect . Of course, in rare cases, the backend returns all the data at one time, and the frontend handles the paging by itself --- for this part, you can refer to my other article on pure frontend paging , and I won't repeat it here.
2. Encapsulate common form js (mixed into mixins to achieve).
- illustrate:
Create a mixins folder under the src folder, and create a table.js file in it as the mixins of the general table. After that, you can import and import the corresponding mixed-in js file in the specific business list component, and finally mixins: [table]use it.
- Core code:
- table.js:
export default {
data() {
return {
tableData: [], //用于存储列表的数据
tableHeight: '500', //列表的初始高度
currentPage: 1, //当前页
pageSize: 20, //每页的容量
total: 0, //列表总数
loading: false, //列表的数据加载loading状态
}
}
}
- Specific business list components:
import table from "mixins/table";
mixins: [table],
3. Combination of el-table and el-pagination.
- Description: Integrate the characteristics of tables (el-table) and pagination (el-pagination) and the corresponding APIs, and combine tableData , pageSize and other variables defined in the table.js file in mixins to achieve perfect data display and translation of business components Pages and other operations pull the corresponding data in real time. (ps: Of course, the parameters of the respective business scenarios are discussed with the back-end children's boots, and can be changed accordingly).
-
Core code:
- Specific business list components:
<template>
<div class="h-p-100">
<div class="g-page-title clearfix">
<p>{
{ $route.meta.title }}</p>
<div class="f-r">
<el-button @click="getWorkOrderList()">刷新</el-button>
</div>
</div>
<div class="f-l p-card-info-wrap" style="width: 100%">
<div class="g-table-header">
<el-input
v-model.trim="search.sn"
clearable
placeholder="请输入编号"
class="w-230 umar-r10 umar-b10"
></el-input>
<el-button type="primary" class="umar-b10" @click="getWorkOrderList(1)"
>查询</el-button
>
<el-button type="success" class="umar-b10" @click="handleReset"
>重置</el-button
>
</div>
<div class="g-table-content">
<el-table
:data="tableData"
:height="tableHeight"
border
header-cell-class-name="g-table-header-cell"
:highlight-current-row="true"
v-loading="loading"
>
<el-table-column
prop="id"
label="ID"
min-width="120"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="sn"
label="编号"
min-width="180"
show-overflow-tooltip
>
</el-table-column>
</el-table-column>
<el-table-column label="状态" min-width="100">
<template slot-scope="{ row }">
<div v-if="row.status == 2" style="color: green">已确认</div>
<div v-else style="color: red">未确认</div>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
min-width="180"
show-overflow-tooltip
>
</el-table-column>
<el-table-column label="操作" min-width="120" fixed="right">
<template slot-scope="{ row }">
<span
class="g-table-btn"
@click="handleClose(row)"
v-if="row.status != 2"
><i class="icon iconfont el-icon-switch-button"></i
>确认</span
>
</template>
</el-table-column>
</el-table>
</div>
<div class="g-table-page clearfix">
<el-pagination
class="f-r uinn-tb10"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[20, 100, 200, 500]"
:page-size="pageSize"
:current-page="currentPage"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import table from "mixins/table";
import * as API from "api/inter_expir_reminder/inter_expir_reminder";
export default {
mixins: [table],
data() {
return {
search: {
sn: "",
},
};
},
watch: {},
mounted() {
this.init();
},
methods: {
init() {
this.getWorkOrderList();
},
//获取列表数据
getWorkOrderList(currentPage = this.currentPage) {
this.loading = true;
let data = new URLSearchParams();
for (let i in this.search) {
if (this.search[i]) {
data.append(i, this.search[i]);
}
}
data.append("current", currentPage);
data.append("size", this.pageSize);
API.getJkList(data)
.then((res) => {
this.loading = false;
if (res.code == 200) {
this.tableData = res.data;
this.total = res.total;
this.currentPage = currentPage;
}
})
.catch((err) => {
this.loading = false;
});
},
//重置
handleReset() {
for (let i in this.search) {
this.search[i] = "";
}
this.getWorkOrderList();
},
//切换当前页的容量
handleSizeChange(val) {
this.pageSize = val;
this.getWorkOrderList(1);
},
//翻页
handleCurrentChange(val) {
this.currentPage = val;
this.getWorkOrderList();
},
//操作
handleClose(row) {
console.log(row);
},
},
};
</script>
4. Details processing (deletion and other operations).
- Delete operation:
- illustrate:
The deletion operation in the list needs to refresh the current list after the deletion interface is requested successfully. In addition to this, in order to achieve a more perfect humanized effect, it should be considered in the deletion operation whether the current row to be deleted is the current page The last one (if it is, then you have to go back to the previous page ), and it is necessary to consider whether the current page is the first page ( refresh the first page directly ).
- Case and core code diagram:
- Modify, edit, enable, disable, etc.:
- illustrate:
Operations such as modifying, editing, enabling, and disabling in the list need to refresh the list after the corresponding interface is successfully requested and keep the page where the operation was performed , so as to ensure the accuracy of the data and the user-friendly operation.
- Case and core code diagram:
- Parse:
That's why we set the default value and assign it to the current page in the method of requesting list data. It is to combine the list data and pages under various operations in real time to improve humanization and operability.
5. Conclusion:
I believe that through the above brief description and plan, when encountering list requirements in the future, children's boots will not only simply make a simple data list display, but also consider the user's operation and humanized experience as much as possible. In this way, Element's table (el-table) and pagination (el-pagination) can be used perfectly.