优化

src/composables/useMobileTable.js

@@ -0,0 +1,101 @@
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+/**
+ * 移动端表格优化 composable
+ * 用于在移动端移除表格固定列，优化显示效果
+ */
+export function useMobileTable() {
+  const isMobile = ref(false)
+  const isTablet = ref(false)
+
+  // 检测屏幕尺寸
+  const checkScreenSize = () => {
+    if (typeof window === 'undefined') return
+    const width = window.innerWidth
+    isMobile.value = width < 768
+    isTablet.value = width >= 768 && width < 1024
+  }
+
+  // 移除表格固定列
+  const removeFixedColumns = () => {
+    if (typeof window === 'undefined') return
+    
+    // 只在移动端执行
+    if (!isMobile.value) {
+      // 桌面端恢复固定列样式
+      const tables = document.querySelectorAll('.list-page-container .el-table')
+      tables.forEach((table) => {
+        const fixedElements = table.querySelectorAll('.el-table__fixed, .el-table__fixed-right')
+        fixedElements.forEach((el) => {
+          el.style.position = ''
+          el.style.boxShadow = ''
+          el.style.backgroundColor = ''
+        })
+      })
+      return
+    }
+
+    // 使用 nextTick 确保 DOM 已更新
+    nextTick(() => {
+      setTimeout(() => {
+        const tables = document.querySelectorAll('.list-page-container .el-table')
+        tables.forEach((table) => {
+          // 移除固定列元素
+          const fixedElements = table.querySelectorAll('.el-table__fixed, .el-table__fixed-right')
+          fixedElements.forEach((el) => {
+            el.style.position = 'static'
+            el.style.boxShadow = 'none'
+            el.style.backgroundColor = 'transparent'
+            el.style.zIndex = 'auto'
+          })
+
+          // 移除固定列的表头、表体、表尾包装器
+          const fixedWrappers = table.querySelectorAll(
+            '.el-table__fixed-header-wrapper, .el-table__fixed-body-wrapper, .el-table__fixed-footer-wrapper'
+          )
+          fixedWrappers.forEach((el) => {
+            el.style.position = 'static'
+          })
+
+          // 移除固定列的遮罩层
+          const fixedPatch = table.querySelectorAll('.el-table__fixed-right-patch, .el-table__fixed-patch')
+          fixedPatch.forEach((el) => {
+            el.style.display = 'none'
+          })
+        })
+      }, 150)
+    })
+  }
+
+  // 监听窗口大小变化
+  const handleResize = () => {
+    const wasMobile = isMobile.value
+    checkScreenSize()
+    // 如果移动状态发生变化，重新应用优化
+    if (wasMobile !== isMobile.value) {
+      removeFixedColumns()
+    }
+  }
+
+  onMounted(() => {
+    checkScreenSize()
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', handleResize)
+      // 初始移除固定列
+      removeFixedColumns()
+    }
+  })
+
+  onUnmounted(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', handleResize)
+    }
+  })
+
+  return {
+    isMobile,
+    isTablet,
+    removeFixedColumns
+  }
+}
+