导入ant-design之后,使用a-table
a-table配置为:
<a-table
:data-source="dataSource"
:scroll="{ x: '100%' }"
:columns="columns"
:pagination="{
current: pagination.current,
total: pagination.total,
showSizeChanger: true,
pageSizeOptions: ['10'],
buildOptionText: (pageSizeOptions) => `${pageSizeOptions.value}条/页`,
showTotal: (total) => `共 ${total} 条`,
onShowSizeChange: onShowSizeChange,
onChange: handleTableChange,
}"
:rowClassName="rowClassName"
@change="onShowSizeChange"
rowKey="id"
>
pagination在data中设置为:
pagination: {
current: 1, //当前第几分页
pageSize: 10, //一次展示多少数据
total: 0, //总共多少数据
pageSizeOptions: ["10"], //可选择展示多少数据
showTotal: (total) => `共${total}条`,
showSizeChanger: true, //是否展示切换器
showQuickJumper: true, //是否可以快速调整至某页
},
dataSource在需要动态添加时设置为空就可。
改变页码实现分页查的变化:
onShowSizeChange(pagination) {
this.pagination.current = pagination.current;
this.pagination.pageSize = pagination.pageSize;
this.getList(this.pagination.current);//分页查
},
在data的columns中给要添加插槽的表头写成:
columns:[
{
title: "序号",
dataIndex: "idx",
scopedSlots: { customRender: "idx" },
},
{
title: "title",
dataIndex: "dataIndex",
scopedSlots: { customRender: "dataIndex" },
},
{
title:"title2",
dataIndex:"dataIndex2",//无需插槽
}]
简单说明几种情况:
当需要在表格中添加序号时:
<span slot="idx" slot-scope="text, record, index">
{{
(pagination.current - 1) * pagination.pageSize +parseInt(index) +1}}
</span>
当需要根据返回的内容显示不同的颜色时:
<span slot="status" slot-scope="status">
<div style="color: green" v-if="status == '同意'">
{{ status }}
</div>
<div style="color: red" v-else-if="status == '驳回'">
{{ status }}
</div>
<div style="color: orange" v-else-if="status == '审批中'">
{{ status }}
</div>
<div style="color: orange" v-else>--</div>
</span>
当需要鼠标悬浮显示提示框时:
<span slot="stockYjNewPartsName" slot-scope="text, record">
<a-tooltip>
<template slot="title">
{{ text }}
</template>
{{ text }}
</a-tooltip>
</span>