// 前端分页
const tableFrontEndPaging = {
data() {
return {
currpage: 1,
page_size: 10,
page_list: [10, 20, 50],
currentPage: null,
header_cell_style: {
background: '#C0C4CC',
color: '#303133',
borderColor: '#909399',
}, // 表头样式
}
},
computed: {
// 分页
get_paging_data() {
let search = this.search || ''
if (search) {
this.currpage = 1
this.currentPage = 1
return this.tableData
.filter(data => {
return Object.keys(data).some(key => {
if (!this.search_key.includes(key)) return
if (typeof data[key] == 'string') {
return data[key].toLowerCase().indexOf(search.toLowerCase()) > -1
}
if (typeof data[key] == 'number') {
return data[key].toString().includes(search)
}
})
})
.slice((this.currpage - 1) * this.page_size, this.currpage * this.page_size)
}
return this.tableData.slice((this.currpage - 1) * this.page_size, this.currpage * this.page_size)
},
},
methods: {
// 点击页数
handle_current_change(cpage) {
this.currpage = cpage
},
// 修改每页条数
handle_size_change(val) {
this.currpage = 1
this.currentPage = 1
this.page_size = val
},
// 表格最大高度
getTableMaxHeight(difference_height) {
let height = window.innerHeight //浏览器高度
if (height < difference_height) return height - 100
return height - difference_height
},
},
}
// 后端分页
const tableBackEndPaging = {
data() {
return {
currpage: 1,
page_size: 10,
page_list: [10, 20, 50],
currentPage: null,
header_cell_style: {
background: '#C0C4CC',
color: '#303133',
borderColor: '#909399',
}, // 表头样式
}
},
methods: {
// 预申明,防止报错
inquire_data() {},
// 点击页数
handle_current_change(cpage) {
this.currpage = cpage
return this.inquire_data()
},
// 修改每页条数
handle_size_change(val) {
this.currpage = 1
this.currentPage = 1
this.page_size = val
return this.inquire_data()
},
// 表格最大高度
getTableMaxHeight(difference_height) {
let height = window.innerHeight //浏览器高度
if (height < difference_height) return height - 100
return height - difference_height
},
},
}
export { tableFrontEndPaging, tableBackEndPaging }