From 7c86b549b27bd54f6bd5de81c13f8242f91c87ff Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期一, 16 六月 2025 18:03:27 +0800
Subject: [PATCH] 优化文件上传组件及表格显示
---
src/components/Table/EtableModify.vue | 279 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 173 insertions(+), 106 deletions(-)
diff --git a/src/components/Table/EtableModify.vue b/src/components/Table/EtableModify.vue
index d4678c6..cf21bc2 100644
--- a/src/components/Table/EtableModify.vue
+++ b/src/components/Table/EtableModify.vue
@@ -1,36 +1,92 @@
<template>
- <el-table v-loading="loading" :data="tableData" :border="border" :show-selection="showSelection" :height="height" :max-height="maxHeight"
- :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" @selection-change="handleSelectionChange"
- @row-click="handleRowClick" @row-dblclick="handleRowDblClick" :row-class-name="tableRowClassName" @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="shouldShowTooltip(col, tableData)" align="center"> <template
- #default="scope">
+ <el-table
+ v-loading="loading"
+ :data="tableData"
+ :border="border"
+ :show-selection="showSelection"
+ :height="height"
+ :max-height="maxHeight"
+ :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }"
+ @selection-change="handleSelectionChange"
+ @row-click="handleRowClick"
+ @row-dblclick="handleRowDblClick"
+ :row-class-name="tableRowClassName"
+ @cell-click="handleCellClick"
+ :max-width="maxWidth"
+ @export="handleExport"
+ :show-overflow-tooltip="showOverflowTooltip"
+ >
+ <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="shouldShowTooltip(col, tableData)"
+ align="center"
+ >
+ <template #default="scope">
<template v-if="col.slot">
<slot></slot>
</template>
<template v-else>
- <div class="cell-edit" @dblclick="handleCellEdit(scope.row, col.prop)"
- :class="{'editable': isColumnEditable(col.prop)}"> <span
- v-if="!scope.row.editing || !scope.row.editing[col.prop]" class="cell-text">
- {{ scope.row[col.prop] == null || scope.row[col.prop] === '' ? '--' : scope.row[col.prop] }}
+ <div
+ class="cell-edit"
+ @dblclick="handleCellEdit(scope.row, col.prop)"
+ :class="{ editable: isColumnEditable(col.prop) }"
+ >
+ <span
+ v-if="!scope.row.editing || !scope.row.editing[col.prop]"
+ class="cell-text"
+ >
+ {{
+ scope.row[col.prop] == null || scope.row[col.prop] === ""
+ ? "--"
+ : scope.row[col.prop]
+ }}
</span>
- <el-input v-else v-model="scope.row[col.prop]" size="small"
- @focus="handleCellFocus(scope.row, col.prop, $event)" @blur="handleCellSave(scope.row, col.prop)"
- @keyup.enter="handleCellSave(scope.row, col.prop)" class="cell-input" />
+ <el-input
+ v-else
+ v-model="scope.row[col.prop]"
+ size="small"
+ @focus="handleCellFocus(scope.row, col.prop, $event)"
+ @blur="handleCellSave(scope.row, col.prop)"
+ @keyup.enter="handleCellSave(scope.row, col.prop)"
+ class="cell-input"
+ />
</div>
</template>
</template>
</el-table-column>
</template>
<!-- 鎿嶄綔鍒� -->
- <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right" align="center">
+ <el-table-column
+ v-if="showOperations"
+ :label="operationsLabel"
+ :width="operationsWidth"
+ fixed="right"
+ align="center"
+ >
<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('edit')"
+ link
+ type="primary"
+ size="small"
+ @click="handleEdit(scope.row)"
+ >缂栬緫</el-button
+ >
<!-- <el-button-->
<!-- v-if="operations.includes('delete')"-->
<!-- link-->
@@ -43,119 +99,123 @@
</el-table-column>
</el-table>
</template>
-
- <script setup>
-import { defineEmits, nextTick } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+
+<script setup>
+import { defineEmits, nextTick } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
// 鑾峰彇琛屾牱寮�
tableRowClassName: {
type: Function,
- default: () => ''
+ default: () => "",
},
// 鑾峰彇楂樺害
height: {
type: [String, Number],
- default: 'auto'
+ default: "auto",
},
// 鏄惁鍏佽缂栬緫鍗曞厓鏍�
editableCells: {
type: Boolean,
- default: true
+ default: true,
},
// 鎸囧畾鍙紪杈戠殑鍒楋紝濡傛灉涓虹┖鏁扮粍鍒欒〃绀烘墍鏈夊垪閮戒笉鍙紪杈�
editableColumns: {
type: Array,
- default: () => []
+ default: () => [],
},
// 鏈�澶у搴�
maxWidth: {
type: [String, Number],
- default: 'auto'
+ default: "auto",
},
handleCellClick: {
type: Function,
- default: () => { }
+ default: () => {},
},
handleRowClick: {
type: Function,
- default: () => { }
+ default: () => {},
},
handleExport: {
type: Function,
- default: () => { }
+ default: () => {},
},
handleRowDblClick: {
type: Function,
- default: () => { }
+ default: () => {},
},
// 楂樺害
maxHeight: {
type: [String, Number],
- default: 'auto'
+ default: "auto",
},
// 鍔犺浇鐘舵��
loading: {
type: Boolean,
- default: false
+ default: false,
},
// border
border: {
type: Boolean,
- default: false
+ default: false,
},
// 琛ㄦ牸鏁版嵁
tableData: {
type: Array,
- default: () => []
+ default: () => [],
},
// 鏄惁鏄剧ず閫夋嫨鍒�
showSelection: {
type: Boolean,
- default: false
+ default: false,
},
// 鏄惁鏄剧ず搴忓彿鍒�
showIndex: {
type: Boolean,
- default: true
+ default: true,
},
// 鍒楅厤缃�
columns: {
type: Array,
- default: () => []
+ default: () => [],
},
// 鏄惁鏄剧ず鎿嶄綔鍒�
showOperations: {
type: Boolean,
- default: true
+ default: true,
},
// 鎿嶄綔鍒楁爣绛�
operationsLabel: {
type: String,
- default: '鎿嶄綔'
+ default: "鎿嶄綔",
},
// 鎿嶄綔鍒楀搴�
operationsWidth: {
type: [String, Number],
- default: 100
+ default: 100,
},
// 鏄剧ず鍝簺鎿嶄綔鎸夐挳
operations: {
type: Array,
- default: () => ['edit', 'delete', 'export']
+ default: () => ["edit", "delete", "export"],
},
// 鍒犻櫎纭淇℃伅
deleteConfirmText: {
type: String,
- default: '纭鍒犻櫎璇ヨ褰曪紵'
- }
-})
+ default: "纭鍒犻櫎璇ヨ褰曪紵",
+ },
+ showOverflowTooltip: {
+ type: Boolean,
+ default: true,
+ },
+});
// 妫�鏌ュ垪鏄惁闇�瑕佹樉绀簍ooltip
const shouldShowTooltip = (col, data) => {
// 濡傛灉娌℃湁prop锛岀洿鎺ヨ繑鍥瀎alse
if (!col.prop) return false;
// 妫�鏌ヨ鍒楀湪鎵�鏈夋暟鎹腑鏄惁鏈夐潪绌哄��
- return data.some(row => row[col.prop] != null && row[col.prop] !== '');
+ return data.some((row) => row[col.prop] != null && row[col.prop] !== "");
};
// 澶勭悊鍗曞厓鏍肩紪杈�
@@ -164,7 +224,8 @@
if (!props.editableCells) return;
// 濡傛灉鎸囧畾浜嗗彲缂栬緫鍒楋紝涓斿綋鍓嶅垪涓嶅湪鍙紪杈戝垪涓紝鍒欎笉鍏佽缂栬緫
- if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop)) return;
+ if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop))
+ return;
// 鍒濆鍖杄diting瀵硅薄
if (!row.editing) {
@@ -175,28 +236,29 @@
// 鍦ㄤ笅涓�涓狣OM鏇存柊鍛ㄦ湡锛岃杈撳叆妗嗚幏寰楃劍鐐瑰苟閫変腑鍐呭
setTimeout(() => {
- const inputElement = document.querySelector('.cell-edit .el-input__inner');
+ const inputElement = document.querySelector(".cell-edit .el-input__inner");
if (inputElement) {
inputElement.focus();
inputElement.select();
}
}, 10);
-}
+};
// 澶勭悊鍗曞厓鏍间繚瀛�
const handleCellSave = (row, prop) => {
// 鍏抽棴缂栬緫鐘舵��
row.editing[prop] = false;
// 瑙﹀彂鍗曞厓鏍肩紪杈戝畬鎴愪簨浠�
- emit('cell-edit', row, prop, row[prop]);
-}
+ emit("cell-edit", row, prop, row[prop]);
+};
// 澶勭悊鍗曞厓鏍艰仛鐒︿簨浠�
const handleCellFocus = (row, prop, event) => {
// 濡傛灉涓嶅厑璁哥紪杈戝崟鍏冩牸锛岀洿鎺ヨ繑鍥�
if (!props.editableCells) return;
// 濡傛灉鎸囧畾浜嗗彲缂栬緫鍒楋紝涓斿綋鍓嶅垪涓嶅湪鍙紪杈戝垪涓紝鍒欎笉鍏佽缂栬緫
- if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop)) return;
+ if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop))
+ return;
// 鍒濆鍖杄diting瀵硅薄
if (!row.editing) {
@@ -209,70 +271,75 @@
if (event && event.target) {
event.target.select();
}
-}
+};
// 鍒ゆ柇鍒楁槸鍚﹀彲缂栬緫
const isColumnEditable = (prop) => {
if (props.editableColumns.length === 0) {
return props.editableCells;
}
return props.editableColumns.includes(prop);
-}
+};
// 澶勭悊閫夋嫨鍙樺寲銆佺紪杈戙�佸垹闄ゅ拰瀵煎嚭鎿嶄綔
-const emit = defineEmits(['selection-change', 'edit', 'delete', 'export', 'cell-edit'])
+const emit = defineEmits([
+ "selection-change",
+ "edit",
+ "delete",
+ "export",
+ "cell-edit",
+]);
const handleSelectionChange = (selection) => {
- emit('selection-change', selection)
-}
+ emit("selection-change", selection);
+};
const handleEdit = (row) => {
- emit('edit', row)
-}
+ emit("edit", row);
+};
const handleExport = (row) => {
- emit('export', row)
-}
- </script>
- <style scoped lang="scss">
+ emit("export", row);
+};
+</script>
+<style scoped lang="scss">
.el-table {
- margin: 20px 0 !important;
- }
-
- :deep(.el-table th) {
- background-color: #f5f7fa;
- }
-
- :deep(.cell-edit) {
+ margin: 20px 0 !important;
+}
+
+:deep(.el-table th) {
+ background-color: #f5f7fa;
+}
+
+:deep(.cell-edit) {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+:deep(.cell-edit .cell-text) {
+ width: 100%;
+ display: block;
+}
+
+:deep(.cell-edit.editable:hover .cell-text) {
+ color: #409eff;
+ cursor: pointer;
+}
+
+:deep(.cell-input) {
+ width: 80%;
+ max-width: 120px;
+ min-width: 60px;
+}
+
+:deep(.cell-input .el-input__inner) {
+ border-radius: 4px;
+ text-align: center;
+ transition: all 0.2s;
+}
+
+/* 鍝嶅簲寮忔牱寮� */
+@media screen and (max-width: 768px) {
+ :deep(.el-table) {
width: 100%;
- height: 100%;
- position: relative;
+ overflow-x: auto;
}
-
- :deep(.cell-edit .cell-text) {
- width: 100%;
- display: block;
- }
-
- :deep(.cell-edit.editable:hover .cell-text) {
- color: #409EFF;
- cursor: pointer;
- }
-
- :deep(.cell-input) {
- width: 80%;
- max-width: 120px;
- min-width: 60px;
- }
-
- :deep(.cell-input .el-input__inner) {
- border-radius: 4px;
- text-align: center;
- transition: all 0.2s;
- }
-
-
- /* 鍝嶅簲寮忔牱寮� */
- @media screen and (max-width: 768px) {
- :deep(.el-table) {
- width: 100%;
- overflow-x: auto;
- }
- }
-</style>
\ No newline at end of file
+}
+</style>
--
Gitblit v1.9.3