From 193af68d72a71268054f7d07395c2ea11210ecc1 Mon Sep 17 00:00:00 2001 From: 张诺 <zhang_12370@163.com> Date: 星期五, 30 五月 2025 09:40:28 +0800 Subject: [PATCH] 提交基础信息 三个模块 提交采购管理 --- src/components/Table/ETable.vue | 182 +++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 182 insertions(+), 0 deletions(-) diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue new file mode 100644 index 0000000..91f767a --- /dev/null +++ b/src/components/Table/ETable.vue @@ -0,0 +1,182 @@ +<template> + <el-table + v-loading="loading" + :data="tableData" + style="width: 100%" + :border="border" + :show-selection="showSelection" + :max-height="maxHeight" + @selection-change="handleSelectionChange" + @row-click="handleRowClick" + @row-dblclick="handleRowDblClick" + @cell-click="handleCellClick" + :max-width="maxWidth" + @export="handleExport" + > + <el-table-column v-if="showSelection" type="selection" width="55" align="center" /> + <el-table-column v-if="showIndex" label="搴忓彿" type="index" width="60" align="center" /> + <template v-for="col in columns" :key="col.prop"> + <el-table-column + v-bind="col" + :show-overflow-tooltip="col.showOverflowTooltip !== false" + > + <template v-if="col.slot" #default> + <slot></slot> + </template> + </el-table-column> + </template> + <!-- 鎿嶄綔鍒� --> + <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right"> + <template #default="scope"> + <slot name="operations" :row="scope.row"> + <el-button + v-if="operations.includes('edit')" + link + type="primary" + size="small" + @click="handleEdit(scope.row)" + >缂栬緫</el-button> + <el-button + v-if="operations.includes('delete')" + link + type="danger" + size="small" + @click="handleDelete(scope.row)" + >鍒犻櫎</el-button> + </slot> + </template> + </el-table-column> + </el-table> + </template> + + <script setup> + import { defineEmits } from 'vue' + import { ElMessage, ElMessageBox } from 'element-plus' + + const props = defineProps({ + // 鏈�澶у搴� + maxWidth: { + type: [String, Number], + default: 'auto' + }, + handleCellClick: { + type: Function, + default: () => {} + }, + handleRowClick: { + type: Function, + default: () => {} + }, + handleExport: { + type: Function, + default: () => {} + }, + handleRowDblClick: { + type: Function, + default: () => {} + }, + // 楂樺害 + maxHeight: { + type: [String, Number], + default: 'auto' + }, + // 鍔犺浇鐘舵�� + loading: { + type: Boolean, + default: false + }, + // border + border: { + type: Boolean, + default: false + }, + // 琛ㄦ牸鏁版嵁 + tableData: { + type: Array, + default: () => [] + }, + // 鏄惁鏄剧ず閫夋嫨鍒� + showSelection: { + type: Boolean, + default: true + }, + // 鏄惁鏄剧ず搴忓彿鍒� + showIndex: { + type: Boolean, + default: true + }, + // 鍒楅厤缃� + columns: { + type: Array, + default: () => [] + }, + // 鏄惁鏄剧ず鎿嶄綔鍒� + showOperations: { + type: Boolean, + default: true + }, + // 鎿嶄綔鍒楁爣绛� + operationsLabel: { + type: String, + default: '鎿嶄綔' + }, + // 鎿嶄綔鍒楀搴� + operationsWidth: { + type: [String, Number], + default: 160 + }, + // 鏄剧ず鍝簺鎿嶄綔鎸夐挳 + operations: { + type: Array, + default: () => ['edit', 'delete', 'export'] + }, + // 鍒犻櫎纭淇℃伅 + deleteConfirmText: { + type: String, + default: '纭鍒犻櫎璇ヨ褰曪紵' + } + }) + const emit = defineEmits(['selection-change', 'edit', 'delete', 'export']) + const handleSelectionChange = (selection) => { + emit('selection-change', selection) + } + const handleEdit = (row) => { + emit('edit', row) + } + const handleDelete = (row) => { + ElMessageBox.confirm( + props.deleteConfirmText, + '璀﹀憡', + { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + } + ).then(() => { + emit('delete', row) + }).catch(() => {}) + } + + const handleExport = (row) => { + emit('export', row) + } + </script> + + <style scoped> + :deep(.el-table) { + margin-bottom: 20px; + overflow-x: auto; + } + + :deep(.el-table th) { + background-color: #f5f7fa; + } + + /* 鍝嶅簲寮忔牱寮� */ + @media screen and (max-width: 768px) { + :deep(.el-table) { + width: 100%; + overflow-x: auto; + } + } + </style> \ No newline at end of file -- Gitblit v1.9.3