目錄

一.項目文件結構

二.實現代碼

1.子組件（表格組件）

?2.父組件（使用表格）

---

一.項目文件結構

1.表格組件（子組件）位置

2.使用表格組件的頁面文件（父組件）位置

3.演示圖片位置

elementPlus表格?Table 表格 | Element Plus

4.笑果演示

表格笑果

點擊圖片放大顯示笑果

二.實現代碼

1.子組件（表格組件）

1. src/views/Table.vue html部分

<!-- 表格區域 傳值格式 -->
<!-- 單行文字：{ prop: 'inventory', label: '庫存', width: '90' }, -->
<!-- 圖片格式：{ prop: 'profile_picture_url', label: '商品主圖', width: '110', isImg: true, height: 50 }, -->
<!-- 雙行文字格式：{ prop: 'information', label: '商品信息', width: '140', doubleRow: true, text1: '貨號', text2: '售價' }, -->
<!-- 開關格式：{ prop: 'listed', label: '是否上架', width: '110', isSwitch: true, }, -->
<el-table class="" v-loading="tableLoading" element-loading-text="Loading...":element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"element-loading-background="rgba(122, 122, 122, 0.8)" border :data="paginatedData":default-sort="{ prop: 'date', order: 'descending' }" height="calc(100vh - 235px)":show-overflow-tooltip="true" @selection-change="handleSelectionChange"><el-table-column v-if="isSelected" type="selection" :selectable="selectable" width="55" /><el-table-column fixed align="center" label="序號" width="60"><template #default="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column align="center" sortable v-for="(i, n) in columns" :key="n" :prop="i.prop" :label="i.label":formatter="i.formatter" :width="i.width"><template #default="scope"><!-- 當表頭數據中有isImg為true時，使單元格展示圖片（點擊事件為放大顯示） --><img class="image" v-if="i.isImg && scope.row[i.prop]" :src="scope.row[i.prop]" alt=""draggable="false" :style="`width: ${i.height}px; height: ${i.height}px`"@click="handleImageClick(scope.row[i.prop])" /><img v-else-if="i.isImg && !scope.row[i.prop]" src="@/assets/image/giegie.jpg" alt=""draggable="false" :style="`width: ${i.height}px; height: ${i.height}px`" /><span v-else-if="i.doubleRow"><span class="doubleRow">{{ i.text1 + ': ' }}</span> {{ scope.row.information?.text1 ?scope.row.information.text1 : '-' }}<br><span class="doubleRow">{{ i.text2 + ': ' }}</span> {{ scope.row.information?.text2 ?scope.row.information.text2 : '-' }}</span><el-switch v-else-if="i.isSwitch" active-text="" inactive-text="" active-color="#2fa1f1"inactive-color="#9c9c9c" v-model="scope.row[i.prop]" @change="handleStatusChange(scope.row)" /><span v-else>{{ formatCell(i, scope.row) }}</span></template></el-table-column><!-- 固定列 --><el-table-column v-if="isFixedColumn" fixed="right" align="center" label="操作" width="100"><template #default="scope"><el-button link type="primary" size="small" @click="btnListTable[0].click(scope.row, 1)">{{btnListTable[0].name}}</el-button><el-popover placement="bottom-start" trigger="click":popper-style="{ minWidth: '55px', padding: '10', width: 'auto', cursor: 'pointer' }"><template #reference><el-button link type="primary" size="small">更多</el-button></template><div><el-button v-for="(i, n) in btnListTable2" :key="n" link type="primary" size="small"@click="i.click(scope.row, 1)">{{i.name }}</el-button></div></el-popover></template></el-table-column></el-table>

js部分

