文章目錄

• • • • • • 1.案例部分代碼
          • 2. 簡述
          • 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. 簡述

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 #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() {//定義響應式變量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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。