< 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>
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个参数，然后请求后端查询接口，完成分页效果。注：关于具体每条显示多少条这里默认是固定的，可以是动态的，例如：页面可以显示当前页可以可显示的条数，传递参数，请求后端效果是一样的。后期可以优化。
< 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>
