xt-element-ui 1.2.0 → 1.2.2

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

@@ -8,32 +8,40 @@
       </div>
     </div>
 
-    <!-- 虚拟滚动固定表头（独立于滚动容器） -->
+    <!-- 虚拟滚动固定表头：复用 el-table 列布局，与 body 表头对齐 -->
     <div
-      v-if="virtualScroll && headerRows.length"
+      v-if="virtualScroll && computedHeight"
       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>
+      <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>
 
     <!-- 表格主体 -->
@@ -106,6 +114,7 @@
         ref="table"
         :data="visibleData"
         :height="computedHeight"
+        :max-height="computedMaxHeight"
         :span-method="groupColumns.length ? handleSpanMethod : undefined"
         :row-class-name="getRowClassName"
         v-bind="$attrs"
@@ -171,11 +180,13 @@
 
 <script>
 import ExTableCell from './ExTableCell.vue'
+// 内部导入 element-ui 组件，避免与外部 element-ui 冲突
+import { Table as ElTable, TableColumn as ElTableColumn } from 'element-ui'
 
 export default {
   name: 'ExTable',
   inheritAttrs: false,
-  components: { ExTableCell },
+  components: { ExTableCell, ElTable, ElTableColumn },
   props: {
     // 表格数据
     tableData: { type: Array, default: () => [] },
@@ -187,6 +198,8 @@ export default {
     title: { type: String, default: '' },
     // 高度
     height: { type: [Number, String], default: null },
+    // 最大高度（非虚拟滚动时与 height 二选一，均支持固定表头）
+    maxHeight: { type: [Number, String], default: null },
     // 虚拟滚动
     virtualScroll: { type: Boolean, default: false },
     // 预估行高
@@ -224,8 +237,6 @@ export default {
       visibleStartIndex: 0,
       visibleEndIndex: 0,
       visibleCount: 0,
-      // 表格宽度（用于自适应列宽计算）
-      tableWidth: 0,
       // 分组合并缓存
       spanCache: {},
       // 列扁平化缓存
@@ -242,203 +253,19 @@ export default {
 
     computedHeight() {
       if (this.virtualScroll) {
-        return this.height || 400
+        return this.height || this.maxHeight || 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
+    computedMaxHeight() {
+      if (this.virtualScroll || this.height) return undefined
+      return this.maxHeight || undefined
     },
 
-    // 计算非固定列中已设置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
-    },
-
-    // 计算需要自适应的列数（非固定列且未设置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
+    // 虚拟滚动固定表头占位数据（仅渲染表头，不渲染 body 行）
+    headerTableData() {
+      return []
     },
 
     // 处理后的数据（注入小计/总计行）
@@ -491,22 +318,25 @@ export default {
       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
+      this.flattenedColumnsCache = assignKeys(this.columns)
+      return this.flattenedColumnsCache
     },
 
-    // 虚拟滚动时的可见数据
+    // 虚拟滚动时的可见数据（附带 _realIndex 供序号列使用）
     visibleData() {
       const data = this.processedTableData
       if (!this.virtualScroll || data.length === 0) {
@@ -514,7 +344,10 @@ export default {
       }
       const start = Math.max(0, this.visibleStartIndex - this.bufferSize)
       const end = Math.min(data.length, this.visibleEndIndex + this.bufferSize)
-      return data.slice(start, end)
+      return data.slice(start, end).map((row, i) => ({
+        ...row,
+        _realIndex: start + i
+      }))
     }
   },
 
@@ -527,6 +360,7 @@ export default {
           this.$nextTick(() => {
             this.measureRowHeight()
             this.updateVisibleRange()
+            this.syncTableLayout()
           })
         }
       },
@@ -536,10 +370,25 @@ export default {
     columns: {
       handler() {
         this.flattenedColumnsCache = []
+        if (this.virtualScroll) {
+          this.$nextTick(() => this.syncTableLayout())
+        }
       },
       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())
@@ -556,7 +405,7 @@ export default {
     // 监听窗口resize，更新表格宽度
     this.resizeHandler = () => {
       if (this.virtualScroll) {
-        this.$nextTick(() => this.updateTableWidth())
+        this.$nextTick(() => this.syncTableLayout())
       }
     }
     window.addEventListener('resize', this.resizeHandler)
@@ -795,41 +644,35 @@ export default {
     },
 
     doLayout() {
-      this.$refs.table && this.$refs.table.doLayout()
+      this.syncTableLayout()
     },
 
-    // 获取列宽度（支持自适应）
-    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
+    // ==================== 虚拟滚动固定表头 ====================
+    syncTableLayout() {
+      const bodyTable = this.$refs.table
+      const headerTable = this.$refs.headerTable
+      if (bodyTable) bodyTable.doLayout()
+      if (headerTable) headerTable.doLayout()
+      this.syncHeaderScroll(this.scrollLeft)
     },
 
-    // 更新表格宽度（用于自适应列宽计算）
-    updateTableWidth() {
-      const tableWrapper = this.$refs.tableBody
-      if (tableWrapper) {
-        this.tableWidth = tableWrapper.offsetWidth || 1000
+    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.updateTableWidth()
+      this.rowHeight = this.rowInitHeight
       this.measureRowHeight()
       if (this.processedTableData.length > 0) {
         this.updateVisibleRange()
       }
+      this.syncTableLayout()
     },
 
     measureRowHeight() {
@@ -847,6 +690,7 @@ export default {
       if (this.virtualScroll) {
         this.scrollTop = target.scrollTop
         this.updateVisibleRange()
+        this.syncHeaderScroll(target.scrollLeft)
       }
     },
 
@@ -945,8 +789,12 @@ export default {
 
 /* 虚拟滚动容器 */
 .ex-table-virtual {
-  overflow: auto;
+  overflow: overlay;
   position: relative;
+  /* Firefox 隐藏滚动条 */
+  scrollbar-width: none;
+  /* IE/旧 Edge 隐藏滚动条 */
+  -ms-overflow-style: none;
 }
 
 .ex-table-virtual-inner {
@@ -964,39 +812,25 @@ export default {
   padding: 16px 0;
 }
 
-/* 虚拟滚动固定表头 */
+/* 虚拟滚动固定表头（header-only el-table） */
 .ex-table-fixed-header {
   overflow: hidden;
-  border-bottom: 1px solid #ebeef5;
-  background: #fafafa;
+  flex-shrink: 0;
 }
 
-.ex-table-fixed-header-table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
+/* 虚拟滚动表头强制补上 gutter 占位 */
+.ex-table-fixed-header >>> .el-table__header-wrapper thead tr .el-table__cell.gutter {
+  display: table-cell;
+  width: 8px; /* 和滚动条宽度一致 */
 }
 
-.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-header-only >>> .el-table__body-wrapper,
+.ex-table-header-only >>> .el-table__empty-block {
+  display: none;
 }
 
-.ex-table-fixed-header-table th:first-child {
-  padding-left: 16px;
+.ex-table-header-only >>> .el-table__header-wrapper {
+  overflow: hidden;
 }
 </style>

package/src/components/ex-table/virtualScrollData.js

@@ -0,0 +1,35 @@
+/**
+ * 生成虚拟滚动演示数据
+ * @param {number} count 数据条数，默认 10000
+ * @returns {Array}
+ */
+export function createVirtualScrollData(count = 10000) {
+  const departments = ['研发部', '产品部', '运营部', '财务部', '市场部']
+  const positions = ['工程师', '产品经理', '运营专员', '财务主管', '市场经理']
+  const statuses = ['在职', '休假', '离职']
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `用户${i + 1}`,
+    department: departments[i % departments.length],
+    position: positions[i % positions.length],
+    email: `user${i + 1}@example.com`,
+    phone: `13800138${String(i).padStart(4, '0')}`,
+    address: `北京市朝阳区第${i + 1}号街道`,
+    salary: 5000 + Math.floor(Math.random() * 10000),
+    status: statuses[i % statuses.length]
+  }))
+}
+
+/** 虚拟滚动演示列配置 */
+export const virtualScrollColumns = [
+  { prop: 'id', label: 'ID', fixed: 'left', width: 80 },
+  { prop: 'name', label: '姓名', fixed: 'left', width: 120 },
+  { prop: 'department', label: '部门', width: 150 },
+  { prop: 'position', label: '职位', width: 150 },
+  { prop: 'email', label: '邮箱', width: 200 },
+  { prop: 'phone', label: '电话', width: 130 },
+  { prop: 'address', label: '地址', width: 200 },
+  { prop: 'salary', label: '薪资', width: 120 },
+  { prop: 'status', label: '状态', fixed: 'right', width: 100 }
+]

package/src/components/xt-config-provider/index.vue

@@ -13,25 +13,25 @@ export default {
   },
   watch: {
     theme(newVal) {
-      this.$provide('xtConfig', {
+      this.xtConfig ={
         theme: newVal,
         size: this.size,
         primaryColor: this.primaryColor
-      })
+      }
     },
     size(newVal) {
-      this.$provide('xtConfig', {
-        theme: this.theme,
-        size: newVal,
+      this.xtConfig ={
+        theme: newVal,
+        size: this.size,
         primaryColor: this.primaryColor
-      })
+      }
     },
     primaryColor(newVal) {
-      this.$provide('xtConfig', {
-        theme: this.theme,
+      this.xtConfig ={
+        theme: newVal,
         size: this.size,
-        primaryColor: newVal
-      })
+        primaryColor: this.primaryColor
+      }
     }
   },
   render(h) {

package/src/components/xt-text/style/index.scss

@@ -76,17 +76,17 @@
 }
 
 // 暗色主题
-html[data-theme='dark'] .xt-text--primary {
+[data-theme='dark'] .xt-text--primary {
 }
 
-html[data-theme='dark'] .xt-text--success {
+[data-theme='dark'] .xt-text--success {
   color: $xt-dark-color-success;
 }
 
-html[data-theme='dark'] .xt-text--warning {
+[data-theme='dark'] .xt-text--warning {
   color: $xt-dark-color-warning;
 }
 
-html[data-theme='dark'] .xt-text--danger {
+[data-theme='dark'] .xt-text--danger {
   color: $xt-dark-color-danger;
 }

package/src/index.js

@@ -96,15 +96,16 @@ const install = function (Vue, options = {}) {
     }
   }
 
-  // 仅在开发环境下尝试注册 ElementUI 组件为 Ex 开头（方便文档和示例使用）
-  // 生产环境发布时不需要，避免不必要的依赖
-  if (process.env.NODE_ENV === 'development') {
-    try {
-      const ElementUI = require('element-ui')
-      registerElementExComponents(Vue, ElementUI)
-    } catch (e) {
-      console.warn('[XT-UI] ElementUI not found, skipping Ex- prefix registration for Element components')
-    }
+if (process.env.NODE_ENV === 'development') {
+  // 导入内部 element-ui 依赖（作为内部依赖，不与外部冲突）
+  const ElementUI = require('element-ui')
+  
+  // 注册 ElementUI 的基础组件（用于 ExTable 等封装组件内部使用）
+  // 不调用 Vue.use(ElementUI)，避免全局污染
+  // ex-table 等组件内部会直接使用 element-ui 的组件
+  
+  // 在开发环境下注册 ElementUI 组件为 Ex 开头（方便文档和示例使用）
+    registerElementExComponents(Vue, ElementUI)
   }
 
   // 调用统一的注册函数
@@ -139,6 +140,9 @@ export default {
 // ExChart 组件按需导出（使用时需自行安装 echarts 依赖）
 export { default as ExChart } from './components/ex-chart'
 
+// ExTable 虚拟滚动演示数据工具
+export { createVirtualScrollData, virtualScrollColumns } from './components/ex-table/virtualScrollData'
+
 // 导出工具函数和变量
 export {
   utils,

package/src/styles/css-variables.scss

@@ -183,7 +183,6 @@
 // 暗色主题（参考 Element Plus）
 // ============================
 :root[data-theme="dark"],
-html[data-theme="dark"],
 [data-theme="dark"] {
     color-scheme: dark;
     --xt-color-primary: #409eff;