1.案例部分代码
<a-table
:columns="columns"
:row-key="record => record.id"
:data-source="ebooks"
:pagination="pagination"
:loading="loading"
@change="handleTableChange"
>
<template
<img v-if="cover" :src="cover" alt="avatar"/>
</template>
<template v-slot:action="{ text, record }">
<a-space size="small">
<a-button type="primary">编辑</a-button>
<a-button type="danger">删除</a-button>
</a-space>
</template>
</a-table>
2. 简述
1.:columns 定义列数
2.row-key 定义key 一般采用id不重复唯一即可
3.data-source 数据来源,为后端返回的数据列表list
4.:pagination 分页标签,请求后端查询携带当前页和每页显示的条数2个参数,后端需要返回总共多少条数total
,前端接收到total后,自动实现分页
5.:loading 加载效果,默认不显示,请求后端查询过程中显示加载效果,后端有返回就关闭加载效果。返回分为成功和 失败2种
6.@change="handleTableChange 点击左下角,分页参数,此事件就会监听到,当前是第几页page,每页显示多少条size,这2个参数,然后请求后端查询接口,完成分页效果。
注:关于具体每条显示多少条这里默认是固定的,可以是动态的,例如:页面可以显示当前页可以可显示的条数,传递参数,请求后端效果是一样的。后期可以优化。
3.案例代码
<template>
<a-layout>
<a-layout-content
:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
>
<a-table
:columns="columns"
:row-key="record => record.id"
:data-source="ebooks"
:pagination="pagination"
:loading="loading"
@change="handleTableChange"
>
<template
<img v-if="cover" :src="cover" alt="avatar"/>
</template>
<template v-slot:action="{ text, record }">
<a-space size="small">
<a-button type="primary">编辑</a-button>
<a-button type="danger">删除</a-button>
</a-space>
</template>
</a-table>
</a-layout-content>
</a-layout>
</template>
<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue'
import axios from 'axios'
export default defineComponent({
name: 'AdminEbook',
setup() {
//定义响应式变量
const ebooks = ref()
//定义初始化分页参数
const pagination = ref({
//当前页
current: 1,
//每页的分页条数
pageSize: 4,
total: 0
})
//初始化加载效果无
const loading = ref(false)
//表格
const columns = [
{
title: '封面',
dataIndex: 'cover',
//特殊渲染
slots: {customRender: 'cover'}
},
{
title: '名称',
dataIndex: 'name'
},
{
title: '分类',
dataIndex: 'category'
},
{
title: '文档数',
dataIndex: 'docCount'
},
{
title: '阅读数',
dataIndex: 'viewCount'
},
{
title: '点赞数',
dataIndex: 'voteCount'
},
{
title: 'Action',
key: 'action',
slots: {customRender: 'action'}
}
];
/**
* 数据查询
*/
const handleQuery = (params: any) => {
console.log("当前页:" + params.page);
console.log("每页的分页条数:" + params.size);
loading.value = true;
axios.get("/ebook/list", {
params: {
page: params.page,
size: params.size
}
}).then((response) => {
loading.value = false;
const data = response.data;
ebooks.value = data.content.list;
// 重置分页按钮
pagination.value.current = params.page;
//总条数
pagination.value.total = data.content.total;
console.log("后端返回查询总条数:" + data.content.total);
});
};
/**
* 表格点击页码时触发
*/
const handleTableChange = (pagination: any) => {
// console.log("当前页:" + pagination.current);
// console.log("每页的分页条数:" + pagination.pageSize);
handleQuery({
page: pagination.current,
size: pagination.pageSize
});
};
onMounted(() => {
handleQuery({
page: 1,
size: pagination.value.pageSize
});
})
return {
ebooks,
pagination,
loading,
columns,
handleTableChange
}
}
})
</script>
<style scoped>
img {
width: 50px;
height: 50px;
}
</style>