xt-element-ui 1.1.7 → 1.1.9

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

@@ -1,677 +1,1002 @@
 <template>
-  <div class="ExTable">
-    <slot name="title">
-      <XtFlexBox content="between" style="padding: 0 10px;">
-        <ExText size="medium" style="padding: 10px" v-if="title">{{ title }}</ExText>
-        <el-button size="small" type="primary" plain  v-if="typeof toolExport === 'function'" icon="el-icon-download" @click="exportTableData">导出</el-button>
-      </XtFlexBox>
-    </slot>
-    <el-table
-      ref="ExtendTable"
-      v-loading="loading"
-      element-loading-text="加载中..."
-      v-bind="getAttrs()"
-      :data="spanFields ? spanTableData : tableData"
-      v-on="$listeners"
-      @current-change="rowChange"
-      @row-click="rowClick"
-      @sort-change="changeTableSort"
-      @selection-change="selectionChange"
+  <div class="ex-table-wrapper">
+    <!-- 标题栏 / 工具栏 -->
+    <div class="ex-table-header" v-if="title || $slots.toolbar">
+      <span class="ex-table-title" v-if="title">{{ title }}</span>
+      <div class="ex-table-toolbar">
+        <slot name="toolbar"></slot>
+      </div>
+    </div>
+
+    <!-- 虚拟滚动固定表头（独立于滚动容器） -->
+    <div
+      v-if="virtualScroll && headerRows.length"
+      ref="fixedHeader"
+      class="ex-table-fixed-header"
+      :style="{ marginLeft: -scrollLeft + 'px' }"
     >
-      <el-table-column v-if="(hasLoad || !tbId) ? expand : false" type="expand" :fixed="defaultColumnsFixed">
-        <template slot-scope="scope">
-          <slot name="expand" :scopeData="scope" :row="scope.row" :column="scope.column" :index="scope.$index" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="(hasLoad || !tbId) && showIndex"
-        type="index"
-        align="center"
-        width="80"
-        :fixed="defaultColumnsFixed?'left':null"
-        :index="showRealIndex ? realIndexRender : indexRender"
+      <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
+        ref="table"
+        :data="visibleData"
+        :height="computedHeight"
+        :span-method="groupColumns.length ? handleSpanMethod : undefined"
+        :row-class-name="getRowClassName"
+        v-bind="$attrs"
+        v-on="$listeners"
+        @selection-change="handleSelectionChange"
+        @sort-change="handleSortChange"
+        class="ex-table"
       >
