前两天在工作中遇到第三方的接口，他们是没有做分页和查询的，鉴于接口返回的数据量比较小，于是就想试试在前端实现分页查询。直接上用Element+vue2.0实现的代码。
代码
<template>
<div id='list'>
<el-row type="flex" justify="end">
<el-col :span="2">
<div class="title">{{listTitle + "管理"}}</div>
</el-col>
<el-col :span="14"></el-col>
<el-col :span="6">
<el-input placeholder="请输入搜索内容" v-model="search_data" class="input-with-select" @keyup.enter.native="search">
<el-button
slot="append"
style="width: 30px; padding: 0"
icon="el-icon-search"
@click="search"
></el-button>
</el-input>
</el-col>
<el-col :span="3" :offset="0.5">
<el-button @click="handleAdd" type="primary" size="small">{{"新增" + listTitle}}</el-button>
</el-col>
</el-row>
<el-row style="margin-top: 8px;">
<el-table v-loading="tableLoading" :data="paginationData" border style="width: 100%">
<el-table-column v-for="(column,index) in tableColumn"
:key="index"
:prop="column.prop"
:label="column.label"
:formatter="column.formatter"
:width="column.width"
:sortable="column.sortable"
>
</el-table-column>
<el-table-column :label="listTitle + '操作'">
<template slot-scope="prop">
<el-button type="text" @click="downloadProcess(prop.row)">下载</el-button>
<el-button type="text" @click="unloadProcess(prop.row)" class="unload">卸载</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row type="flex" justify="end" style="margin-top: 8px">
<el-pagination background
:page-size="5"
:current-page="currentPage"
:total="stachData.totalCount"
@current-change="handlePageChange"
layout="total, prev, pager, next"
>
</el-pagination>
</el-row>
</div>
</template>
<script>
export default {
name: 'list',
components: {
},
props:{
//table标题
listTitle:{
type: String,
require: true,
deafult: ""
},
/**
table数据，格式为tableData:{
data:[] //渲染的整个表格数据
totalCount: 0 //整个表格数据的总长度
}
**/
tableData:{
type: obejct,
require: true,
default: {}
},
//表格column渲染的内容
tableColumn:{
type: Array,
require: true,
default: []
},
//表格loading
loading: {
type: boolean,
default: false
},
},
data() {
return {
stachData = null, //备用的整个表格的数据
paginationData = [], //分页表格的数据
pageSize = 5, //每页数量
currentPage = 1, //当前页
search_data = "", //搜索内容
};
},
methods: {
//获得列表数据
getTableList(){
this.paginationData = []
for(let i = this.pageSize * (this.currentPage - 1); i < this.pageSize * this.currentPage ; i++){
if(this.stachData['data'][i]){
this.paginationData.push(this.stachData['data'][i])
}else{
break
}
}
},
//分页
handlePageChange(index){
this.currentPage = index
this.getTableList()
},
//搜索数据
search(){
let result ={
data: [],
totalCount: 0
}
result.data = this.tableData.data.filter((val,index,arr) => {
let reg = new RegExp(this.search_data, 'gi')
return val.fileName.match(reg)
})
result.totalCount = result.data.length
this.stachData = result
this.getTableList()
},
//下载流程
downloadProcess(row){
this.$emit("downloadProcess",row)
},
//卸载流程
unloadProcess(row){
this.$emit("unloadProcess",row)
},
//点击新增按钮
handleAdd(){
this.$emit("handleAdd",this.listTitle)
},
created() {
this.stachData = Object.assign({},this.tableData)
this.getTableList()
}
},
}
</script>
<style lang="scss">
#list {
width: 100%;
.title {
line-height: 36px;
font-weight: 600;
}
.unload{
color: #F56C6C;
}
}
</style>
