|
前两天在工作中遇到第三方的接口，他们是没有做分页和查询的，鉴于接口返回的数据量比较小，于是就想试试在前端实现分页查询。直接上用Element+vue2.0实现的代码。
代码
{{listTitle + "管理"}}
{{"新增" + listTitle}}
下载
卸载
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()
}
},
}
#list {
width: 100%;
.title {
line-height: 36px;
font-weight: 600;
}
.unload{
color: #F56C6C;
}
}
|