xt-element-ui 1.2.1 → 1.2.3

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

@@ -8,104 +8,16 @@
       </div>
     </div>
 
-    <!-- 虚拟滚动固定表头（独立于滚动容器） -->
-    <div
-      v-if="virtualScroll && headerRows.length"
-      ref="fixedHeader"
-      class="ex-table-fixed-header"
-      :style="{ marginLeft: -scrollLeft + 'px' }"
-    >
-      <table class="ex-table-fixed-header-table">
-        <colgroup>
-          <col v-for="col in headerCols" :key="col._key" :name="col._key" :width="col._width" :min-width="col._minWidth" />
-          <col name="gutter" width="12" />
-        </colgroup>
-        <thead>
-          <tr v-for="(row, rowIdx) in headerRows" :key="rowIdx">
-            <template v-for="cell in row">
-              <th
-                v-if="!cell._hidden"
-                :key="cell._key"
-                :rowspan="cell._rowspan"
-                :colspan="cell._colspan"
-                :style="cell._style || {}"
-              >{{ cell.label }}</th>
-            </template>
-          </tr>
-        </thead>
-      </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"
@@ -114,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"
@@ -123,6 +42,7 @@
           :fixed="indexFixed"
           :index="indexMethod"
         />
+        <!-- 多级列配置 -->
         <template v-for="col in flattenedColumns">
           <el-table-column
             v-if="col.children && col.children.length"
@@ -133,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>
@@ -144,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>
 
     <!-- 分页 -->
@@ -171,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 },
-    // 虚拟滚动
+    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,
-      // 表格宽度（用于自适应列宽计算）
-      tableWidth: 0,
-      // 分组合并缓存
       spanCache: {},
-      // 列扁平化缓存
       flattenedColumnsCache: [],
-      // 选中数据
       selectedRows: []
     }
   },
