参考:https://blog.csdn.net/qq_38344500/article/details/105995886
核心代码
<!-- 序号 -->
<span slot="num" slot-scope="text, record, index">
{{ (pageParams.page-1) * pageParams.rows + parseInt(index)+1 }}
</span>
{
title: '序号',
dataIndex: 'num',
key: 'num', width: 50,
align: 'center',
fixed: true,
scopedSlots: {
customRender: 'num'
}
},
完整代码
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
:rowKey="(item) => item.id"
@change="handleTableChange"
:scroll="{x:1500}"
bordered
>
<!-- 序号 -->
<span slot="num" slot-scope="text, record, index">
{{ (pageParams.page-1) * pageParams.rows + parseInt(index)+1 }}
</span>
<template slot="operation" slot-scope="text,item">
<a-button
type="primary"
size="small"
@click="showShow(item)"
style="margin-left: 10px; font-size: 10px"
>
查看
</a-button>
<a-button
disabled
@click="cancel(item)"
type="danger"
size="small"
style="margin-left: 10px; font-size: 10px"
>
撤销
</a-button>
</template>
</a-table>
const columns = [
{
title: '序号',
dataIndex: 'num',
key: 'num', width: 50,
align: 'center',
fixed: true,
scopedSlots: {
customRender: 'num'
}
},
{
title: "身份证",
dataIndex: "idcard",
align: "center",
width: 250,
},
{
title: "手机号",
dataIndex: "tel",
width: 300,
align: "center",
},
{
title: "车牌号",
dataIndex: "ship",
width: 300,
align: "center",
},
{
title: "车轴类型",
dataIndex: "trucktype",
width: 300,
align: "center",
},
{
title: "审核类型",
dataIndex: "state",
width: 300,
align: "center",
customRender: function (val) {
if (val === 1) {
return "未审核";
} else if (val === 2) {
return "已审核"
}
}
},
{
title: "操作",
dataIndex: "操作",
align: "center",
fixed: "right",
width: 180,
scopedSlots: {customRender: "operation"},
},
]
export default {
components: {
edit
},
data() {
return {
pageParams: {
ship: '',
tel: '',
state: 1, // 1:未审核 2:已审核
page: 1,
rows: 10,
},
showFlag_list: true,
showFlag_edit: false,
loading_sk: false,
form: {},
data: [],
columns,
pagination: {
total: 0,
current: 1,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: [
"10",
"20",
"50",
], //每页中显示的数据
showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
},
};
},
methods: {
// 搜索
handleSearch() {
this.pageParams.page = 1;
this.loadData();
},
// 清空
handleClear() {
this.pageParams.tel = ''
this.pageParams.ship = ''
this.loadData();
},
// 分页
handleTableChange(page, pageSize) {
this.pageParams.page = page.current;
this.pageParams.rows = page.pageSize;
this.loadData();
},
// 加载数据
loadData() {
this.$myapi.api_kj_biz_car.page(this.pageParams).then((response) => {
if (response.data.code === 1) {
const result = response.data;
console.log('result:', result)
this.data = result.data.items;
this.pagination.pageSize = result.data.rows;
this.pagination.total = result.data.total;
this.pagination.current = result.data.page;
this.pageParams.page = result.data.page;
this.pageParams.rows = result.data.rows;
} else {
console.log('查询到的数据为空')
}
});
}
}