首页 > 其他 > 详细

分页常规表格Ant Design Vue

时间:2021-04-23 17:01:59      阅读:118      评论:0      收藏:0      [点我收藏+]
<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>

分页常规表格Ant Design Vue

原文:https://www.cnblogs.com/zjxzhj/p/14692743.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!