xt-element-ui 1.2.2 → 1.2.4

package/src/components/ex-table/index.vue

@@ -8,113 +8,16 @@
       </div>
     </div>
 
-    <!-- 虚拟滚动固定表头：复用 el-table 列布局，与 body 表头对齐 -->
-    <div
-      v-if="virtualScroll && computedHeight"
-      ref="fixedHeader"
-      class="ex-table-fixed-header"
-    >
-      <el-table
-        ref="headerTable"
-        :data="headerTableData"
-        class="ex-table ex-table-header-only"
-      >
-        <el-table-column v-if="selection" type="selection" width="55" :fixed="selectionFixed" />
-        <el-table-column
-          v-if="showIndex"
-          type="index"
-          width="60"
-          label="#"
-          :fixed="indexFixed"
-        />
-        <template v-for="col in flattenedColumns">
-          <el-table-column
-            v-if="col.children && col.children.length"
-            :key="col._key"
-            v-bind="getColumnProps(col)"
-          >
-            <el-table-column
-              v-for="child in col.children"
-              :key="child._key || child.prop"
-              v-bind="getColumnProps(child)"
-            />
-          </el-table-column>
-          <el-table-column v-else :key="col._key" v-bind="getColumnProps(col)" />
-        </template>
-      </el-table>
-    </div>
-
-    <!-- 表格主体 -->
-    <div
-      class="ex-table-body"
-      :class="{ 'ex-table-virtual': virtualScroll }"
-      :style="virtualScroll ? { height: computedHeight + 'px' } : {}"
-      ref="tableBody"
-      @scroll="handleBodyScroll"
-    >
-      <!-- 虚拟滚动：包裹层 + 占位撑开 -->
-      <div v-if="virtualScroll" class="ex-table-virtual-inner" :style="{ height: virtualTotalHeight + 'px' }">
-        <div :style="{ transform: 'translateY(' + virtualOffsetY + 'px)' }">
-          <el-table
-            ref="table"
-            :data="visibleData"
-            :span-method="groupColumns.length ? handleSpanMethod : undefined"
-            :row-class-name="getRowClassName"
-            :show-header="false"
-            v-bind="$attrs"
-            v-on="$listeners"
-            @selection-change="handleSelectionChange"
-            @sort-change="handleSortChange"
-            class="ex-table"
-          >
-            <el-table-column v-if="selection" type="selection" width="55" :fixed="selectionFixed" />
-            <el-table-column
-              v-if="showIndex"
-              type="index"
-              width="60"
-              label="#"
-              :fixed="indexFixed"
-              :index="indexMethod"
-            />
-            <template v-for="col in flattenedColumns">
-              <el-table-column
-                v-if="col.children && col.children.length"
-                :key="col._key"
-                v-bind="getColumnProps(col)"
-              >
-                <template v-for="child in col.children">
-                  <el-table-column :key="child._key" v-bind="getColumnProps(child)">
-                    <template v-if="child.render" v-slot="scope">{{ child.render(scope) }}</template>
-                    <template v-else-if="child.formatter" v-slot="scope">
-                      <ExTableCell :row="scope.row" :index="scope.$index" :formatter="child.formatter" :column="child" />
-                    </template>
-                    <template v-else-if="child.slot" v-slot="scope">
-                      <slot :name="child.slot" :row="scope.row" :index="scope.$index" :column="child" />
-                    </template>
-                  </el-table-column>
-                </template>
-              </el-table-column>
-              <el-table-column v-else :key="col._key" v-bind="getColumnProps(col)">
-                <template v-if="col.render" v-slot="scope">{{ col.render(scope) }}</template>
-                <template v-else-if="col.formatter" v-slot="scope">
-                  <ExTableCell :row="scope.row" :index="scope.$index" :formatter="col.formatter" :column="col" />
-                </template>
-                <template v-else-if="col.slot" v-slot="scope">
-                  <slot :name="col.slot" :row="scope.row" :index="scope.$index" :column="col" />
-                </template>
-              </el-table-column>
-            </template>
-          </el-table>
-        </div>
-      </div>
-
-      <!-- 非虚拟滚动：直接渲染 -->
-      <el-table
-        v-else
+    <!-- 主体表格：单 Table + 内置虚拟滚动（核心改造） -->
+    <div class="ex-table-body">
+      <VirtualElTable
         ref="table"
