创建mixin.js文件,引入表格分页

发布时间 2023-09-13 13:55:55作者: yw3692582
// 前端分页
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 }