效果图
代码
<template>
<div class="home">
<a-table
:pagination="pagination"
:columns="Projectcolumns"
:data-source="Projectdata"
:bordered='true' >
<template slot="operation" slot-scope="text, record">详情</template>
</a-table>
</div>
</template>
<script>
const Projectcolumns = [
{
title: '名字',
dataIndex: 'pname',
key: 'pname',
align:'center',
},{
title: '年龄',
dataIndex: 'age',
key: 'age',
width:'20%',
align:'center',
},{
title: '操作',
dataIndex: 'operation',
key: 'operation',
width:'20%',
align:'center',
scopedSlots: { customRender: 'operation' },// 直接对应插槽名为operation的模板
}
];
const Projectdata = [];
for (let i = 0; i < 100; i++) {
Projectdata.push({
key: i.toString(),
pname: `Edrward ${i}`,
age: 32,
});
}
export default {
data() {
return {
Projectdata,
Projectcolumns,
pagination:{
defaultPageSize:4, //默认的每页条数
total:100, //数据总数
size:'small', //分页尺寸
showSizeChanger:true, //是否可以改变 pageSize
pageSizeOptions:['2','4','8','10'], //指定每页可以显示多少条
showQuickJumper:true, //是否可以快速跳转至某页
},
};
},
methods: { },
}
</script>