-        :data="visibleData"
+        :data="processedTableData"
         :height="computedHeight"
         :max-height="computedMaxHeight"
+        :virtual-scroll="virtualScroll"
+        :row-height="rowInitHeight"
+        :buffer-size="bufferSize"
         :span-method="groupColumns.length ? handleSpanMethod : undefined"
         :row-class-name="getRowClassName"
         v-bind="$attrs"
@@ -123,7 +26,14 @@
         @sort-change="handleSortChange"
         class="ex-table"
       >
-        <el-table-column v-if="selection" type="selection" width="55" :fixed="selectionFixed" />
+        <!-- 选择列 -->
+        <el-table-column
+          v-if="selection"
+          type="selection"
+          width="55"
+          :fixed="selectionFixed"
+        />
+        <!-- 序号列 -->
         <el-table-column
           v-if="showIndex"
           type="index"
@@ -132,6 +42,7 @@
           :fixed="indexFixed"
           :index="indexMethod"
         />
+        <!-- 多级列配置 -->
         <template v-for="col in flattenedColumns">
           <el-table-column
             v-if="col.children && col.children.length"
@@ -142,10 +53,20 @@
               <el-table-column :key="child._key" v-bind="getColumnProps(child)">
                 <template v-if="child.render" v-slot="scope">{{ child.render(scope) }}</template>
                 <template v-else-if="child.formatter" v-slot="scope">
-                  <ExTableCell :row="scope.row" :index="scope.$index" :formatter="child.formatter" :column="child" />
+                  <ExTableCell
+                    :row="scope.row"
+                    :index="scope.$index"
+                    :formatter="child.formatter"
+                    :column="child"
+                  />
                 </template>
                 <template v-else-if="child.slot" v-slot="scope">
-                  <slot :name="child.slot" :row="scope.row" :index="scope.$index" :column="child" />
+                  <slot
+                    :name="child.slot"
+                    :row="scope.row"
+                    :index="scope.$index"
+                    :column="child"
+                  />
                 </template>
               </el-table-column>
             </template>
@@ -153,14 +74,24 @@
           <el-table-column v-else :key="col._key" v-bind="getColumnProps(col)">
             <template v-if="col.render" v-slot="scope">{{ col.render(scope) }}</template>
             <template v-else-if="col.formatter" v-slot="scope">
-              <ExTableCell :row="scope.row" :index="scope.$index" :formatter="col.formatter" :column="col" />
+              <ExTableCell
+                :row="scope.row"
+                :index="scope.$index"
+                :formatter="col.formatter"
+                :column="col"
+              />
             </template>
             <template v-else-if="col.slot" v-slot="scope">
-              <slot :name="col.slot" :row="scope.row" :index="scope.$index" :column="col" />
+              <slot
+                :name="col.slot"
+                :row="scope.row"
+                :index="scope.$index"
+                :column="col"
+              />
             </template>
           </el-table-column>
         </template>
-      </el-table>
+      </VirtualElTable>
     </div>
 
     <!-- 分页 -->
@@ -180,68 +111,39 @@
 
 <script>
 import ExTableCell from './ExTableCell.vue'
