// 前端分页 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: { // 点击页数 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 }
标签:return,表格,height,currpage,mixin,js,data,page,size From: https://www.cnblogs.com/lyt520/p/17699486.html