Vue3+Vite+TypeScript+Element Plus開發-22.客制Table組件

?系列文檔目錄

Vue3+Vite+TypeScript安裝

Element Plus安裝與配置

主頁設計與router配置

靜態菜單設計

Pinia引入

Header響應式菜單縮展

Mockjs引用與Axios封裝

登錄設計

登錄成功跳轉主頁

多用戶動態加載菜單

Pinia持久化

動態路由?-動態增加路由

動態路由-動態刪除路由?

路由守衛-無路由跳轉404

?路由守衛-未登錄跳轉登錄界面

?登錄退出

Tags-組件構建

Tags-與菜單聯動?

Pinia持久化優化

按鈕權限

客制按鈕組件

客制Table組件

客制Form組件

國際化

配置文件

?文章目錄

?系列文檔目錄

?文章目錄

前言

子組件-Table組件構建

父組件-Table組件顯示

演示效果

?后續

代碼下載?

前言

上一章節討論按鈕組件構建與使用，本章節重點討論Table組件構建與結合按鈕組件使用。

子組件-Table組件構建

創建文件： ?components/ActionTableCont.vue ?

實現功能：

1. 欄位定義： 欄位配置由父組件傳入，欄位可自定義隱藏。

2. 數據來源： 表格數據由父組件提供。

3. 勾選功能： 支持行數據的勾選操作。

4. 分頁功能： 集成分頁功能，支持數據分頁顯示。

<template><div><!-- 表格 --><el-table:data="currentPageData"style="width: 100%"border@selection-change="handleSelectionChange"><!-- 選擇列 --><el-table-columnv-if="showSelection"type="selection"width="55"align="center"></el-table-column><!-- 序號列 --><el-table-columntype="index"label="序號"width="50"align="center"></el-table-column><!-- 動態列 --><el-table-columnv-for="column in visibleColumns":key="column.prop":prop="column.prop":label="column.label":width="column.width":align="column.align || 'left'"></el-table-column></el-table><!-- 分頁 --><el-pagination:current-page="currentPage":page-size="pageSize":page-sizes="pageSizes"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"@size-change="handleSizeChange"@current-change="handleCurrentChange"style="margin-top: 20px"></el-pagination></div>
</template><script setup>
import { ref, computed, defineProps, defineEmits, watch } from 'vue';const props = defineProps({tableColumns: {type: Array,required: true,default: () => [],},tableData: {type: Array,required: true,default: () => [],},pageSize: {type: Number,default: 10,},pageSizes: {type: Array,default: () => [5, 10, 15, 20],},showSelection: {type: Boolean,default: false,},
});const emit = defineEmits(['update:currentPage', 'update:pageSize', 'selection-change']);const currentPage = ref(1);const currentPageData = computed(() => {const start = (currentPage.value - 1) * props.pageSize;const end = start + props.pageSize;return props.tableData.slice(start, end);
});const visibleColumns = computed(() => {return props.tableColumns.filter((column) => !column.hide);
});const handleSizeChange = (newSize) => {console.log(`分頁大小改變，新的分頁大小為: ${newSize}`);emit('update:pageSize', newSize);currentPage.value = 1; // 重置當前頁為第一頁emit('update:currentPage', currentPage.value);
};const handleCurrentChange = (newPage) => {console.log(`當前頁碼改變，新的頁碼為: ${newPage}`);currentPage.value = newPage;emit('update:currentPage', currentPage.value);
};const handleSelectionChange = (selection) => {emit('selection-change', selection);
};// 監聽 currentPage 和 pageSize 的變化并記錄日志
watch(currentPage, (newVal, oldVal) => {console.log(`currentPage changed from ${oldVal} to ${newVal}`);
});watch(() => props.pageSize, (newVal, oldVal) => {console.log(`pageSize changed from ${oldVal} to ${newVal}`);
});
</script>

父組件-Table組件顯示

功能說明：

1. 按鈕組件引用： 刪除按鈕默認不可用。

2. 表格組件引用： 每頁顯示 5 條數據。

3. 欄位數據模擬： 地址欄位默認隱藏。

4. 勾選功能：

????????? 勾選數據后，刪除按鈕變為可用狀態；

????????? 未勾選任何數據時，刪除按鈕保持不可用狀態。

5. 勾選數據展示： 勾選的數據會在表格下方空白處顯示。

6. 刪除按鈕功能： 點擊刪除按鈕時，獲取勾選的數據。

