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/ETable.vue |  126 +++++++++++++++++++++++++++++++++++++++---
 1 files changed, 117 insertions(+), 9 deletions(-)

diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue
index 7f0f3fc..13d2dda 100644
--- a/src/components/Table/ETable.vue
+++ b/src/components/Table/ETable.vue
@@ -1,9 +1,24 @@
-<template>
-  <el-table v-loading="loading" :data="tableData" :border="border" :show-selection="showSelection" :max-height="maxHeight"
-    :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" @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>  <el-table 
+    v-loading="loading" 
+    :data="tableData" 
+    :border="border" 
+    :show-selection="showSelection" 
+    :max-height="maxHeight"
+    :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" 
+    @selection-change="handleSelectionChange"
+    @row-click="handleRowClick" 
+    @row-dblclick="handleRowDblClick" 
+    @cell-click="handleCellClick" 
+    :max-width="maxWidth"
+    @export="handleExport" 
+    :default-selection="defaultSelection"
+    :show-overflow-tooltip="showOverflowTooltip"
+    ref="tableRef" 
+    :row-key="rowKey"
+    style="width: 100%"
+  >
+    <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)"
         :formatter="col.formatter || defaultFormatter" align="center">
@@ -32,7 +47,7 @@
 </template>
   
   <script setup>
-import { defineEmits } from 'vue'
+import { defineEmits, ref , defineProps, onMounted ,defineExpose, watch, nextTick} from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 const props = defineProps({
   // 鏈�澶у搴�
@@ -110,13 +125,27 @@
   operations: {
     type: Array,
     default: () => ['edit', 'delete', 'export']
-  },
-  // 鍒犻櫎纭淇℃伅
+  },  // 鍒犻櫎纭淇℃伅
   deleteConfirmText: {
     type: String,
     default: '纭鍒犻櫎璇ヨ褰曪紵'
+  },
+  // 榛樿閫変腑鐨勮 ID 鏁扮粍
+  defaultSelectedIds: {
+    type: Array,
+    default: () => []
+  },
+  // 琛屽敮涓�鏍囪瘑瀛楁鍚嶏紙榛樿涓� id锛�
+  rowKey: {
+    type: String,
+    default: 'id'
+  },
+  showOverflowTooltip: {
+    type: Boolean,
+    default: true
   }
 })
+const tableRef = ref(null)
 // 妫�鏌ュ垪鏄惁闇�瑕佹樉绀簍ooltip
 const shouldShowTooltip = (col, data) => {
   // 濡傛灉鍒楅厤缃腑鏄庣‘璁剧疆浜唖howOverflowTooltip锛屼娇鐢ㄨ璁剧疆
@@ -159,6 +188,85 @@
 const handleExport = (row) => {
   emit('export', row)
 }
+
+// 姝ｇ‘鐨� toggleRowSelection 鏂规硶锛氶拡瀵瑰崟琛�
+const toggleRowSelection = (row, selected) => {
+  if (tableRef.value && row) {
+    tableRef.value.toggleRowSelection(row, selected);
+  }
+};
+
+// 鎵归噺璁剧疆琛岄�変腑鐘舵�佺殑鏂规硶
+const setRowsSelection = (rows, selected = true) => {
+  if (tableRef.value && Array.isArray(rows)) {
+    rows.forEach((row) => {
+      tableRef.value.toggleRowSelection(row, selected);
+    });
+  }
+};
+
+// 澶嶉�夋榛樿閫変腑鐘舵��
+const defaultSelection = ref([])
+// 璁剧疆榛樿閫変腑鐘舵��
+const setDefaultSelection = () => {
+  if (!tableRef.value || !props.defaultSelectedIds.length || !props.tableData.length) {
+    return;
+  }
+  
+  
+  // 寤惰繜鎵ц锛岀‘淇濊〃鏍煎畬鍏ㄦ覆鏌�
+  nextTick(() => {
+    setTimeout(() => {
+      try {
+        tableRef.value.clearSelection();
+        const rowsToSelect = props.tableData.filter(row => {
+          const rowId = row[props.rowKey];
+          return props.defaultSelectedIds.includes(rowId);
+        });
+        rowsToSelect.forEach(row => {
+          tableRef.value.toggleRowSelection(row, true);
+        });
+      } catch (error) {
+      }
+    }, 100);
+  });
+};
+
+// 鐩戝惉鏁版嵁鍙樺寲锛岃嚜鍔ㄨ缃粯璁ら�変腑
+watch(() => [props.tableData, props.defaultSelectedIds], () => {
+  if (props.tableData.length > 0 && props.defaultSelectedIds.length > 0) {
+    setDefaultSelection();
+  }
+}, { 
+  deep: true, 
+  immediate: true 
+});
+
+// 缁勪欢鎸傝浇鍚庤缃粯璁ら�変腑
+onMounted(() => {
+  if (props.defaultSelectedIds.length > 0) {
+    setDefaultSelection();
+  }
+});
+
+// 鏆撮湶 el-table 鐨勫疄渚嬪拰甯哥敤鏂规硶
+defineExpose({
+  // 鍗曡閫変腑/鍙栨秷閫変腑
+  toggleRowSelection,
+  // 鎵归噺璁剧疆琛岄�変腑鐘舵��
+  setRowsSelection,
+  // 鏍规嵁ID鏁扮粍閫変腑琛�
+  setDefaultSelection,
+  // 娓呴櫎鎵�鏈夐�変腑
+  clearSelection: () => tableRef.value?.clearSelection(),
+  // 鑾峰彇閫変腑鐨勮
+  getSelectionRows: () => tableRef.value?.getSelectionRows() || [],
+  // 璁剧疆褰撳墠琛�
+  setCurrentRow: (row) => tableRef.value?.setCurrentRow(row),
+  // 鑾峰彇琛ㄦ牸瀹炰緥锛堝闇�鐩存帴鎿嶄綔锛�
+  getTableRef: () => tableRef.value
+});
+
 </script>
   
   <style scoped>

--
Gitblit v1.9.3