分页常规表格Ant Design Vue

<template>

  <div>

    <a-table @change="handleTableChange" :pagination="pagination" :columns="columns" :row-key="record => record.id" :data-source="data">

      <span slot="id" slot-scope="text, record, index">

        {{ index + 1 }}

      </span>

    </a-table>

  </div>

</template>

<script>

import { postUserControl1 } from '@/services/http-service'

const columns = [

   {

    title: '#',

    scopedSlots: { customRender: 'id' },

    key: 'id'

  },

  {

    title: '状态',

    dataIndex: 'fairyJade',

    key: 'fairyJade',

    scopedSlots: { customRender: 'fairyJade' }

  },

  {

    title: '订单号',

    dataIndex: 'gold',

    key: 'gold'

  },

  {

    title: '角色ID',

    dataIndex: 'guildFrId',

    key: 'guildFrId',

    ellipsis: true

  },

  {

    title: '服务器标识',

    dataIndex: 'lastTime',

    key: 'lastTime',

    ellipsis: true

  },

  {

    title: '账号名',

    dataIndex: 'last_time',

    key: 'last_time',

    ellipsis: true

  },

  {

    title: '等级',

    dataIndex: 'playerId',

    key: 'playerId',

    ellipsis: true

  },

  {

    title: '职业',

    dataIndex: 'serverId',

    key: 'serverId',

    ellipsis: true

  },

  {

    title: '金额',

    dataIndex: 'serverName',

    key: 'serverName',

    ellipsis: true

  },

  {

    title: '元宝',

    dataIndex: 'unionId',

    key: 'unionId',

    ellipsis: true

  },

  {

    title: '订单插入时间',

    dataIndex: 'userId',

    key: 'userId',

    ellipsis: true

  },

  {

    title: '订单处理时间',

    dataIndex: 'userName',

    key: 'userName',

    ellipsis: true

  },

  {

    title: '充值类型',

    dataIndex: 'userSatus',

    key: 'userSatus',

    ellipsis: true

  }

]

export default {

  name: 'TableList',

  data () {

    return {

       columns,

      data: [],

      pagination: { pageNo: 1, pageSize: 10 }

    }

  },

    mounted () {

      this.fetch()

  },

  methods: {

   

 handleTableChange (pagination) {

      console.log(pagination)

      this.pagination.pageNo = pagination.current

      this.fetch()

    },

    fetch () {

      const requestParameters = Object.assign({}, this.pagination)

     postUserControl1(requestParameters).then(data => {

        const pagination = { ...this.pagination }

        this.pagination = pagination

        pagination.total = data.data.totalCount

        this.data = data.data.data.list

     })

    }

  }

}

</script>

<style lang="less">

.mr-2 {

  margin-right: 25px;

}

</style>