vxe-table 3.12.0 → 3.12.1-beta.0

package/lib/vxe-grid/style/style.css

@@ -1,5 +1,8 @@
 .vxe-grid {
   position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
 }
 .vxe-grid.is--loading:before {
   content: "";
@@ -46,6 +49,17 @@
   overflow: hidden;
 }
 
+.vxe-grid--aside-left-wrapper,
+.vxe-grid--aside-right-wrapper {
+  flex-shrink: 0;
+  overflow: auto;
+}
+
+.vxe-grid--body-content-wrapper {
+  flex-grow: 1;
+  overflow: auto;
+}
+
 .vxe-grid {
   font-size: var(--vxe-ui-font-size-default);
 }

package/lib/vxe-grid/style/style.min.css

@@ -1 +1 @@
-.vxe-grid{position:relative}.vxe-grid.is--loading:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-ui-loading-background-color)}.vxe-grid.is--loading>.vxe-table .vxe-loading{background-color:transparent}.vxe-grid.is--maximize{position:fixed;top:0;left:0;width:100%;height:100%;padding:.5em 1em;background-color:var(--vxe-ui-layout-background-color)}.vxe-grid .vxe-grid--bottom-wrapper,.vxe-grid .vxe-grid--form-wrapper,.vxe-grid .vxe-grid--top-wrapper{position:relative}.vxe-grid .vxe-grid--table-container{display:flex;flex-direction:row}.vxe-grid .vxe-grid--left-wrapper,.vxe-grid .vxe-grid--right-wrapper{flex-shrink:0;overflow:auto;outline:0}.vxe-grid .vxe-grid--table-wrapper{flex-grow:1;overflow:hidden}.vxe-grid{font-size:var(--vxe-ui-font-size-default)}.vxe-grid.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-grid.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-grid.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-grid{position:relative;display:flex;flex-direction:row;overflow:auto}.vxe-grid.is--loading:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-ui-loading-background-color)}.vxe-grid.is--loading>.vxe-table .vxe-loading{background-color:transparent}.vxe-grid.is--maximize{position:fixed;top:0;left:0;width:100%;height:100%;padding:.5em 1em;background-color:var(--vxe-ui-layout-background-color)}.vxe-grid .vxe-grid--bottom-wrapper,.vxe-grid .vxe-grid--form-wrapper,.vxe-grid .vxe-grid--top-wrapper{position:relative}.vxe-grid .vxe-grid--table-container{display:flex;flex-direction:row}.vxe-grid .vxe-grid--left-wrapper,.vxe-grid .vxe-grid--right-wrapper{flex-shrink:0;overflow:auto;outline:0}.vxe-grid .vxe-grid--table-wrapper{flex-grow:1;overflow:hidden}.vxe-grid--aside-left-wrapper,.vxe-grid--aside-right-wrapper{flex-shrink:0;overflow:auto}.vxe-grid--body-content-wrapper{flex-grow:1;overflow:auto}.vxe-grid{font-size:var(--vxe-ui-font-size-default)}.vxe-grid.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-grid.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-grid.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.12.0",
+  "version": "3.12.1-beta.0",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^3.3.58"
+    "vxe-pc-ui": "^3.3.60"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.25.7",

package/packages/grid/src/grid.ts

@@ -1,7 +1,7 @@
 import { CreateElement, VNode } from 'vue'
 import XEUtils from 'xe-utils'
 import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
-import { getOffsetHeight, getPaddingTopBottomSize, getDomNode } from '../../ui/src/dom'
+import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit } from '../../ui/src/dom'
 import { VxeUI } from '../../ui'
 import VxeTableComponent from '../../table/src/table'
 import VxeToolbarComponent from '../../toolbar/src/toolbar'
