antd vue 中使用表格加载动态数据
在api接口文件中写一个get请求方法export const queryWithBusinessNo = function (params: { businessNo: string }) {return helper.get("/business/queryWithBusinessNo", params);}然后在写得页面中引入该方法,也可以直接写这个方法import {...
·
在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>
本人的使用方法,可能不一定规范,仅供参考
更多推荐
已为社区贡献2条内容
所有评论(0)