-// 内部导入 element-ui 组件，避免与外部 element-ui 冲突
-import { Table as ElTable, TableColumn as ElTableColumn } from 'element-ui'
+import VirtualElTable from './VirtualElTable.vue'
 
 export default {
   name: 'ExTable',
   inheritAttrs: false,
-  components: { ExTableCell, ElTable, ElTableColumn },
+  components: { ExTableCell, VirtualElTable },
+
   props: {
-    // 表格数据
     tableData: { type: Array, default: () => [] },
-    // 列配置（支持 children 多级表头）
     columns: { type: Array, default: () => [] },
-    // 分组列配置（按配置的层级合并单元格）
     groupColumns: { type: Array, default: () => [] },
-    // 标题
     title: { type: String, default: '' },
-    // 高度
     height: { type: [Number, String], default: null },
-    // 最大高度（非虚拟滚动时与 height 二选一，均支持固定表头）
     maxHeight: { type: [Number, String], default: null },
-    // 虚拟滚动
     virtualScroll: { type: Boolean, default: false },
-    // 预估行高
     rowInitHeight: { type: Number, default: 48 },
-    // 缓冲区行数
     bufferSize: { type: Number, default: 5 },
-    // 分页配置
     pagination: { type: Object, default: null },
-    // 总条数
     total: { type: Number, default: 0 },
-    // 是否显示序号
     showIndex: { type: Boolean, default: false },
-    // 是否可选
     selection: { type: Boolean, default: false },
-    // 选择列固定位置
     selectionFixed: { type: [String, Boolean], default: false },
-    // 序号列固定位置
     indexFixed: { type: [String, Boolean], default: false },
-    // 加载状态
     loading: { type: Boolean, default: false },
-    // 空数据文案
     emptyText: { type: String, default: '暂无数据' },
-    // 小计配置
     subtotalConfig: { type: Object, default: () => ({ enabled: false }) },
-    // 总计配置
     totalConfig: { type: Object, default: () => ({ enabled: false }) }
   },
 
   data() {
     return {
-      // 虚拟滚动相关
-      scrollTop: 0,
-      scrollLeft: 0,
-      rowHeight: 48,
-      visibleStartIndex: 0,
-      visibleEndIndex: 0,
-      visibleCount: 0,
-      // 分组合并缓存
       spanCache: {},
-      // 列扁平化缓存
       flattenedColumnsCache: [],
-      // 选中数据
       selectedRows: []
     }
   },
@@ -250,75 +152,44 @@ export default {
     showPagination() {
       return this.pagination && this.total > 0
     },
-
     computedHeight() {
-      if (this.virtualScroll) {
-        return this.height || this.maxHeight || 400
-      }
       return this.height || undefined
     },
-
     computedMaxHeight() {
-      if (this.virtualScroll || this.height) return undefined
-      return this.maxHeight || undefined
+      return this.height ? undefined : this.maxHeight || undefined
     },
 
-    // 虚拟滚动固定表头占位数据（仅渲染表头，不渲染 body 行）
-    headerTableData() {
-      return []
-    },
-
-    // 处理后的数据（注入小计/总计行）
+    // 处理小计、总计后的最终数据
     processedTableData() {
       if (!this.tableData.length) return []
-
       let data = [...this.tableData]
       const hasSubtotal = this.subtotalConfig && this.subtotalConfig.enabled
       const hasTotal = this.totalConfig && this.totalConfig.enabled
 
       if (!hasSubtotal && !hasTotal) return data
 
-      // 找到第一个数据列作为标签列
       const labelColumn = this.findLabelColumn()
-
       let result = []
 
       if (hasSubtotal && this.subtotalConfig.groupBy && this.subtotalConfig.groupBy.length) {
-        // 按 groupBy 分组
         const groups = this.groupData(data, this.subtotalConfig.groupBy)
-        groups.forEach((groupRows, groupKey) => {
-          // 插入数据行
+        groups.forEach((groupRows) => {
           result.push(...groupRows)
-          // 插入小计行
-          const subtotalRow = this.createSubtotalRow(groupRows, groupKey)
+          const subtotalRow = this.createSubtotalRow(groupRows)
           result.push(subtotalRow)
         })
       } else {
         result = data
       }
 
-      // 插入总计行
       if (hasTotal) {
         const totalRow = this.createTotalRow(data)
         result.push(totalRow)
       }
-
       return result
     },
 
-    // 虚拟滚动总高度
-    virtualTotalHeight() {
-      const data = this.processedTableData
-      return data.length * this.rowHeight
-    },
-
-    // 虚拟滚动偏移量
-    virtualOffsetY() {
-      const start = Math.max(0, this.visibleStartIndex - this.bufferSize)
-      return start * this.rowHeight
-    },
-
-    // 扁平化列配置（为每级列补充 _key）
+    // 扁平化列配置，添加唯一 key
     flattenedColumns() {
       if (this.flattenedColumnsCache.length) return this.flattenedColumnsCache
       const assignKeys = (cols, parentPath = '') => {
@@ -334,91 +205,47 @@ export default {
       }
       this.flattenedColumnsCache = assignKeys(this.columns)
       return this.flattenedColumnsCache
-    },
-
-    // 虚拟滚动时的可见数据（附带 _realIndex 供序号列使用）
-    visibleData() {
-      const data = this.processedTableData
-      if (!this.virtualScroll || data.length === 0) {
-        return data
-      }
-      const start = Math.max(0, this.visibleStartIndex - this.bufferSize)
-      const end = Math.min(data.length, this.visibleEndIndex + this.bufferSize)
-      return data.slice(start, end).map((row, i) => ({
-        ...row,
-        _realIndex: start + i
-      }))
     }
   },
 
   watch: {
-    tableData: {
-      handler() {
-        this.spanCache = {}
-        this.flattenedColumnsCache = []
-        if (this.virtualScroll) {
-          this.$nextTick(() => {
-            this.measureRowHeight()
-            this.updateVisibleRange()
-            this.syncTableLayout()
-          })
-        }
-      },
-      immediate: false
+    tableData() {
+      this.spanCache = {}
+      this.flattenedColumnsCache = []
     },
-
     columns: {
       handler() {
         this.flattenedColumnsCache = []
-        if (this.virtualScroll) {
-          this.$nextTick(() => this.syncTableLayout())
-        }
+        this.spanCache = {}
       },
       deep: true
     },
-
-    height() {
-      if (this.virtualScroll) {
-        this.$nextTick(() => this.syncTableLayout())
-      }
-    },
-
-    maxHeight() {
-      if (this.virtualScroll) {
-        this.$nextTick(() => this.syncTableLayout())
-      }
-    },
-
-    virtualScroll(val) {
-      if (val) {
-        this.$nextTick(() => this.initVirtualScroll())
-      } else {
-        this.destroyVirtualScroll()
-      }
+    groupColumns: {
+      handler() {
+        this.spanCache = {}
+      },
+      deep: true
     }
   },
 
   mounted() {
-    if (this.virtualScroll) {
-      this.$nextTick(() => this.initVirtualScroll())
-    }
-    // 监听窗口resize，更新表格宽度
-    this.resizeHandler = () => {
-      if (this.virtualScroll) {
-        this.$nextTick(() => this.syncTableLayout())
-      }
-    }
-    window.addEventListener('resize', this.resizeHandler)
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.handleResize)
+    })
   },
 
   beforeDestroy() {
-    this.destroyVirtualScroll()
-    window.removeEventListener('resize', this.resizeHandler)
+    window.removeEventListener('resize', this.handleResize)
   },
 
   methods: {
-    // ==================== 小计/总计工具函数 ====================
-    // 找到第一个数据列（非 selection/index），用于显示"小计"/"总计"标签
+    handleResize() {
+      this.$nextTick(() => {
+        this.$refs.table && this.$refs.table.doLayout()
+      })
+    },
+
+    // ========== 小计 / 总计 相关 ==========
     findLabelColumn() {
       for (const col of this.columns) {
         if (col.children && col.children.length) {
@@ -432,33 +259,25 @@ export default {
       return { prop: '', label: '' }
     },
 
-    // 按指定字段分组（保持分组顺序）
     groupData(data, groupBy) {
       const map = new Map()
       data.forEach(row => {
         const key = groupBy.map(f => row[f]).join('|||')
-        if (!map.has(key)) {
-          map.set(key, [])
-        }
+        if (!map.has(key)) map.set(key, [])
         map.get(key).push(row)
       })
       return map
     },
 
-    // 计算单列的聚合值
     _calcValue(rows, calc) {
-      // 自定义函数
       if (typeof calc === 'function') return calc(rows)
-
-      // 字符串：'sum' | 'avg' | 'count' | 'min' | 'max'（需配合 prop 使用）
-
-      // 对象：{ prop: 'field', type: 'sum' } 或 { prop: 'field' } （默认 sum）
       const prop = calc.prop
       const type = calc.type || 'sum'
       const vals = prop ? rows.map(r => parseFloat(r[prop]) || 0) : []
       switch (type) {
         case 'sum': return vals.reduce((s, v) => s + v, 0)
-        case 'avg': case 'average': return vals.length ? (vals.reduce((s, v) => s + v, 0) / vals.length) : 0
+        case 'avg':
+        case 'average': return vals.length ? vals.reduce((s, v) => s + v, 0) / vals.length : 0
         case 'count': return rows.length
         case 'min': return vals.length ? Math.min(...vals) : 0
         case 'max': return vals.length ? Math.max(...vals) : 0
@@ -466,20 +285,16 @@ export default {
       }
     },
 
-    // 创建小计行
-    createSubtotalRow(groupRows, groupKey) {
+    createSubtotalRow(groupRows) {
       const config = this.subtotalConfig
       const rawLabelProp = this.findLabelColumn()
-
-      // 获取第一个 groupBy 列的值显示
       const labelField = config.groupBy ? config.groupBy[0] : ''
-      const groupValue = groupRows[0] ? groupRows[0][labelField] : groupKey
+      const groupValue = groupRows[0] ? groupRows[0][labelField] : ''
       const labelText = config.labelText || `${groupValue} 小计`
 
-      const row = { _rowType: 'subtotal', _groupKey: groupKey }
+      const row = { _rowType: 'subtotal' }
       row[rawLabelProp.prop] = labelText
 
-      // 计算各列的聚合值
       if (config.columns) {
         Object.keys(config.columns).forEach(prop => {
           const calc = config.columns[prop]
@@ -488,11 +303,9 @@ export default {
             : this._calcValue(groupRows, calc)
         })
       }
-
       return row
     },
 
-    // 创建总计行
     createTotalRow(allRows) {
       const config = this.totalConfig
       const rawLabelProp = this.findLabelColumn()
@@ -501,7 +314,6 @@ export default {
       const row = { _rowType: 'total' }
       row[rawLabelProp.prop] = labelText
 
-      // 计算各列的聚合值
       if (config.columns) {
         Object.keys(config.columns).forEach(prop => {
           const calc = config.columns[prop]
@@ -510,55 +322,40 @@ export default {
             : this._calcValue(allRows, calc)
         })
       }
-
       return row
     },
 
-    // 行类名（小计/总计行样式）
     getRowClassName({ row }) {
-      if (!row) return ''
       if (row._rowType === 'subtotal') return 'ex-table-row-subtotal'
       if (row._rowType === 'total') return 'ex-table-row-total'
       return ''
     },
 
-    // ==================== 列配置 ====================
+    // ========== 列处理 ==========
     getColumnProps(col) {
       const { _key, children, render, formatter, slot, ...props } = col
       return props
     },
 
-    // ==================== 序号方法 ====================
     indexMethod(index) {
-      if (this.virtualScroll && this.visibleData.length > 0) {
-        const row = this.visibleData[index]
-        if (row && row._realIndex !== undefined) {
-          return row._realIndex + 1
-        }
-      }
       return index + 1
     },
 
-    // ==================== 分组合并 ====================
+    // ========== 合并单元格 ==========
     handleSpanMethod({ row, column, rowIndex }) {
-      // 跳过小计/总计行，不做合并
       if (row._rowType === 'subtotal' || row._rowType === 'total') {
         return { rowspan: 1, colspan: 1 }
       }
-
       if (!this.groupColumns.length) return { rowspan: 1, colspan: 1 }
 
-      const data = this.virtualScroll ? this.visibleData : this.processedTableData
+      const data = this.processedTableData
       const prop = column.property
       const groupIndex = this.groupColumns.indexOf(prop)
-
       if (groupIndex === -1) return { rowspan: 1, colspan: 1 }
 
-      // 检查缓存
       const cacheKey = `${rowIndex}_${prop}`
       if (this.spanCache[cacheKey]) return this.spanCache[cacheKey]
 
-      // 判断当前行是否与前一行在分组列上完全相同
       if (rowIndex > 0) {
         const prevRow = data[rowIndex - 1]
         let isSame = true
@@ -570,185 +367,76 @@ export default {
           }
         }
         if (isSame) {
-          const result = { rowspan: 0, colspan: 1 }
-          this.spanCache[cacheKey] = result
-          return result
+          const res = { rowspan: 0, colspan: 1 }
+          this.spanCache[cacheKey] = res
+          return res
         }
       }
 
-      // 向下扫描计算合并行数
       let count = 1
       for (let i = rowIndex + 1; i < data.length; i++) {
         const nextRow = data[i]
-        let isSame = true
+        let same = true
         for (let j = 0; j <= groupIndex; j++) {
           const gp = this.groupColumns[j]
           if (nextRow[gp] !== row[gp]) {
-            isSame = false
+            same = false
             break
           }
         }
-        if (isSame) {
-          count++
-        } else {
-          break
-        }
+        if (same) count++
+        else break
       }
 
-      const result = { rowspan: count > 1 ? count : 1, colspan: 1 }
-      this.spanCache[cacheKey] = result
-      return result
+      const res = { rowspan: count > 1 ? count : 1, colspan: 1 }
+      this.spanCache[cacheKey] = res
+      return res
     },
 
-    // ==================== 选择 ====================
+    // ========== 选择、排序、分页 ==========
     handleSelectionChange(rows) {
-      // 过滤掉小计/总计行
       this.selectedRows = rows.filter(r => !r._rowType)
       this.$emit('selection-change', this.selectedRows)
     },
-
-    // ==================== 排序 ====================
-    handleSortChange({ prop, order }) {
-      this.$emit('sort-change', { prop, order })
+    handleSortChange(info) {
+      this.$emit('sort-change', info)
     },
-
-    // ==================== 分页 ====================
     handleSizeChange(size) {
       this.$emit('size-change', size)
     },
-
     handleCurrentChange(page) {
       this.$emit('page-change', page)
     },
 
-    // ==================== 公开方法 ====================
+    // ========== 对外暴露方法 ==========
     getSelection() {
       return this.selectedRows
     },
-
     clearSelection() {
       this.$refs.table && this.$refs.table.clearSelection()
       this.selectedRows = []
     },
-
     toggleRowSelection(row, selected) {
       this.$refs.table && this.$refs.table.toggleRowSelection(row, selected)
     },
-
     toggleRowsSelection(rows, selected) {
-      if (rows && rows.length) {
-        rows.forEach(row => {
-          this.$refs.table && this.$refs.table.toggleRowSelection(row, selected)
-        })
-      }
+      if (!rows || !rows.length) return
+      rows.forEach(row => {
+        this.$refs.table && this.$refs.table.toggleRowSelection(row, selected)
+      })
     },
-
     doLayout() {
-      this.syncTableLayout()
-    },
-
-    // ==================== 虚拟滚动固定表头 ====================
-    syncTableLayout() {
-      const bodyTable = this.$refs.table
-      const headerTable = this.$refs.headerTable
-      if (bodyTable) bodyTable.doLayout()
-      if (headerTable) headerTable.doLayout()
-      this.syncHeaderScroll(this.scrollLeft)
-    },
-
-    syncHeaderScroll(scrollLeft) {
-      const headerTable = this.$refs.headerTable
-      if (!headerTable) return
-      const headerWrapper = headerTable.$el.querySelector('.el-table__header-wrapper')
-      if (headerWrapper) {
-        headerWrapper.scrollLeft = scrollLeft
-      }
-    },
-
-    // ==================== 虚拟滚动 ====================
-    initVirtualScroll() {
-      this.rowHeight = this.rowInitHeight
-      this.measureRowHeight()
-      if (this.processedTableData.length > 0) {
-        this.updateVisibleRange()
-      }
-      this.syncTableLayout()
-    },
-
-    measureRowHeight() {
-      const el = this.$refs.table && this.$refs.table.$el
-      if (!el) return
-      const row = el.querySelector('.el-table__row')
-      if (row) {
-        this.rowHeight = row.offsetHeight || this.rowInitHeight
-      }
-    },
-
-    handleBodyScroll(event) {
-      const target = event.target
-      this.scrollLeft = target.scrollLeft
-      if (this.virtualScroll) {
-        this.scrollTop = target.scrollTop
-        this.updateVisibleRange()
-        this.syncHeaderScroll(target.scrollLeft)
-      }
-    },
-
-    updateVisibleRange() {
-      const totalCount = this.processedTableData.length
-      if (totalCount === 0 || this.rowHeight === 0) return
-
-      const visibleCount = Math.ceil((this.computedHeight || 400) / this.rowHeight)
-
-      this.visibleStartIndex = Math.max(0, Math.floor(this.scrollTop / this.rowHeight))
-      this.visibleEndIndex = Math.min(
-        totalCount,
-        this.visibleStartIndex + visibleCount
-      )
-      this.visibleCount = visibleCount
-    },
-
-    destroyVirtualScroll() {
-      this.scrollTop = 0
-      this.visibleStartIndex = 0
-      this.visibleEndIndex = 0
+      this.$refs.table && this.$refs.table.doLayout()
     }
   }
 }
 </script>
-
 <style scoped>
 .ex-table-wrapper {
   width: 100%;
 }
 
-/* 小计行样式 */
-.ex-table-wrapper >>> .ex-table-row-subtotal,
-.ex-table >>> .ex-table-row-subtotal {
-  background-color: #f5f7fa;
-  font-weight: 600;
-  color: #303133;
-}
-
-/* 总计行样式 */
-.ex-table-wrapper >>> .ex-table-row-total,
-.ex-table >>> .ex-table-row-total {
-  background-color: #e8eaed;
-  font-weight: 700;
-  color: #303133;
-  border-top: 2px solid #c0c4cc;
-}
-
-.ex-table-wrapper >>> .ex-table-row-subtotal:hover > td,
-.ex-table >>> .ex-table-row-subtotal:hover > td {
-  background-color: #ebeef5 !important;
-}
-
-.ex-table-wrapper >>> .ex-table-row-total:hover > td,
-.ex-table >>> .ex-table-row-total:hover > td {
-  background-color: #dcdfe6 !important;
-}
-
+/* 表头栏 */
 .ex-table-header {
   display: flex;
   align-items: center;
@@ -756,7 +444,6 @@ export default {
   padding: 12px 0;
   margin-bottom: 8px;
 }
-
 .ex-table-title {
   font-size: 16px;
   font-weight: 600;
@@ -764,7 +451,6 @@ export default {
   position: relative;
   padding-left: 12px;
 }
-
 .ex-table-title::before {
   content: '';
   position: absolute;
@@ -776,7 +462,6 @@ export default {
   background: #409eff;
   border-radius: 2px;
 }
-
 .ex-table-toolbar {
   display: flex;
   align-items: center;
@@ -785,52 +470,98 @@ export default {
 
 .ex-table-body {
   position: relative;
+  z-index: 1;
 }
 
-/* 虚拟滚动容器 */
-.ex-table-virtual {
-  overflow: overlay;
-  position: relative;
-  /* Firefox 隐藏滚动条 */
-  scrollbar-width: none;
-  /* IE/旧 Edge 隐藏滚动条 */
-  -ms-overflow-style: none;
+/* 分页区域 */
+.ex-table-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 0;
 }
 
-.ex-table-virtual-inner {
-  position: relative;
-  width: 100%;
+/* ========== 小计/合计行样式 ========== */
+::v-deep .ex-table-row-subtotal {
+  background-color: #f5f7fa;
+  font-weight: 600;
+  color: #303133;
 }
-
-.ex-table-virtual-inner > div {
-  will-change: transform;
+::v-deep .ex-table-row-total {
+  background-color: #e8eaed;
+  font-weight: 700;
+  color: #303133;
+  border-top: 2px solid #c0c4cc;
+}
+::v-deep .ex-table-row-subtotal:hover > td {
+  background-color: #ebeef5 !important;
+}
+::v-deep .ex-table-row-total:hover > td {
+  background-color: #dcdfe6 !important;
 }
 
-.ex-table-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: 16px 0;
+/* ========== 滚动条：Y轴 + X轴 统一处理 ========== */
+/* 合并为一个选择器块，避免重复导致的优先级问题 */
+::v-deep .el-table__body-wrapper {
+  overflow-y: auto !important;
+  overflow-x: auto !important;
+  user-select: none;
+  -webkit-user-select: none;
+}
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+/* 滚动条角落（Y+X 交汇处） */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
+  background: #f1f1f1;
 }
 
-/* 虚拟滚动固定表头（header-only el-table） */
-.ex-table-fixed-header {
-  overflow: hidden;
-  flex-shrink: 0;
+/* 允许单元格内文字选中，但容器本身不可选中 */
+::v-deep .el-table__body-wrapper .el-table__cell {
+  user-select: text;
+  -webkit-user-select: text;
 }
 
-/* 虚拟滚动表头强制补上 gutter 占位 */
-.ex-table-fixed-header >>> .el-table__header-wrapper thead tr .el-table__cell.gutter {
-  display: table-cell;
-  width: 8px; /* 和滚动条宽度一致 */
+/* ========== 固定列层级 + 背景 防文字穿透 ========== */
+::v-deep .el-table__fixed {
+  z-index: 10 !important;
+  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.08);
+}
+::v-deep .el-table__fixed-right {
+  z-index: 10 !important;
+  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
 }
 
+/* 固定列单元格底色（纯白兜底，盖住滚动穿透文字） */
+::v-deep .el-table__fixed .el-table__cell,
+::v-deep .el-table__fixed-right .el-table__cell {
+  background-color: #ffffff !important;
+}
+::v-deep .el-table__fixed .el-table__row:nth-child(even) .el-table__cell,
+::v-deep .el-table__fixed-right .el-table__row:nth-child(even) .el-table__cell {
+  background-color: #fafafa !important;
+}
+::v-deep .el-table__fixed .el-table__row:hover .el-table__cell,
+::v-deep .el-table__fixed-right .el-table__row:hover .el-table__cell {
+  background-color: #f5f7fa !important;
+}
 
-.ex-table-header-only >>> .el-table__body-wrapper,
-.ex-table-header-only >>> .el-table__empty-block {
-  display: none;
+::v-deep .el-table__fixed-header-wrapper,
+::v-deep .el-table__fixed-right-header-wrapper {
+  z-index: 11 !important;
 }
 
-.ex-table-header-only >>> .el-table__header-wrapper {
-  overflow: hidden;
+/* ========== 虚拟滚动容器：正常布局流撑开滚动条 ========== */
+::v-deep .vs-phantom {
+  position: relative;
+  box-sizing: border-box;
+  z-index: 1 !important;
 }
-</style>
+</style>