@@ -9,7 +9,8 @@ import tableComponentProps from '../../table/src/props'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeFormComponent, VxePagerComponent } from 'vxe-pc-ui'
+import type { VxeFormComponent, VxePagerComponent, VxeComponentStyleType } from 'vxe-pc-ui'
+import type{ GridReactData } from '../../../types'
 
 const { getConfig, getI18n, commands, globalEvents, globalMixins, renderEmptyElement } = VxeUI
 
@@ -430,8 +431,25 @@ export default {
     computeZoomOpts () {
       return Object.assign({}, getConfig().grid.zoomConfig, this.zoomConfig)
     },
-    renderStyle () {
-      return this.isZMax ? { zIndex: this.tZindex } : null
+    computeStyles () {
+      const $xeGrid = this
+      const props = $xeGrid
+      const reactData = $xeGrid as GridReactData
+
+      const { height, maxHeight } = props
+      const { isZMax, tZindex } = reactData
+      const stys: VxeComponentStyleType = {}
+      if (isZMax) {
+        stys.zIndex = tZindex
+      } else {
+        if (height) {
+          stys.height = height === 'auto' || height === '100%' ? '100%' : toCssUnit(height)
+        }
+        if (maxHeight) {
+          stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : toCssUnit(maxHeight)
+        }
+      }
+      return stys
     },
     tableExtendProps () {
       const rest: any = {}
@@ -544,18 +562,39 @@ export default {
     globalEvents.off(this, 'keydown')
   },
   render (this: any, h: CreateElement) {
-    const { computeSize, isZMax } = this
-    const vSize = computeSize
+    const $xeGrid = this
+    const props = $xeGrid
+    const reactData = $xeGrid as GridReactData
+    const slots = $xeGrid.$scopedSlots
+
+    const vSize = $xeGrid.computeSize
+    const styles = $xeGrid.computeStyles
+    const asideLeftSlot = slots.asideLeft || slots['aside-left']
+    const asideRightSlot = slots.asideRight || slots['aside-right']
     return h('div', {
       class: ['vxe-grid', {
         [`size--${vSize}`]: vSize,
         'is--animat': !!this.animat,
         'is--round': this.round,
-        'is--maximize': isZMax,
-        'is--loading': this.loading || this.tableLoading
+        'is--maximize': reactData.isZMax,
+        'is--loading': props.loading || reactData.tableLoading
       }],
-      style: this.renderStyle
-    }, renderLayout(h, this))
+      style: styles
+    }, [
+      asideLeftSlot
+        ? h('div', {
+          class: 'vxe-grid--aside-left-wrapper'
+        }, asideLeftSlot.call($xeGrid, {}))
+        : renderEmptyElement($xeGrid),
+      h('div', {
+        class: 'vxe-grid--body-content-wrapper'
+      }, renderLayout(h, $xeGrid)),
+      asideRightSlot
+        ? h('div', {
+          class: 'vxe-grid--aside-right-wrapper'
+        }, asideRightSlot.call($xeGrid, {}))
+        : renderEmptyElement($xeGrid)
+    ])
   },
   methods: {
     ...methods,

package/packages/ui/src/dom.ts

@@ -73,6 +73,13 @@ export function addClass (elem: any, cls: string) {
   }
 }
 
+export function toCssUnit (val?: number | string, unit = 'px') {
+  if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
+    return `${val}${unit}`
+  }
+  return `${val || ''}`
+}
+
 export function getDomNode () {
   const documentElement = document.documentElement
   const bodyElem = document.body

package/styles/components/grid.scss

@@ -1,5 +1,8 @@
 .vxe-grid {
   position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
   &.is--loading {
     &:before {
       content: "";
@@ -48,6 +51,16 @@
   }
 }
 
+.vxe-grid--aside-left-wrapper,
+.vxe-grid--aside-right-wrapper {
+  flex-shrink: 0;
+  overflow: auto;
+}
+.vxe-grid--body-content-wrapper {
+  flex-grow: 1;
+  overflow: auto;
+}
+
 .vxe-grid {
   font-size: var(--vxe-ui-font-size-default);
   &.size--medium {