@@ -241,337 +152,100 @@ export default {
     showPagination() {
       return this.pagination && this.total > 0
     },
-
     computedHeight() {
-      if (this.virtualScroll) {
-        return this.height || 400
-      }
       return this.height || undefined
     },
-
-    // 计算固定列总宽度（selection + index + fixed列）
-    fixedColumnWidth() {
-      let width = 0
-      // 选择列
-      if (this.selection) width += 55
-      // 序号列
-      if (this.showIndex) width += 60
-      // fixed 列
-      const sumFixedWidth = (cols) => {
-        cols.forEach(c => {
-          if (c.fixed && (c.width || c.minWidth)) {
-            width += typeof c.width === 'number' ? c.width : (typeof c.minWidth === 'number' ? c.minWidth : 100)
-          }
-          if (c.children && c.children.length) sumFixedWidth(c.children)
-        })
-      }
-      sumFixedWidth(this.columns)
-      return width
-    },
-
-    // 计算非固定列中已设置width的总宽度
-    nonFixedColumnWidthWithWidth() {
-      let width = 0
-      const sumWidth = (cols) => {
-        cols.forEach(c => {
-          if (!c.fixed && c.width) {
-            width += typeof c.width === 'number' ? c.width : parseInt(c.width) || 0
-          }
-          if (c.children && c.children.length) sumWidth(c.children)
-        })
-      }
-      sumWidth(this.columns)
-      return width
+    computedMaxHeight() {
+      return this.height ? undefined : this.maxHeight || undefined
     },
 
-    // 计算需要自适应的列数（非固定列且未设置width）
-    autoColumnCount() {
-      let count = 0
-      const countCols = (cols) => {
-        cols.forEach(c => {
-          if (!c.fixed) {
-            if (c.children && c.children.length) {
-              countCols(c.children)
-            } else if (!c.width) {
-              // 只有未设置width的非固定列才参与自适应
-              count++
-            }
-          }
-        })
-      }
-      countCols(this.columns)
-      return count
-    },
-
-    // 自适应列宽（未设置width的非固定列均分剩余宽度）
-    autoColumnWidth() {
-      const totalWidth = this.tableWidth || 1000
-      const gutter = 12 // el-table 默认 gutter
-      const fixedWidth = this.fixedColumnWidth
-      const nonFixedWithWidth = this.nonFixedColumnWidthWithWidth
-      const autoCount = this.autoColumnCount
-      
-      if (autoCount <= 0) return 100 // 默认宽度
-      
-      // 自适应宽度 = （总宽度 - gutter - 固定列宽度 - 非固定列中已设置的width）/ 需要自适应的列数
-      const availableWidth = totalWidth - gutter - fixedWidth - nonFixedWithWidth
-      return Math.max(80, Math.floor(availableWidth / autoCount)) // 最小80px
-    },
-
-    // 表头列定义（用于 colgroup，与 headerRows 列数保持一致）
-    headerCols() {
-      const cols = []
-      
-      // 选择列
-      if (this.selection) {
-        cols.push({ _key: 'prepend_selection', _width: 55, _minWidth: 55 })
-      }
-      
-      // 序号列
-      if (this.showIndex) {
-        cols.push({ _key: 'prepend_index', _width: 60, _minWidth: 60 })
-      }
-      
-      // 数据列（只取叶子节点，使用一致的key生成）
-      const addLeafCols = (columns, parentPath = '') => {
-        columns.forEach((col, index) => {
-          const path = parentPath ? `${parentPath}_${index}` : String(index)
-          const key = this.generateColKey(col, path)
-          
-          if (col.children && col.children.length) {
-            addLeafCols(col.children, path)
-          } else {
-            cols.push({
-              _key: key,
-              _width: this.getColumnWidth(col),
-              _minWidth: col.minWidth
-            })
-          }
-        })
-      }
-      addLeafCols(this.columns)
-      
-      return cols
-    },
-
-    // 表头层级结构（用于自定义固定表头渲染）
-    headerRows() {
-      const rows = []
-      let maxDepth = 1
-
-      // 计算最大深度
-      const calcDepth = (cols, depth) => {
-        maxDepth = Math.max(maxDepth, depth)
-        cols.forEach(c => { if (c.children && c.children.length) calcDepth(c.children, depth + 1) })
-      }
-      if (this.columns.length) calcDepth(this.columns, 1)
-
-      // 初始化行
-      for (let i = 0; i < maxDepth; i++) rows.push([])
-
-      // 计算叶子数量
-      const countLeaves = (cols) => {
-        let n = 0
-        cols.forEach(c => {
-          if (c.children && c.children.length) n += countLeaves(c.children)
-          else n++
-        })
-        return n
-      }
-
-      // 选择列 / 序号列占位（仅第一行，rowspan 跨所有行）
-      if (this.selection) {
-        rows[0].push({
-          _key: 'prepend_selection',
-          _rowspan: maxDepth,
-          _colspan: 1,
-          _style: { width: '55px' },
-          _hidden: false,
-          label: ''
-        })
-        for (let i = 1; i < maxDepth; i++) {
-          rows[i].push({ _key: 'prepend_selection_' + i, _rowspan: 0, _colspan: 1, _hidden: true, label: '' })
-        }
-      }
-      if (this.showIndex) {
-        rows[0].push({
-          _key: 'prepend_index',
-          _rowspan: maxDepth,
-          _colspan: 1,
-          _style: { width: '60px' },
-          _hidden: false,
-          label: '#'
-        })
-        for (let i = 1; i < maxDepth; i++) {
-          rows[i].push({ _key: 'prepend_index_' + i, _rowspan: 0, _colspan: 1, _hidden: true, label: '' })
-        }
-      }
-
-      // 填充列
-      if (this.columns.length) {
-        const fill = (cols, depth, parentPath = '') => {
-          cols.forEach((c, index) => {
-            const path = parentPath ? `${parentPath}_${index}` : String(index)
-            const key = this.generateColKey(c, path)
-            const hasKids = c.children && c.children.length
-            const style = {}
-            
-            // 如果有固定宽度，使用固定宽度；否则使用自适应宽度
-            if (c.width) {
-              style.width = typeof c.width === 'number' ? c.width + 'px' : c.width
-            } else if (!c.fixed && this.virtualScroll) {
-              // 非固定列且虚拟滚动时使用自适应宽度
-              style.width = this.autoColumnWidth + 'px'
-            }
-            
-            if (c.minWidth) style.minWidth = typeof c.minWidth === 'number' ? c.minWidth + 'px' : c.minWidth
-
-            rows[depth].push({
-              _key: key,
-              _rowspan: hasKids ? 1 : maxDepth - depth,
-              _colspan: hasKids ? countLeaves(c.children) : 1,
-              _style: style,
-              _hidden: !c.label && !c.prop,
-              label: c.label || ''
-            })
-            if (hasKids) fill(c.children, depth + 1, path)
-          })
-        }
-        fill(this.columns, 0)
-      }
-
-      return rows
-    },
-
-    // 处理后的数据（注入小计/总计行）
+    // 处理小计、总计后的最终数据
     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
-    },
-
-    // 扁平化列配置（处理 children 嵌套）
+    // 扁平化列配置，添加唯一 key
     flattenedColumns() {
       if (this.flattenedColumnsCache.length) return this.flattenedColumnsCache
-      const result = []
-      const flatten = (cols) => {
-        cols.forEach(col => {
-          const key = col.prop || col.label || Math.random().toString(36).slice(2)
-          result.push({ ...col, _key: key })
+      const assignKeys = (cols, parentPath = '') => {
+        return cols.map((col, index) => {
+          const path = parentPath ? `${parentPath}_${index}` : String(index)
+          const key = col.prop || col.slot || col.label || path
+          const item = { ...col, _key: key }
+          if (col.children && col.children.length) {
+            item.children = assignKeys(col.children, path)
+          }
+          return item
         })
       }
-      flatten(this.columns)
-      this.flattenedColumnsCache = result
-      return result
-    },
-
-    // 虚拟滚动时的可见数据
-    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)
+      this.flattenedColumnsCache = assignKeys(this.columns)
+      return this.flattenedColumnsCache
     }
   },
 
   watch: {
-    tableData: {
-      handler() {
-        this.spanCache = {}
-        this.flattenedColumnsCache = []
-        if (this.virtualScroll) {
-          this.$nextTick(() => {
-            this.measureRowHeight()
-            this.updateVisibleRange()
-          })
-        }
-      },
-      immediate: false
+    tableData() {
+      this.spanCache = {}
+      this.flattenedColumnsCache = []
     },
-
     columns: {
       handler() {
         this.flattenedColumnsCache = []
+        this.spanCache = {}
       },
       deep: true
     },
-
-    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.updateTableWidth())
-      }
-    }
-    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) {
@@ -585,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
@@ -619,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]
@@ -641,11 +303,9 @@ export default {
             : this._calcValue(groupRows, calc)
         })
       }