-        <template slot="header" slot-scope="scope">
-          <el-popover v-if="showColumsFilter" width="170" trigger="click" placement="bottom-start">
-            <el-checkbox-group v-model="checkedColumns" class="drop-body">
-              <el-checkbox v-for="(item,ind) in diyColumns" v-show="item.prop" :key="ind" :label="item.prop" class="checkli" @change="(v) => handleToggle(v, item)">{{ item.label }}</el-checkbox>
-            </el-checkbox-group>
-            <i slot="reference" class="el-icon-s-operation" style="cursor: pointer" title="定制列" />
-          </el-popover>
-          <div v-else>序号</div>
+        <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-column>
-      <el-table-column
-        v-if="(hasLoad || !tbId) && selection"
-        type="selection"
-        align="center"
-        width="50"
-        :fixed="defaultColumnsFixed?'left':null"
-      >
-      </el-table-column>
-      <template v-for="(group, groupIndex) in groupColumns">
-        <el-table-column :key="`group-${groupIndex}`" v-bind="setAttrs(group)">
-          <template slot-scope="{row}"><span>{{ row[group.prop] }}</span></template>
-        </el-table-column>
-      </template>
-      <template v-for="(column, index) in tableColumns">
-        <el-table-column v-if="column.slotName ||column.formatter" :key="index" v-bind="setAttrs(column)">
-          <template slot="header" slot-scope="scope">
-            <slot :name="column.slotHeader || 'header'" :column="scope.column">
-              <span> {{ scope.column.label }}</span>
-            </slot>
-          </template>
-          <template v-if="column.slotName" slot-scope="scope">
-            <slot :name="column.slotName" :scopeData="scope" :row="scope.row" :column="scope.column" :index="scope.$index" />
-          </template>
-          <ExCell v-else :formatter="column.formatter" :index="scope.$index + startIndex" :row="scope.row" :column="column">
-          </ExCell>
-        </el-table-column>
-        <ExColumn v-else-if="column.children && column.children.length" :key="index" :column="column">
-        </ExColumn>
-        <el-table-column v-else v-bind="setAttrs(column)" :prop="column.prop" :label="column.label" :key="index">
-          <template slot="header" slot-scope="scope">
-            <slot :name="column.slotHeader || 'header'" :column="scope.column">
-              <span> {{ scope.column.label }}</span>
-            </slot>
-          </template>
-        </el-table-column>
-      </template>
-      <template v-slot:empty>
-        <div style="text-align:center" v-show="hasLoadData&&!loading">
-          <div class="empty-title">暂无数据</div>
-          <div class="empty-subtitle">{{emptSubTitle}}</div>
-        </div>
-      </template>
-    </el-table>
-    <div ref="toolBar" class="toolBar left">
-      <slot name="pagination">
-        <el-pagination v-if="pagination" :total="total" :page-sizes="pageSizes" :page-size="pagination.PageSize" :current-page="pagination.PageNum" @current-change="pageChange" @size-change="sizeChange"></el-pagination>
-      </slot>
+      </el-table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="ex-table-footer" v-if="showPagination">
+      <el-pagination
+        :current-page="pagination.PageNum"
+        :page-size="pagination.PageSize"
+        :total="total"
+        :page-sizes="pagination.PageSizes || [10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
     </div>
   </div>
 </template>
+
 <script>
