分页封装表格Ant Design Vue

<template>
  <div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :alert="true"
      :rowSelection="rowSelection"
      showPagination="auto"
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="status" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
      </span>
      <span slot="description" slot-scope="text">
        <ellipsis :length="12" tooltip>{{ text }}</ellipsis>
      </span>
    </s-table>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getRoleList } from '@/api/manage'
import { postUserControl1 } from '@/services/http-service'
const columns = [
  {
    title: '序号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '服务器标识',
    dataIndex: 'serverName'
  },
  {
    title: '角色ID',
    dataIndex: 'playerId',
    width: '120px',
    scopedSlots: { customRender: 'playerId' }
  },
  {
    title: '账号名',
    dataIndex: 'userId',
    scopedSlots: { customRender: 'userId' }
  },
  {
    title: '角色名',
    dataIndex: 'userName',
    scopedSlots: { customRender: 'userName' }
  },
  {
    title: '金币',
    dataIndex: 'gold',
    sorter: true,
    needTotal: true,
    customRender: (text) => text
  },
  {
    title: '仙玉',
    dataIndex: 'fairyJade',
    sorter: true,
    needTotal: true,
    customRender: (text) => text
  },
  {
    title: '角色状态',
    dataIndex: 'userSatus',
    scopedSlots: { customRender: 'userSatus' }
  },
  {
    title: '最后登录时间',
    dataIndex: 'last_time',
    sorter: true
  }
]

const statusMap = {
  0: {
    status: 'success',
    text: '正常'
  },
  1: {
    status: 'processing',
    text: '封禁'
  }
}

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis
  },
  data () {
    this.columns = columns
    return {
      serverList: [], // 获取所有大区
      userControlList: [], // 获取在线角色统计数据
      loadDatas: {}, // 数据赋值
      promiseObj: {},
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log(parameter)
        console.log('loadData request parameters:', requestParameters)
        return postUserControl1(requestParameters).then((result) => {
        // console.log(result.data)
        const loadDatas = {
          data: result.data.data.list,
          pageNo: result.data.pageNo,
          pageSize: result.data.pageSize,
          totalCount: result.data.totalCount,
          totalPage: result.data.totalPage
        }
        console.log(loadDatas)
        return loadDatas
      })
      .catch((error) => {
        return error
      })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  created () {
    getRoleList({ t: new Date() })
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  mounted () {
  },
  methods: {

  }
}
</script>