vue3+Ts+elementPlus二次封装Table分页表格，表格内展示图片、switch开关、 ...

目录

一.项目文件布局
二.实当代码
1.子组件（表格组件）
 2.父组件（使用表格）

---

一.项目文件布局

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

2.使用表格组件的页面文件（父组件）位置

3.演示图片位置

elementPlus表格 Table 表格 | Element Plus
4.笑果演示
表格笑果

点击图片放大显示笑果

二.实当代码

1.子组件（表格组件）

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

1. <!-- 表格区域 传值格式 -->
2. <!-- 单行文字：{ prop: 'inventory', label: '库存', width: '90' }, -->
3. <!-- 图片格式：{ prop: 'profile_picture_url', label: '商品主图', width: '110', isImg: true, height: 50 }, -->
4. <!-- 双行文字格式：{ prop: 'information', label: '商品信息', width: '140', doubleRow: true, text1: '货号', text2: '售价' }, -->
5. <!-- 开关格式：{ prop: 'listed', label: '是否上架', width: '110', isSwitch: true, }, -->
6. <el-table class="" v-loading="tableLoading" element-loading-text="Loading..."
7.             :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"
8.             element-loading-background="rgba(122, 122, 122, 0.8)" border :data="paginatedData"
9.             :default-sort="{ prop: 'date', order: 'descending' }" height="calc(100vh - 235px)"
10.             :show-overflow-tooltip="true" @selection-change="handleSelectionChange">
11.             <el-table-column v-if="isSelected" type="selection" :selectable="selectable" width="55" />
12.             <el-table-column fixed align="center" label="序号" width="60">
13.                 <template #default="scope">
14.                     {{ scope.$index + 1 }}
15.                 </template>
16.             </el-table-column>
17.             <el-table-column align="center" sortable v-for="(i, n) in columns" :key="n" :prop="i.prop" :label="i.label"
18.                 :formatter="i.formatter" :width="i.width">
19.                 <template #default="scope">
20.                     <!-- 当表头数据中有isImg为true时，使单元格展示图片（点击事件为放大显示） -->
21.                     <img class="image" v-if="i.isImg && scope.row[i.prop]" :src="scope.row[i.prop]" alt=""
22.                         draggable="false" :style="`width: ${i.height}px; height: ${i.height}px`"
23.                         @click="handleImageClick(scope.row[i.prop])" />
24.                     <img v-else-if="i.isImg && !scope.row[i.prop]" src="@/assets/image/giegie.jpg" alt=""
25.                         draggable="false" :style="`width: ${i.height}px; height: ${i.height}px`" />
26.                     <span v-else-if="i.doubleRow">
27.                         <span class="doubleRow">{{ i.text1 + ': ' }}</span> {{ scope.row.information?.text1 ?
28.                             scope.row.information.text1 : '-' }}<br>
29.                         <span class="doubleRow">{{ i.text2 + ': ' }}</span> {{ scope.row.information?.text2 ?
30.                             scope.row.information.text2 : '-' }}
31.                     </span>
32.                     <el-switch v-else-if="i.isSwitch" active-text="" inactive-text="" active-color="#2fa1f1"
33.                         inactive-color="#9c9c9c" v-model="scope.row[i.prop]" @change="handleStatusChange(scope.row)" />
34.                     <span v-else>
35.                         {{ formatCell(i, scope.row) }}
36.                     </span>
37.                 </template>
38.             </el-table-column>
39.             <!-- 固定列 -->
40.             <el-table-column v-if="isFixedColumn" fixed="right" align="center" label="操作" width="100">
41.                 <template #default="scope">
42.                     <el-button link type="primary" size="small" @click="btnListTable[0].click(scope.row, 1)">{{
43.                         btnListTable[0].name
44.                         }}</el-button>
45.                     <el-popover placement="bottom-start" trigger="click"
46.                         :popper-style="{ minWidth: '55px', padding: '10', width: 'auto', cursor: 'pointer' }">
47.                         <template #reference>
48.                             <el-button link type="primary" size="small">更多</el-button>
49.                         </template>
50.                         <div>
51.                             <el-button v-for="(i, n) in btnListTable2" :key="n" link type="primary" size="small"
52.                                 @click="i.click(scope.row, 1)">{{
53.                                     i.name }}</el-button>
54.                         </div>
55.                     </el-popover>
56.                 </template>
57.             </el-table-column>
58.         </el-table>

复制代码

js部分

