文章目錄

• • • • • • 1.案例部分代碼
          • 2. 簡(jiǎn)述
          • 3.案例代碼

1.案例部分代碼

<a-table:columns="columns":row-key="record => record.id":data-source="ebooks":pagination="pagination":loading="loading"@change="handleTableChange"><template #cover="{ text: cover }"><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. 簡(jiǎn)述

1.:columns 定義列數(shù) 2.row-key 定義key 一般采用id不重復(fù)唯一即可 3.data-source 數(shù)據(jù)來(lái)源，為后端返回的數(shù)據(jù)列表list 4.:pagination 分頁(yè)標(biāo)簽，請(qǐng)求后端查詢攜帶當(dāng)前頁(yè)和每頁(yè)顯示的條數(shù)2個(gè)參數(shù)，后端需要返回總共多少條數(shù)total，前端接收到total后，自動(dòng)實(shí)現(xiàn)分頁(yè) 5.:loading 加載效果，默認(rèn)不顯示，請(qǐng)求后端查詢過(guò)程中顯示加載效果，后端有返回就關(guān)閉加載效果。返回分為成功和 失敗2種 6.@change="handleTableChange 點(diǎn)擊左下角，分頁(yè)參數(shù)，此事件就會(huì)監(jiān)聽(tīng)到，當(dāng)前是第幾頁(yè)page，每頁(yè)顯示多少條size，這2個(gè)參數(shù)，然后請(qǐng)求后端查詢接口，完成分頁(yè)效果。注：關(guān)于具體每條顯示多少條這里默認(rèn)是固定的，可以是動(dòng)態(tài)的，例如：頁(yè)面可以顯示當(dāng)前頁(yè)可以可顯示的條數(shù)，傳遞參數(shù)，請(qǐng)求后端效果是一樣的。后期可以優(yōu)化。

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 #cover="{ text: cover }"><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() {//定義響應(yīng)式變量const ebooks = ref()//定義初始化分頁(yè)參數(shù)const pagination = ref({//當(dāng)前頁(yè)current: 1,//每頁(yè)的分頁(yè)條數(shù)pageSize: 4,total: 0})//初始化加載效果無(wú)const loading = ref(false)//表格const columns = [{title: '封面',dataIndex: 'cover',//特殊渲染slots: {customRender: 'cover'}},{title: '名稱',dataIndex: 'name'},{title: '分類',dataIndex: 'category'},{title: '文檔數(shù)',dataIndex: 'docCount'},{title: '閱讀數(shù)',dataIndex: 'viewCount'},{title: '點(diǎn)贊數(shù)',dataIndex: 'voteCount'},{title: 'Action',key: 'action',slots: {customRender: 'action'}}];/*** 數(shù)據(jù)查詢*/const handleQuery = (params: any) => {console.log("當(dāng)前頁(yè)：" + params.page);console.log("每頁(yè)的分頁(yè)條數(shù)：" + 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;// 重置分頁(yè)按鈕pagination.value.current = params.page;//總條數(shù)pagination.value.total = data.content.total;console.log("后端返回查詢總條數(shù)：" + data.content.total);});};/*** 表格點(diǎn)擊頁(yè)碼時(shí)觸發(fā)*/const handleTableChange = (pagination: any) => {// console.log("當(dāng)前頁(yè)：" + pagination.current);// console.log("每頁(yè)的分頁(yè)條數(shù)：" + 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>

總結(jié)

以上是生活随笔為你收集整理的Ant Design Vue list表格组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。