<script setup lang='ts'>
import { ref, computed, defineProps, onMounted, defineEmits } from 'vue';
// 父傳子
const props = defineProps({columns: {// 表頭數據type: Array,validator: () => {return [];}},paginatedData: {// 表格數據type: Array,validator: () => {return [];}},btnListTable: {// 按鈕組type: Array,validator: () => {return [];}},isFixedColumn: {// 是否有操作列type: Boolean,default: true},isSelected: {// 是否有選擇框type: Boolean,default: false},tableLoading: {// 是否加載中type: Boolean,default: false,},
});// 操作列 更多按鈕組
const btnListTable2 = ref(props.btnListTable.slice(1))
// 多選
interface User {id: numberdate: stringname: stringaddress: string
}
// 選擇的內容
const multipleSelection = ref<User[]>([])
const selectable = (row: User) => ![1, 2].includes(row.id)
const handleSelectionChange = (val: User[]) => {multipleSelection.value = val
}
// 分頁
const currentPage = ref(1);
const pageSize = ref(10);
const disabled = ref(false)
const background = ref(false)
const enlargedImageUrl = ref('');
const dialogVisible = ref(false);// 點擊圖片事件
const handleImageClick = (imageUrl: any) => {enlargedImageUrl.value = imageUrl;dialogVisible.value = true;
}// 子傳父
const def = defineEmits(['pageSize', 'currentPage', 'switch']);// 分頁事件 val: number
const handleSizeChange = () => {def('pageSize', pageSize.value)
}
const handleCurrentChange = () => {def('currentPage', currentPage.value)
}// 計算總數據條數
const totalData = computed(() => props.paginatedData.length);
// 開關事件
const handleStatusChange = ((row: any) => {def('switch', row)
})
// 加載中
const svg = `<path class="path" d="M 30 15L 28 17M 25.61 25.61A 15 15, 0, 0, 1, 15 30A 15 15, 0, 1, 1, 27.99 7.5L 15 15" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`// 格式化單元格內容
const formatCell = (column: any, row: string) => {return column.formatter ? column.formatter(row) : row[column.prop];
}
</script>

?2.父組件（使用表格）

1.src/views/Dashboard.vue html部分

<template><div><Table :columns="columns" :paginatedData="paginatedData" :btnListTable="btnListTable":isFixedColumn="true" :tableLoading="loading" @pageSize="handlePageSize" @currentPage="handleCurrentPage"></Table></div>
</template>

?2.js部分

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import type { FormRules } from 'element-plus'
import Table from '../components/Table.vue';
import DialogCom from '../components/DialogCom.vue';
import { list } from '../api/api.ts'
import { require } from '@/utils/require';
// 表格相關 開始
const loading = false
// 表頭數據
const columns = ref([{ prop: 'user_id', label: '用戶ID', width: 130 },{ prop: 'username', label: '用戶名', width: 120 },{ prop: 'email', label: '郵件地址', width: 200 },{ prop: 'phone_number', label: '手機號碼', width: 170 },{ prop: 'full_name', label: '真實姓名', width: 120 },{ prop: 'date_of_birth', label: '生日', width: 140 },{ prop: 'gender', label: '性別', width: 100 },{ prop: 'listed', label: '是否打籃球', width: '130', isSwitch: true, },{ prop: 'profile_picture_url', label: '頭像', width: 90, isImg: true, height: 20 },// 當是否激活為true時，顯示"是"{ prop: 'is_active', label: '是否激活', width: 120, formatter: (row: any) => row.is_active ? '是' : '否' },{ prop: 'created_at', label: '創建時間', width: 180, formatter: (row: any) => formattedDateTime(row.created_at) },{ prop: 'updated_at', label: '更新時間', width: 180 },
]);
// 表格數據
const paginatedData = ref([{ user_id: 'ID', username: '蘇珊', email: 'singJumpRapBasketball@ikun.com', is_active: true, created_at: '2023-10-05T14:48:00.000Z', listed: true },{ user_id: 'ID', username: '打球被笑兩年半', email: 'kunkun@ikun.com', is_active: false, created_at: '2023-10-05T14:48:00.000Z', profile_picture_url: require('@/assets/image/giegie.jpg') },
]);
// 查詢條件
const formBtnList = reactive({pageSize: 10,currentPage: 1,
})
// 操作列按鈕事件
const pricingDetail = () => {console.log('pricingDetail')
}
const reject = () => {console.log('reject')
}
// 操作列按鈕組
const btnListTable = ref([{ name: '編輯', type: 'primary', click: pricingDetail },{ name: '添加賬戶', type: 'primary', click: reject },{ name: '導出', type: 'primary', click: reject },
])
// 處理日期時間 （ISO 8601 格式 如：2023-10-05T14:48:00.000Z ）
const formattedDateTime = (dateData: string) => {const date = new Date(dateData);const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份從0開始，需要加1const day = String(date.getDate()).padStart(2, '0');const hours = String(date.getHours()).padStart(2, '0');const minutes = String(date.getMinutes()).padStart(2, '0');const seconds = String(date.getSeconds()).padStart(2, '0');return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 分頁事件觸發
const handlePageSize = (pageSize: number) => {// 每頁大小// console.log('handlePageSize', pageSize);formBtnList.pageSize = pageSizehandInquire()
};
const handleCurrentPage = (currentPage: number) => {// 頁碼// console.log('handleCurrentPage', currentPage);formBtnList.currentPage = currentPagehandInquire()
};
// 表格相關 結束

以上，感謝觀看，歡迎指正