1. <script setup lang='ts'>
2. import { ref, computed, defineProps, onMounted, defineEmits } from 'vue';
3. // 父传子
4. const props = defineProps({
5.     columns: {// 表头数据
6.         type: Array,
7.         validator: () => {
8.             return [];
9.         }
10.     },
11.     paginatedData: {// 表格数据
12.         type: Array,
13.         validator: () => {
14.             return [];
15.         }
16.     },
17.     btnListTable: {// 按钮组
18.         type: Array,
19.         validator: () => {
20.             return [];
21.         }
22.     },
23.     isFixedColumn: {// 是否有操作列
24.         type: Boolean,
25.         default: true
26.     },
27.     isSelected: {// 是否有选择框
28.         type: Boolean,
29.         default: false
30.     },
31.     tableLoading: {// 是否加载中
32.         type: Boolean,
33.         default: false,
34.     },
35. });
37. // 操作列 更多按钮组
38. const btnListTable2 = ref(props.btnListTable.slice(1))
39. // 多选
40. interface User {
41.     id: number
42.     date: string
43.     name: string
44.     address: string
45. }
46. // 选择的内容
47. const multipleSelection = ref<User[]>([])
48. const selectable = (row: User) => ![1, 2].includes(row.id)
49. const handleSelectionChange = (val: User[]) => {
50.     multipleSelection.value = val
51. }
52. // 分页
53. const currentPage = ref(1);
54. const pageSize = ref(10);
55. const disabled = ref(false)
56. const background = ref(false)
57. const enlargedImageUrl = ref('');
58. const dialogVisible = ref(false);
60. // 点击图片事件
61. const handleImageClick = (imageUrl: any) => {
62.     enlargedImageUrl.value = imageUrl;
63.     dialogVisible.value = true;
64. }
66. // 子传父
67. const def = defineEmits(['pageSize', 'currentPage', 'switch']);
69. // 分页事件 val: number
70. const handleSizeChange = () => {
71.     def('pageSize', pageSize.value)
72. }
73. const handleCurrentChange = () => {
74.     def('currentPage', currentPage.value)
75. }
77. // 计算总数据条数
78. const totalData = computed(() => props.paginatedData.length);
79. // 开关事件
80. const handleStatusChange = ((row: any) => {
81.     def('switch', row)
82. })
83. // 加载中
84. const svg = `
85.         <path class="path" d="
86.           M 30 15
87.           L 28 17
88.           M 25.61 25.61
89.           A 15 15, 0, 0, 1, 15 30
90.           A 15 15, 0, 1, 1, 27.99 7.5
91.           L 15 15
92.         " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
93.       `
95. // 格式化单元格内容
96. const formatCell = (column: any, row: string) => {
97.     return column.formatter ? column.formatter(row) : row[column.prop];
98. }
99. </script>

复制代码

 2.父组件（使用表格）

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

1. <template>
2.   <div>
3.     <Table :columns="columns" :paginatedData="paginatedData" :btnListTable="btnListTable"
4.       :isFixedColumn="true" :tableLoading="loading" @pageSize="handlePageSize" @currentPage="handleCurrentPage">
5.     </Table>
6.   </div>
7. </template>

复制代码

 2.js部分

1. <script setup lang='ts'>
2. import { ref, reactive } from 'vue'
3. import type { FormRules } from 'element-plus'
4. import Table from '../components/Table.vue';
5. import DialogCom from '../components/DialogCom.vue';
6. import { list } from '../api/api.ts'
7. import { require } from '@/utils/require';
8. // 表格相关 开始
9. const loading = false
10. // 表头数据
11. const columns = ref([
12.   { prop: 'user_id', label: '用户ID', width: 130 },
13.   { prop: 'username', label: '用户名', width: 120 },
14.   { prop: 'email', label: '邮件地址', width: 200 },
15.   { prop: 'phone_number', label: '手机号码', width: 170 },
16.   { prop: 'full_name', label: '真实姓名', width: 120 },
17.   { prop: 'date_of_birth', label: '生日', width: 140 },
18.   { prop: 'gender', label: '性别', width: 100 },
19.   { prop: 'listed', label: '是否打篮球', width: '130', isSwitch: true, },
20.   { prop: 'profile_picture_url', label: '头像', width: 90, isImg: true, height: 20 },
21.   // 当是否激活为true时，显示"是"
22.   { prop: 'is_active', label: '是否激活', width: 120, formatter: (row: any) => row.is_active ? '是' : '否' },
23.   { prop: 'created_at', label: '创建时间', width: 180, formatter: (row: any) => formattedDateTime(row.created_at) },
24.   { prop: 'updated_at', label: '更新时间', width: 180 },
25. ]);
26. // 表格数据
27. const paginatedData = ref([
28.   { user_id: 'ID', username: '苏珊', email: 'singJumpRapBasketball@ikun.com', is_active: true, created_at: '2023-10-05T14:48:00.000Z', listed: true },
29.   { 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') },
30. ]);
31. // 查询条件
32. const formBtnList = reactive({
33.   pageSize: 10,
34.   currentPage: 1,
35. })
36. // 操作列按钮事件
37. const pricingDetail = () => {
38.   console.log('pricingDetail')
39. }
40. const reject = () => {
41.   console.log('reject')
42. }
43. // 操作列按钮组
44. const btnListTable = ref([
45.   { name: '编辑', type: 'primary', click: pricingDetail },
46.   { name: '添加账户', type: 'primary', click: reject },
47.   { name: '导出', type: 'primary', click: reject },
48. ])
49. // 处理日期时间 （ISO 8601 格式 如：2023-10-05T14:48:00.000Z ）
50. const formattedDateTime = (dateData: string) => {
51.   const date = new Date(dateData);
52.   const year = date.getFullYear();
53.   const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
54.   const day = String(date.getDate()).padStart(2, '0');
55.   const hours = String(date.getHours()).padStart(2, '0');
56.   const minutes = String(date.getMinutes()).padStart(2, '0');
57.   const seconds = String(date.getSeconds()).padStart(2, '0');
58.   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
59. }
60. // 分页事件触发
61. const handlePageSize = (pageSize: number) => {// 每页大小
62.   // console.log('handlePageSize', pageSize);
63.   formBtnList.pageSize = pageSize
64.   handInquire()
65. };
66. const handleCurrentPage = (currentPage: number) => {// 页码
67.   // console.log('handleCurrentPage', currentPage);
68.   formBtnList.currentPage = currentPage
69.   handInquire()
70. };
71. // 表格相关 结束

复制代码

以上，感谢观看，接待指正

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。