表格前端处理分页

<template>
  <div ref="collectionPlan">
    <a-card title="" :bordered="false">
      <a-table
        :bordered="true"
        class="plan-table"
        :loading="tableLoading"
        :pagination="pagination"
        @change="handleTable"
        :scroll="{ x: 1300 }"
        :rowKey="(record, index) => index"
        :columns="coPlanColumns"
        :dataSource="tableData"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          onSelectAll: onSelectChangeAll,
          onSelect: onSelectChangeOne
        }"
      >
      </a-table>
     
    </a-card>
  </div>
</template>

<script>
import { getCoPlanColumns } from '@/views/financialBillSystem/billingManagement/utils/getTableColumns'
import { deteleObject } from '../utils/mapping'
export default {
  name: 'CollectionPlan',
  props: {
    list: {
      required: false
      // type: Array
    }
  },
  data() {
    return {
      coPlanColumns: getCoPlanColumns(),
      pagination: {
        total: 0,
        current: 1,
        pageSize: 5,
        showSizeChanger: true,
        pageSizeOptions: ['5'],
        showTotal: (total) => `总共${total}条记录`
      },
      tableLoading: false,
      selectedRowKeys: [],
      selectedOptions: [],
      idList: [],
      tableData: [],
      allList: [] //全选id列表
    }
  },
  created() {
    this.initGetData()
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  methods: {
    clearTable() {
      this.selectedRowKeys = []
      this.selectedOptions = []
      this.idList = []
      this.allList = []
      this.initGetData()
    },
    initGetData() {
      this.$nextTick(() => {
        this.getTabelData()
        if (this.list && this.list.length > 0) {
          this.list.forEach((item) => {
            this.allList.push(item.serialNum)
          })
        }
      })
    },
  
    //获取表格数据，自行分页（splice）
    getTabelData() {
      let data = JSON.parse(JSON.stringify(this.list)) || []
      this.tableData = data.splice((this.pagination.current - 1) * this.pagination.pageSize, this.pagination.pageSize)
      console.log(this.tableData)
      this.pagination.total = this.list.length
    },
    //切换
    handleTable(pagination) {
      console.log(pagination)
      this.pagination.current = this.pagination.pageSize === pagination.pageSize ? pagination.current : 1
      this.pagination.pageSize = pagination.pageSize
      console.log(this.pagination)
      this.getTabelData()
    },
     // 单个勾选
    onSelectChangeOne(record, selected, selectedRows, nativeEvent) {
      console.log('此处取消勾选', record, selected, selectedRows, nativeEvent)

      // 去重
      // this.selectedOptions = deteleObject(this.selectedOptions)
      console.log('==', this.selectedOptions)
      // 去掉取消勾选的
      if (!selected) {
        this.selectedOptions.forEach((item, index) => {
          if (item.serialNum === record.serialNum) {
            this.selectedOptions.splice(index, 1)
          }
        })
      } else {
         this.selectedOptions.push(record)
      }
      console.log(this.selectedOptions)
    },
    // 跨页全选
    onSelectChangeAll(selected, selectedRows, changeRows) {
      console.log('全选', selected, selectedRows, changeRows)
      this.selectedRowKeys = []
      this.selectedOptions = []
      if (selected) {
        this.allList.forEach((item) => {
          this.selectedRowKeys.push(item)
        })
        this.selectedOptions = JSON.parse(JSON.stringify(this.list))
      } else {
        this.selectedRowKeys = []
      }
      console.log('quanxuan', this.selectedRowKeys)
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>

<style lang="less" scoped>
.plan-table {
  padding: 15px 60px 20px;
}
.common-btn {
  margin-left: 60px;
}
::v-deep .ant-btn-primary {
  background-image: linear-gradient(90deg, #ff921b 20%, #ff7000 85%);
  border-width: 0px;
  outline: none;
}
::v-deep .ant-modal-confirm-content p {
  white-space: pre-wrap;
}
</style>