Ant Design of Vue 表格使用

<template>
  <!-- 产品库 -->
  <span>
    <a-table
      ref="table"
      size="small"
      rowKey="id"
      bordered
      :loading="loading"
      :columns="columns"
      :scroll="{ y: 580, x: true }"
      :dataSource="dataSource"
      :pagination="ipagination"
      @change="handleTableChange"
    >
    </a-table>
  </span>
</template>
      
<script>
import { getAction, postAction, deleteAction, downFile } from '@api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
export default {
  mixins: [JVxeTableModelMixin],
  name: 'MzProduct',
  data () {
    return {
      dataSource: [],
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        total: 0
      },
      columns: [
        {
          title: '订单编号',
          align: 'center',
          dataIndex: 'orderdetailBarcode'
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'custName'
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'orderType'
        },
      ],
      url: {
        listDetail: '/mzOrder/mzOrderDetail/listDetail'
      },
    }
  },
  created () {
    let that = this
    that.loadData()
  },
  methods: {
    // 查询
    handleTableChange (pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    loadData () {
      let that = this
      let params = {}
      that.loading = true
      params.pageNo = that.ipagination.current
      params.pageSize = that.ipagination.pageSize
      // 调用查询数
      getAction(that.url.listDetail, params)
        .then(res => {
          if (res.success) {
            that.loading = false
            that.dataSource= res.result.records
            that.ipagination.total = res.result.total
          } else {
            that.$error({ title: '主表查询失败', content: res.message })
          }
        })
        .finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
        })
    }
  }
}
</script>
<style scoped>
</style>