<template><div><ActionButtonGroup:show-add="hasPermission('demo2:create')"  :show-delete="true":disabled-add="false":disabled-edit="!selectedData.length":disabled-delete="!selectedData.length"@add="handleAdd"@edit="handleEdit"@delete="handleDelete"/><!-- 表格 --><CustomTable:tableColumns="columns":tableData="data":pageSize="pageSize":pageSizes="[5, 10, 15, 20, 30]":showSelection="true"@update:currentPage="currentPage = $event"@update:pageSize="pageSize = $event"@selection-change="handleSelectionChange"/><!-- 顯示選中數據 --><div v-if="selectedData.length > 0" style="margin-top: 20px"><h3>選中的數據：</h3><pre>{{ selectedData }}</pre></div></div>
</template><script setup>
import { ref } from 'vue';
import CustomTable from '@/components/ActionTableCont.vue';
import { usePermission } from "@/utils/permissionUtils";
import ActionButtonGroup from "@/components/ActionBtnHdrCont.vue";
import {Plus,Check,Delete,Edit,Message,Search,Star,Upload,
} from '@element-plus/icons-vue'const hasPermission = usePermission();const columns = ref([{prop: 'date',label: '日期',width: 180,},{prop: 'name',label: '姓名',width: 180,},{prop: 'address',label: '地址',hide: true,},
]);const data = ref([{id: 1,date: '2025-04-14',name: '張三',address: '上海市普陀區金沙江路 1518 弄',},{id: 2,date: '2025-04-15',name: '李四',address: '上海市普陀區金沙江路 1517 弄',},{id: 3,date: '2025-04-16',name: '王五',address: '上海市普陀區金沙江路 1516 弄',},{id: 4,date: '2025-04-17',name: '趙六',address: '上海市普陀區金沙江路 1515 弄',},{id: 5,date: '2025-04-18',name: '孫七',address: '上海市普陀區金沙江路 1514 弄',},{id: 6,date: '2025-04-19',name: '周八',address: '上海市普陀區金沙江路 1513 弄',},{id: 7,date: '2025-04-20',name: '吳九',address: '上海市普陀區金沙江路 1512 弄',},{id: 8,date: '2025-04-21',name: '鄭十',address: '上海市普陀區金沙江路 1511 弄',},{id: 9,date: '2025-04-22',name: '錢十一',address: '上海市普陀區金沙江路 1510 弄',},{id: 10,date: '2025-04-23',name: '孔十二',address: '上海市普陀區金沙江路 1509 弄',},{id: 11,date: '2025-04-24',name: '秦十三',address: '上海市普陀區金沙江路 1508 弄',},{id: 12,date: '2025-04-25',name: '尤十四',address: '上海市普陀區金沙江路 1507 弄',},
]);const currentPage = ref(1);
const pageSize = ref(5);// 默認每頁顯示5條數據// 用于存儲選中的數據
const selectedData = ref([]);// 處理選中數據變化
const handleSelectionChange = (selection) => {selectedData.value = selection;
};// 獲取選中數據
const handleDelete = () => {console.log('Selected Data:', selectedData.value);console.log('Selected  Data length:', selectedData.value.length);if (selectedData.value.length > 0) {// 刪除邏輯console.log('Deleting selected data...');selectedData.value = [];} else {console.log('No selected data to delete.');}};
</script>

演示效果

測試效果：

1. 地址欄位： 地址欄位未顯示。

2. 數據加載： 數據被成功加載。

3. 分頁顯示： 頁碼與翻頁功能顯示正確。

4. 刪除按鈕： 刪除按鈕默認不可用。

測試效果：

1. 勾選操作：

????????? 勾選任意數據后，刪除按鈕顯示，選中數據顯示勾選資料

????????? 未勾選任何數據時，刪除按鈕不顯示。

2. 全選與全取消：

????????? 支持全選操作，全選后刪除按鈕顯示，選中數據顯示勾選資料

????????? 支持全取消操作，全取消后刪除按鈕不顯示。

測試效果：

1. 每頁顯示筆數： 每頁顯示的記錄數正確。

2. 頁碼選擇： 頁碼選項可正常選擇。

3. 前往頁碼： 支持跳轉到指定頁碼。

?后續

本章節主要介紹：客制化 Table 組件的實現。下一章節將討論：Form 組件的構建。

代碼下載?

GitCode - 全球開發者的開源社區,開源代碼托管平臺GitCode是面向全球開發者的開源社區,包括原創博客,開源代碼托管,代碼協作,項目管理等。與開發者社區互動,提升您的研發效率和質量。https://gitcode.com/sen_shan/ssVue3Demo.gitss.vue3.demo: 本項目以 Vue3、Vite、TypeScript、Element Plus 為核心框架，結合 Vue Router、Element Plus Icons、Less、Axios、Pinia、Mock 等技術，初始的構建登錄，主界面，權限控制，按鈕組件，table組件，form組件等小模型，可以隨意搭建web管理系統https://gitee.com/sen_shan/ssVue3Demo.git