-
       return row
     },
 
-    // 创建总计行
     createTotalRow(allRows) {
       const config = this.totalConfig
       const rawLabelProp = this.findLabelColumn()
@@ -654,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]
@@ -663,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
@@ -723,190 +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.$refs.table && this.$refs.table.doLayout()
-    },
-
-    // 获取列宽度（支持自适应）
-    getColumnWidth(col) {
-      // 如果有固定宽度，使用固定宽度
-      if (col.width) {
-        return typeof col.width === 'number' ? col.width : col.width.replace('px', '')
-      }
-      // 非固定列且虚拟滚动时使用自适应宽度
-      if (!col.fixed && this.virtualScroll) {
-        return this.autoColumnWidth
-      }
-      // 默认宽度
-      if (col.minWidth) {
-        return typeof col.minWidth === 'number' ? col.minWidth : col.minWidth.replace('px', '')
-      }
-      return 100
-    },
-
-    // 更新表格宽度（用于自适应列宽计算）
-    updateTableWidth() {
-      const tableWrapper = this.$refs.tableBody
-      if (tableWrapper) {
-        this.tableWidth = tableWrapper.offsetWidth || 1000
-      }
-    },
-
-    // ==================== 虚拟滚动 ====================
-    initVirtualScroll() {
-      this.updateTableWidth()
-      this.measureRowHeight()
-      if (this.processedTableData.length > 0) {
-        this.updateVisibleRange()
-      }
-    },
-
-    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()
-      }
-    },
-
-    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
     }
   }
 }
 </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;
@@ -914,7 +444,6 @@ export default {
   padding: 12px 0;
   margin-bottom: 8px;
 }
-
 .ex-table-title {
   font-size: 16px;
   font-weight: 600;
@@ -922,7 +451,6 @@ export default {
   position: relative;
   padding-left: 12px;
 }
-
 .ex-table-title::before {
   content: '';
   position: absolute;
@@ -934,7 +462,6 @@ export default {
   background: #409eff;
   border-radius: 2px;
 }
-
 .ex-table-toolbar {
   display: flex;
   align-items: center;
@@ -943,62 +470,98 @@ export default {
 
 .ex-table-body {
   position: relative;
+  z-index: 1;
 }
 
-/* 虚拟滚动容器 */
-.ex-table-virtual {
-  overflow: auto;
-  position: relative;
+/* 分页区域 */
+.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;
 }
 
-/* 虚拟滚动固定表头 */
-.ex-table-fixed-header {
-  overflow: hidden;
-  border-bottom: 1px solid #ebeef5;
-  background: #fafafa;
+/* 允许单元格内文字选中，但容器本身不可选中 */
+::v-deep .el-table__body-wrapper .el-table__cell {
+  user-select: text;
+  -webkit-user-select: text;
 }
 
-.ex-table-fixed-header-table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
+/* ========== 固定列层级 + 背景 防文字穿透 ========== */
+::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);
 }
 
-.ex-table-fixed-header-table th {
-  padding: 12px 8px;
-  text-align: left;
-  font-weight: 500;
-  font-size: 14px;
-  color: #606266;
-  border-bottom: 1px solid #ebeef5;
-  border-right: 1px solid #ebeef5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background: #fafafa;
-  box-sizing: border-box;
+/* 固定列单元格底色（纯白兜底，盖住滚动穿透文字） */
+::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-fixed-header-table th:last-child {
-  border-right: none;
+::v-deep .el-table__fixed-header-wrapper,
+::v-deep .el-table__fixed-right-header-wrapper {
+  z-index: 11 !important;
 }
 
-.ex-table-fixed-header-table th:first-child {
-  padding-left: 16px;
+/* ========== 虚拟滚动容器：正常布局流撑开滚动条 ========== */
+::v-deep .vs-phantom {
+  position: relative;
+  box-sizing: border-box;
+  z-index: 1 !important;
 }
-</style>
+</style>