antd vue 中使用表格加载动态数据

在api接口文件中写一个get请求方法

export const queryWithBusinessNo = function (params: { businessNo: string }) {
    return helper.get("/business/queryWithBusinessNo", params);
}

然后在写得页面中引入该方法，也可以直接写这个方法

import { queryWithBusinessNo } from "@/api/module/api-loan-business";

然后把表格框架搭起来，这里还需要写rowkey，后面会加

 <a-table :columns="columns":dataSource="data" >
 </a-table>

在script下面写colunms，这里colums的dataIndex和后台给的值名字一样

const columns = [{
  title: '解押记录码',
  dataIndex: 'businessNo',
}, {
  title: '金额',
  dataIndex: 'goodsPledgePrice',
}, {
  title: '当前状态',
  dataIndex: 'busStatus',
  }
},{
  title: '详情',
}];

在created函数里写请求方法，businessNo是我传给后台的值，res是返回的数据

created() {
    queryWithBusinessNo ({businessNo:this.businessNo})
            .then(res=> {
              this.data = res
            })
            .catch(err => {
              this.$showError(err);
            });

  }

接下来data写到dataSource里就好了

改变值为别的文字，用 customRender

{
  title: '当前状态',
  dataIndex: 'busStatus',
  customRender:function (text) {
    if(text == 40) {
      return '价格确认'
    }else if (text == 41) {
      return '货物解押审核'
    }else if (text == 42) {
      return '出库上传凭证'
    }else if (text == 43) {
      return '上传仓单'
    }else if (text == 44) {
      return '出库凭证审核'
    }else if (text == 45) {
      return '扣库存'
    }else if (text == 46) {
      return '解押完成'
    }else {
      return text
    }
  }

插槽用scopedSlots

scopedSlots: { customRender: 'operation' },

最后的样子

          <a-table
                  :rowKey="record => record.id"
                  :columns="columns"
                  :dataSource="data"
          >
            <template slot="operation" slot-scope="text, record">
                <a @click="() => $router.push(`/business/outStockDetail/${record.businessNo}`)">详情</a>
                //a里面可以跳转
              <!--</div>-->
            </template>
          </a-table>

本人的使用方法，可能不一定规范，仅供参考