-import ExColumn from "./ExColumn";
-import ExCell from "./ExCell";
-import ExText from "../xt-text";
-import XtFlexBox from "../xt-flex-box";
+import ExTableCell from './ExTableCell.vue'
+
 export default {
-  name: "ExTable",
-  components: {
-    ExCell,
-    ExColumn,
-    ExText,
-    XtFlexBox
-  },
+  name: 'ExTable',
   inheritAttrs: false,
+  components: { ExTableCell },
   props: {
-    tbId: {
-      type: [Number, String],
-      default: ""
+    // 表格数据
+    tableData: { type: Array, default: () => [] },
+    // 列配置（支持 children 多级表头）
+    columns: { type: Array, default: () => [] },
+    // 分组列配置（按配置的层级合并单元格）
+    groupColumns: { type: Array, default: () => [] },
+    // 标题
+    title: { type: String, default: '' },
+    // 高度
+    height: { 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: []
+    }
+  },
+
+  computed: {
+    showPagination() {
+      return this.pagination && this.total > 0
     },
-    tableData: {
-      type: Array,
-      default() {
-        return [];
+
+    computedHeight() {
+      if (this.virtualScroll) {
+        return this.height || 400
       }
+      return this.height || undefined
     },
-    height: {
-      type: [Number, String, Function],
-      default: () => null
-    },
-    elementLoadingText: {
-      type: String,
-      default: "拼命加载中"
-    },
-    headerCellStyle: {
-      type: Object,
-      default: () => {
-        return {
-          background: "#F8F8F9",
-          color: "#606266"
-        };
+
+    // 计算固定列总宽度（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
     },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    pageSizes: {
-      type: Array,
-      default: () => [20, 50, 100, 200]
+
+    // 计算非固定列中已设置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
     },
-    pagination: {
-      type: Object,
-      default: null
+
+    // 计算需要自适应的列数（非固定列且未设置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
     },
-    total: {
-      type: Number,
-      default: 0
+
+    // 自适应列宽（未设置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
     },
-    columns: {
-      type: Array,
-      default() {
-        return [];
+
+    // 表头列定义（用于 colgroup，与 headerRows 列数保持一致）
+    headerCols() {
+      const cols = []
+      
+      // 选择列
+      if (this.selection) {
+        cols.push({ _key: 'prepend_selection', _width: 55, _minWidth: 55 })
       }
-    },
-    insertColumns: {
-      type: Array,
-      default() {
-        return [];
+      
+      // 序号列
+      if (this.showIndex) {
+        cols.push({ _key: 'prepend_index', _width: 60, _minWidth: 60 })
       }
-    },
-    selectable: {
-      type: Function,
-      default() {
-        return () => true;
+      
+      // 数据列（只取叶子节点，使用一致的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
     },
-    selection: {
-      type: Boolean,
-      default: false
-    },
-    showIndex: {
-      type: Boolean,
-      default: true
-    },
-    showRealIndex: {
-      type: Boolean,
-      default: true
-    },
-    expand: {
-      type: Boolean,
-      default: false
-    },
-    showColumsFilter: {
-      type: Boolean,
-      default: false
-    },
-    defaultColumnsFixed: {
-      type: Boolean,
-      default: true
-    },
-    autoSetHeight: {
-      type: Boolean,
-      default: true
+
+    // 表头层级结构（用于自定义固定表头渲染）
+    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
     },
-    simplePage: {
-      type: Boolean,
-      default: false
+
+    // 处理后的数据（注入小计/总计行）
+    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) => {
+          // 插入数据行
+          result.push(...groupRows)
+          // 插入小计行
+          const subtotalRow = this.createSubtotalRow(groupRows, groupKey)
+          result.push(subtotalRow)
+        })
+      } else {
+        result = data
+      }
+
+      // 插入总计行
+      if (hasTotal) {
+        const totalRow = this.createTotalRow(data)
+        result.push(totalRow)
+      }
+
+      return result
     },
-    border: {
-      type: Boolean,
-      default: true
+
+    // 虚拟滚动总高度
+    virtualTotalHeight() {
+      const data = this.processedTableData
+      return data.length * this.rowHeight
     },
-    indexRender: Function,
-    spanFields: {
-      type: Object
+
+    // 虚拟滚动偏移量
+    virtualOffsetY() {
+      const start = Math.max(0, this.visibleStartIndex - this.bufferSize)
+      return start * this.rowHeight
     },
-    groupColumns: {
-      type: Array,
-      default() {
-        return [];
+
+    // 扁平化列配置（处理 children 嵌套）
+    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 })
+        })
       }
+      flatten(this.columns)
+      this.flattenedColumnsCache = result
+      return result
     },
-    title: {},
-    emptSubTitle: {},
-    toolExport: {
-      type: Function,
-      default: null
-    }
-  },
-  data() {
-    return {
-      startIndex: 0,
-      inTableHeight: 0,
-      dropvisible: false,
-      hasLoad: true,
-      hasLoadData: false,
-      diyColumns: this.columns || [],
-      checkedColumns: [],
-      tableColumns: []
-    };
-  },
-  computed: {
-    spanTableData() {
-      return this.calculateGroupSpans(this.tableData, this.spanFields);
-    },
-    constColums() {
-      const _isFixed = this.defaultColumnsFixed ? "left" : null;
-      const _index = { type: "index", align: "center", label: this.showColumsFilter ? "" : "序号", width: "80", fixed: _isFixed, index: this.indexRender };
-      const _selection = { type: "selection", align: "center", width: "50", fixed: _isFixed };
-      if (this.hasLoad || !this.tbId) {
-        return this.selection ? this.showIndex ? [_index, _selection] : [_selection] : (this.showIndex ? [_index] : []);
-      } else {
-        return [];
+
+    // 虚拟滚动时的可见数据
+    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)
     }
   },
+
   watch: {
-    height(val) {
-      this.changeTableHight();
-    },
-    insertColumns: {
-      deep: true,
-      handler(val) {
-        this.getTableColumns().then(list => {
-          this.diyColumns = list;
-          const _insertColumns = this.insertColumns;
-          _insertColumns.forEach(custom => {
-            list.splice(custom.insertIndex, 0, {
-              type: "custom",
-              ...custom
-            });
-          });
-          this.tableColumns = list.filter(item => (item.show === undefined ? true : item.show));
-          this.checkedColumns = this.updateCheckColumns(this.tableColumns);
-          this.changeTableHight();
-        });
-      }
+    tableData: {
+      handler() {
+        this.spanCache = {}
+        this.flattenedColumnsCache = []
+        if (this.virtualScroll) {
+          this.$nextTick(() => {
+            this.measureRowHeight()
+            this.updateVisibleRange()
+          })
+        }
+      },
+      immediate: false
     },
+
     columns: {
-      deep: true,
-      immediate: true,
-      handler(val) {
-        this.getTableColumns().then(list => {
-          this.diyColumns = list;
-          this.tableColumns = list.filter(item => (item.show === undefined ? true : item.show));
-          this.checkedColumns = this.updateCheckColumns(this.tableColumns);
-          this.changeTableHight();
-        });
-      }
+      handler() {
+        this.flattenedColumnsCache = []
+      },
+      deep: true
     },
-    tableData: {
-      handler(val) {
-        this.$nextTick(() => {
-          this.changeTableHight();
-          this.hasLoadData = true;
-        });
+
+    virtualScroll(val) {
+      if (val) {
+        this.$nextTick(() => this.initVirtualScroll())
+      } else {
+        this.destroyVirtualScroll()
       }
     }
   },
+
   mounted() {
-    this.$nextTick(() => {
-      this.changeTableHight();
-      if (!this.height) {
-        window.onresize = () => {
-          this.changeTableHight();
-        };
-      }
-    });
-  },
-  activated() {
-    this.doLayout();
+    if (this.virtualScroll) {
+      this.$nextTick(() => this.initVirtualScroll())
+    }
+    // 监听窗口resize，更新表格宽度
+    this.resizeHandler = () => {
+      if (this.virtualScroll) {
+        this.$nextTick(() => this.updateTableWidth())
+      }
+    }
+    window.addEventListener('resize', this.resizeHandler)
   },
+
   beforeDestroy() {
-    document.removeEventListener("click", this.handleDocumentClick);
+    this.destroyVirtualScroll()
+    window.removeEventListener('resize', this.resizeHandler)
   },
+
   methods: {
-    realIndexRender(index) {
-      if (this.pagination) {
-        return this.pagination.PageSize * (this.pagination.PageNum - 1) + index + 1;
-      }
-      return index + 1;
-    },
-    updateCheckColumns(columnsData) {
-      const checkArr = [];
-      columnsData.forEach(item => {
-        const { prop, show } = item;
-        if (prop) {
-          const isHidden = (show !== undefined) && !show;
-          !isHidden && checkArr.push(prop);
-        }
-      });
-      return checkArr;
-    },
-    getTableColumns() {
-      const _columns = [];
-      return new Promise((resolve, reject) => {
-        if (!this.hasLoad && this.tbId) {
-          resolve(this.columns);
-          this.$emit("update:showColumsFilter", false);
-        } else {
-          resolve(this.columns);
-          this.$emit("update:showColumsFilter", false);
+    // ==================== 小计/总计工具函数 ====================
+    // 找到第一个数据列（非 selection/index），用于显示"小计"/"总计"标签
+    findLabelColumn() {
+      for (const col of this.columns) {
+        if (col.children && col.children.length) {
+          for (const child of col.children) {
+            if (child.prop) return { prop: child.prop, label: child.label }
+          }
+        } else if (col.prop) {
+          return { prop: col.prop, label: col.label }
         }
-      });
-    },
-    handleDropVisible() {
-      this.dropvisible = !this.dropvisible;
-      if (this.dropvisible) {
-        document.addEventListener("click", this.handleDocumentClick);
-      } else {
-        document.removeEventListener("click", this.handleDocumentClick);
-      }
-    },
-    handleDocumentClick(event) {
-      const popoverEl = document.querySelector(".filter-tool");
-      if (!popoverEl.contains(event.target)) {
-        this.dropvisible = false;
-        document.removeEventListener("click", this.handleDocumentClick);
-      }
-    },
-    handleToggle(show, item) {
-      if (this.checkedColumns.length === 0) {
-        this.$message.warning("至少选择一列显示！");
-        return;
       }
-      this.$emit("update:loading", true);
-      item.show = show;
-      this.tableColumns = this.diyColumns.filter(item => (item.show === undefined ? true : item.show));
-      this.checkedColumns = this.updateCheckColumns(this.tableColumns);
-      this.dropvisible = false;
-      this.changeTableHight();
-      this.$nextTick(() => {
-        this.doLayout();
-      });
+      return { prop: '', label: '' }
     },
-    doLayout() {
-      this.$refs.ExtendTable && this.$refs.ExtendTable.doLayout();
-    },
-    getAttrs() {
-      return {
-        height: this.autoSetHeight ? this.inTableHeight : undefined,
-        border: this.border,
-        stripe: true,
-        highlightCurrentRow: true,
-        headerCellStyle: this.headerCellStyle,
-        elementLoadingText: this.elementLoadingText,
-        spanMethod: this.spanFields || this.groupColumns.length ? this.handleSpanMethod : null,
-        ...this.$attrs
-      };
-    },
-    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
-      if (this.spanFields) {
-        const field = this.spanFields[columnIndex];
-        if (field && row[`_${field}_start`]) {
-          return {
-            rowspan: row[`_${field}_span`],
-            colspan: 1
-          };
-        } else if (field && !row[`_${field}_start`]) {
-          return {
-            rowspan: 0,
-            colspan: 0
-          };
-        }
-      }
-      if (this.groupColumns.length) {
-        const leftIndex = (Number(this.selection) + Number(this.showIndex));
-        const groupColumnIndex = columnIndex - leftIndex;
-        if (columnIndex >= leftIndex && columnIndex < leftIndex + this.groupColumns.length) {
-          const groupIndex = groupColumnIndex;
-          if (groupIndex >= 0 && groupColumnIndex < this.groupColumns.length) {
-            return this.getSpan(rowIndex, groupIndex);
-          }
+
+    // 按指定字段分组（保持分组顺序）
+    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, [])
         }
-        return { rowspan: 1, colspan: 1 };
-      }
+        map.get(key).push(row)
+      })
+      return map
     },
-    getSpan(rowIndex, groupIndex) {
-      const spans = this.calculateSpans();
-      if (spans[rowIndex] && spans[rowIndex][groupIndex]) {
-        return spans[rowIndex][groupIndex];
+
+    // 计算单列的聚合值
+    _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 'count': return rows.length
+        case 'min': return vals.length ? Math.min(...vals) : 0
+        case 'max': return vals.length ? Math.max(...vals) : 0
+        default: return ''
       }
-      return { rowspan: 1, colspan: 1 };
     },
-    calculateSpans() {
-      const spans = [];
-      const rowCount = this.tableData.length;
 
-      if (rowCount === 0) return spans;
+    // 创建小计行
+    createSubtotalRow(groupRows, groupKey) {
+      const config = this.subtotalConfig
+      const rawLabelProp = this.findLabelColumn()
 
-      for (let i = 0; i < rowCount; i++) {
-        spans[i] = [];
-        for (let j = 0; j < this.groupColumns.length; j++) {
-          spans[i][j] = { rowspan: 1, colspan: 1 };
-        }
+      // 获取第一个 groupBy 列的值显示
+      const labelField = config.groupBy ? config.groupBy[0] : ''
+      const groupValue = groupRows[0] ? groupRows[0][labelField] : groupKey
+      const labelText = config.labelText || `${groupValue} 小计`
+
+      const row = { _rowType: 'subtotal', _groupKey: groupKey }
+      row[rawLabelProp.prop] = labelText
+
+      // 计算各列的聚合值
+      if (config.columns) {
+        Object.keys(config.columns).forEach(prop => {
+          const calc = config.columns[prop]
+          row[prop] = typeof calc === 'string'
+            ? this._calcValue(groupRows, { prop, type: calc })
+            : this._calcValue(groupRows, calc)
+        })
       }
 
-      for (let level = 0; level < this.groupColumns.length; level++) {
-        let pos = 0;
-        while (pos < rowCount) {
-          const startPos = pos;
+      return row
+    },
 
-          let endPos = startPos;
-          const currentValue = this.tableData[startPos][this.groupColumns[level].prop];
+    // 创建总计行
+    createTotalRow(allRows) {
+      const config = this.totalConfig
+      const rawLabelProp = this.findLabelColumn()
+      const labelText = config.labelText || '总计'
 
-          let sameParent = true;
+      const row = { _rowType: 'total' }
+      row[rawLabelProp.prop] = labelText
 
-          for (let parentLevel = 0; parentLevel < level; parentLevel++) {
-            if (this.tableData[startPos][this.groupColumns[parentLevel].prop] !== this.tableData[endPos][this.groupColumns[parentLevel].prop]) {
-              sameParent = false;
-              break;
-            }
-          }
+      // 计算各列的聚合值
+      if (config.columns) {
+        Object.keys(config.columns).forEach(prop => {
+          const calc = config.columns[prop]
+          row[prop] = typeof calc === 'string'
+            ? this._calcValue(allRows, { prop, type: calc })
+            : this._calcValue(allRows, calc)
+        })
+      }
 
-          if (sameParent) {
-            while (endPos + 1 < rowCount && this.tableData[endPos + 1][this.groupColumns[level].prop] === currentValue && this.checkParentSame(startPos, endPos + 1, level)) {
-              endPos++;
-            }
-          }
+      return row
+    },
 
-          if (endPos > startPos) {
-            spans[startPos][level].rowspan = endPos - startPos + 1;
-            for (let i = startPos + 1; i <= endPos; i++) {
-              spans[i][level].rowspan = 0;
-              spans[i][level].colspan = 0;
-            }
-          }
+    // 行类名（小计/总计行样式）
+    getRowClassName({ row }) {
+      if (!row) return ''
+      if (row._rowType === 'subtotal') return 'ex-table-row-subtotal'
+      if (row._rowType === 'total') return 'ex-table-row-total'
+      return ''
+    },
 
-          pos = endPos + 1;
-        }
-      }
-      return spans;
+    // ==================== 列配置 ====================
+    getColumnProps(col) {
+      const { _key, children, render, formatter, slot, ...props } = col
+      return props
     },
-    checkParentSame(rowIndex1, rowIndex2, currentLevel) {
-      for (let level = 0; level < currentLevel; level++) {
-        const prop = this.groupColumns[level].prop;
-        if (this.tableData[rowIndex1][prop] != this.tableData[rowIndex2][prop]) {
-          return false;
+
+    // ==================== 序号方法 ====================
+    indexMethod(index) {
+      if (this.virtualScroll && this.visibleData.length > 0) {
+        const row = this.visibleData[index]
+        if (row && row._realIndex !== undefined) {
+          return row._realIndex + 1
         }
       }
-      return true;
+      return index + 1
     },
-    calculateGroupSpans(data, spanFields) {
-      const result = data.map(item => ({ ...item }));
-      for (const fieldIndex in spanFields) {
-        const field = spanFields[fieldIndex];
-        let currentValue = null;
-        let startIndex = 0;
 
-        result.forEach((row, index) => {
-          if (row[field] !== currentValue) {
-            currentValue = row[field];
-            startIndex = index;
-          }
+    // ==================== 分组合并 ====================
+    handleSpanMethod({ row, column, rowIndex }) {
+      // 跳过小计/总计行，不做合并
+      if (row._rowType === 'subtotal' || row._rowType === 'total') {
+        return { rowspan: 1, colspan: 1 }
+      }
 
-          row[`_${field}_span`] = 0;
-          row[`_${field}_start`] = false;
+      if (!this.groupColumns.length) return { rowspan: 1, colspan: 1 }
 
-          let endIndex = index;
+      const data = this.virtualScroll ? this.visibleData : this.processedTableData
+      const prop = column.property
+      const groupIndex = this.groupColumns.indexOf(prop)
 
-          while (endIndex + 1 < result.length && result[endIndex + 1][field] === currentValue) {
-            endIndex++;
-          }
-          if (index === startIndex) {
-            row[`_${field}_span`] = endIndex - startIndex + 1;
-            row[`_${field}_start`] = true;
+      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
+        for (let i = 0; i <= groupIndex; i++) {
+          const gp = this.groupColumns[i]
+          if (prevRow[gp] !== row[gp]) {
+            isSame = false
+            break
           }
-        });
+        }
+        if (isSame) {
+          const result = { rowspan: 0, colspan: 1 }
+          this.spanCache[cacheKey] = result
+          return result
+        }
       }
-      return result;
-    },
-    changeTableHight() {
-      try {
-        if (!this.autoSetHeight) return;
-        if (this.height) {
-          this.inTableHeight = (this.height - 1 - (this.title ? 40 : 0));
-          this.$nextTick(() => {
-            this.doLayout();
-          });
-          return;
+
+      // 向下扫描计算合并行数
+      let count = 1
+      for (let i = rowIndex + 1; i < data.length; i++) {
+        const nextRow = data[i]
+        let isSame = true
+        for (let j = 0; j <= groupIndex; j++) {
+          const gp = this.groupColumns[j]
+          if (nextRow[gp] !== row[gp]) {
+            isSame = false
+            break
+          }
+        }
+        if (isSame) {
+          count++
+        } else {
+          break
         }
-        let tableHeight = window.innerHeight || document.body.clientHeight;
-        const disTop = this.$refs.ExtendTable.$el;
-        tableHeight -= (disTop.getBoundingClientRect().top + 20 + 1);
-        tableHeight -= this.$refs.toolBar.offsetHeight;
-        this.inTableHeight = tableHeight;
-        this.doLayout();
-      } catch (err) {
-        console.log(err);
       }
+
+      const result = { rowspan: count > 1 ? count : 1, colspan: 1 }
+      this.spanCache[cacheKey] = result
+      return result
     },
-    setAttrs(params) {
-      const { ...options } = params;
-      if (!options.align) {
-        options.align = "center";
-      }
-      if (options.showTip) {
-        options.showOverflowTooltip = true;
-      }
-      return { ...options };
+
+    // ==================== 选择 ====================
+    handleSelectionChange(rows) {
+      // 过滤掉小计/总计行
+      this.selectedRows = rows.filter(r => !r._rowType)
+      this.$emit('selection-change', this.selectedRows)
     },
-    changeTableSort(column) {
-      const sortingType = column.order;
-      const sidx = sortingType ? column.prop : "";
-      let sord = "";
-      if (sortingType === "descending") {
-        sord = "desc";
-      } else if (sortingType === "ascending") {
-        sord = "asc";
-      }
-      this.$emit("changeTableSort", sidx, sord);
+
+    // ==================== 排序 ====================
+    handleSortChange({ prop, order }) {
+      this.$emit('sort-change', { prop, order })
+    },
+
+    // ==================== 分页 ====================
+    handleSizeChange(size) {
+      this.$emit('size-change', size)
+    },
+
+    handleCurrentChange(page) {
+      this.$emit('page-change', page)
     },
+
+    // ==================== 公开方法 ====================
     getSelection() {
-      return this.$refs.ExtendTable.store.states.selection;
+      return this.selectedRows
     },
+
     clearSelection() {
-      this.$refs.ExtendTable.store.clearSelection();
-      this.$refs.ExtendTable.store.updateAllSelected();
-      return this;
+      this.$refs.table && this.$refs.table.clearSelection()
+      this.selectedRows = []
     },
-    toggleRowSelection(rows, selected) {
-      this.$refs.ExtendTable.toggleRowSelection(rows, true);
+
+    toggleRowSelection(row, selected) {
+      this.$refs.table && this.$refs.table.toggleRowSelection(row, selected)
     },
+
     toggleRowsSelection(rows, selected) {
-      if (rows instanceof Array) {
+      if (rows && rows.length) {
         rows.forEach(row => {
-          this.$refs.ExtendTable.store.toggleRowSelection(row, selected, true);
-        });
-      } else {
-        this.$refs.ExtendTable.store.toggleRowSelection(rows, selected, true);
+          this.$refs.table && this.$refs.table.toggleRowSelection(row, selected)
+        })
       }
-      this.$refs.ExtendTable.store.updateAllSelected();
     },
-    rowChange(newVal, oldVal) {
-      this.$emit("currentChange", newVal, oldVal);
+
+    doLayout() {
+      this.$refs.table && this.$refs.table.doLayout()
     },
-    rowClick(row) {
-      this.$emit("rowClick", row);
+
+    // 获取列宽度（支持自适应）
+    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
     },
-    pageChange(val) {
-      this.$emit("pageChange", val);
+
+    // 更新表格宽度（用于自适应列宽计算）
+    updateTableWidth() {
+      const tableWrapper = this.$refs.tableBody
+      if (tableWrapper) {
+        this.tableWidth = tableWrapper.offsetWidth || 1000
+      }
     },
-    sizeChange(val) {
-      this.$emit("sizeChange", val);
+
+    // ==================== 虚拟滚动 ====================
+    initVirtualScroll() {
+      this.updateTableWidth()
+      this.measureRowHeight()
+      if (this.processedTableData.length > 0) {
+        this.updateVisibleRange()
+      }
     },
-    selectionChange(selections) {
-      this.$emit("selectionChange", selections);
+
+    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
+      }
     },
-    exportTableData() {
-      const title = this.title;
-      const list = [...this.tableData];
-      
-      if (typeof this.toolExport === 'function') {
-        try {
-          this.toolExport(list, title, this.columns);
-        } catch (error) {
-          console.error('Export hook error:', error);
-        }
+
+    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 lang="scss" scoped>
-.toolBar {
+
+<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;
-  justify-content: flex-end;
+  justify-content: space-between;
+  padding: 12px 0;
+  margin-bottom: 8px;
+}
+
+.ex-table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
   position: relative;
-  &.left{
-    justify-content: flex-start;
-  }
-  &.center{
-    justify-content: center;
-  }
-  &.right{
-    justify-content: flex-end;
-  }
-  ::v-deep .pagination {
-    padding: 15px 10px;
-    width: 100%;
-  }
+  padding-left: 12px;
 }
-.drop-body{
-  height: 175px;
-  overflow: hidden auto;
-  .checkli{
-    padding: 5px;
-    display: block;
-  }
+
+.ex-table-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 16px;
+  background: #409eff;
+  border-radius: 2px;
 }
-.empty{
-  &-title{
-    font-size: 16px;
-    color: #333333;
-  }
-  &-subtitle{
-    font-size: 12px;
-    color: #999999;
-  }
+
+.ex-table-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-::v-deep .el-table__cell, ::v-deep .el-table__row{
-  &.warn{
-    color: #E6A23C;
-    &.effect-light{
-      background-color: rgba(230, 162, 60, .2);
-    }
-    &.effect-dark{
-      color: #ffffff;
-      background-color: #E6A23C;
-    }
-  }
-  &.error{
-    color: #F56C6C;
-    &.effect-light{
-      background-color: rgba(245, 108, 108, .2);
-    }
-    &.effect-dark{
-      color: #ffffff;
-      background-color: #F56C6C;
-    }
-  }
-  &.info{
-    color: #409EFF;
-    &.effect-light{
-      background-color: rgba(64, 158, 255, .2);
-    }
-    &.effect-dark{
-      color: #ffffff;
-      background-color: #409EFF;
-    }
-  }
-  &.success{
-    color: #67C23A;
-    &.effect-light{
-      background-color: rgba(103, 194, 58, .2);
-    }
-    &.effect-dark{
-      color: #ffffff;
-      background-color: #67C23A;
-    }
-  }
+
+.ex-table-body {
+  position: relative;
+}
+
+/* 虚拟滚动容器 */
+.ex-table-virtual {
+  overflow: auto;
+  position: relative;
+}
+
+.ex-table-virtual-inner {
+  position: relative;
+  width: 100%;
+}
+
+.ex-table-virtual-inner > div {
+  will-change: transform;
+}
+
+.ex-table-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 0;
+}
+
+/* 虚拟滚动固定表头 */
+.ex-table-fixed-header {
+  overflow: hidden;
+  border-bottom: 1px solid #ebeef5;
+  background: #fafafa;
+}
+
+.ex-table-fixed-header-table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.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;
+}
+
+.ex-table-fixed-header-table th:last-child {
+  border-right: none;
+}
+
+.ex-table-fixed-header-table th:first-child {
+  padding-left: 16px;
 }
-</style>
+</style>