releases 4.7.49

Author: xuliangzhan

examples/App.vue

@@ -27,6 +27,7 @@ const navList = ref([
   { name: 'TableTest2', routerLink: { name: 'TableTest2' } },
   { name: 'TableTest3', routerLink: { name: 'TableTest3' } },
   { name: 'TableTest4', routerLink: { name: 'TableTest4' } },
+  { name: 'TableTest5', routerLink: { name: 'TableTest5' } },
   { name: 'GridTest', routerLink: { name: 'GridTest' } },
   { name: 'TestKeepTest1', routerLink: { name: 'TestKeepTest1' } },
   { name: 'TestKeepTest2', routerLink: { name: 'TestKeepTest2' } },

examples/router/index.ts

@@ -45,6 +45,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'TableTest4',
     component: () => import('../views/table/TableTest4.vue')
   },
+  {
+    path: '/component/table5',
+    name: 'TableTest5',
+    component: () => import('../views/table/TableTest5.vue')
+  },
   {
     path: '/component/grid',
     name: 'GridTest',

examples/views/table/TableTest5.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <vxe-table
+      border
+      stripe
+      resizable
+      highlight-hover-row
+      height="400"
+      :loading="demo1.loading"
+      :checkbox-config="{labelField: 'id', highlight: true, range: true}"
+      :data="demo1.tableData">
+      <vxe-column type="seq" width="auto"></vxe-column>
+      <vxe-column type="checkbox" title="ID" width="auto"></vxe-column>
+      <vxe-column field="role" title="Role" width="auto"></vxe-column>
+      <vxe-column field="name" title="Name" width="auto"></vxe-column>
+      <vxe-column field="age" title="Age" width="auto"></vxe-column>
+      <vxe-column field="sex" title="Sex" width="auto"></vxe-column>
+      <vxe-column field="address" title="Address" width="auto" show-overflow></vxe-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive } from 'vue'
+
+const demo1 = reactive({
+  loading: false,
+  tableData: [] as any[]
+})
+
+onMounted(() => {
+  demo1.loading = true
+  setTimeout(() => {
+    demo1.tableData = [
+      { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
+      { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
+      { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
+      { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
+      { id: 10005, name: 'Test5', role: 'Devel543535 sdf sdf sdf sd op', sex: '1', age: 30, address: 'Shanghai' },
+      { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' },
+      { id: 10007, name: 'Test7', role: 'Test', sex: '0', age: 29, address: 'test abc' },
+      { id: 10008, name: 'Test8', role: 'Devdsf sdf  elop', sex: '0', age: 35, address: 'test abc' },
+      { id: 10009, name: 'Test9', role: 'Test', sex: '1', age: 21, address: 'test abc' },
+      { id: 10010, name: 'Test10', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
+      { id: 10011, name: 'Test11', role: 'Test', sex: '0', age: 29, address: 'test abc' },
+      { id: 10012, name: 'Test12', role: 'Develop', sex: '1', age: 27, address: 'test abc' },
+      { id: 10013, name: 'Test13', role: 'Test', sex: '0', age: 24, address: 'test abc' },
+      { id: 10014, name: 'Test14', role: 'Develop', sex: '1', age: 34, address: 'test abc' },
+      { id: 10015, name: 'Test15', role: 'Tes sdfsd fsd fdss ff sd fds sdf fsdf st', sex: '1', age: 21, address: 'test abc' },
+      { id: 10016, name: 'Test16', role: 'Develop', sex: '0', age: 20, address: 'test abc' },
+      { id: 10017, name: 'Test17', role: 'Test', sex: '1', age: 31, address: 'test abc' },
+      { id: 10018, name: 'Test18', role: 'Develop', sex: '0', age: 32, address: 'test abc' },
+      { id: 10019, name: 'Test19', role: 'Test', sex: '1', age: 37, address: 'test abc' },
+      { id: 10020, name: 'Test20', role: 'Develop', sex: '1', age: 41, address: 'test abc' }
+    ]
+    demo1.loading = false
+  }, 100)
+})
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.7.48",
+  "version": "4.7.49",
   "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": "^4.0.61"
+    "vxe-pc-ui": "^4.0.63"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

packages/grid/src/grid.ts

@@ -184,9 +184,9 @@ export default defineComponent({
       const tableProps = Object.assign({}, tableExtendProps)
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
-          tableProps.maxHeight = 'auto'
+          tableProps.maxHeight = 'fill'
         } else {
-          tableProps.height = 'auto'
+          tableProps.height = 'fill'
         }
       }
       if (proxyConfig && isEnableConf(proxyOpts)) {
@@ -1125,7 +1125,7 @@ export default defineComponent({
         const topWrapper = refTopWrapper.value
         const bottomWrapper = refBottomWrapper.value
         const pagerWrapper = refPagerWrapper.value
-        const parentPaddingSize = isZMax || height !== 'auto' ? 0 : getPaddingTopBottomSize(el.parentNode as HTMLElement)
+        const parentPaddingSize = isZMax || !(height === 'auto' || height === 'fill') ? 0 : getPaddingTopBottomSize(el.parentNode as HTMLElement)
         return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper)
       },
       getParentHeight () {

packages/table/src/cell.ts

@@ -252,19 +252,22 @@ export const Cell = {
    */
   renderTreeIcon (params: VxeTableDefines.CellRenderBodyParams, cellVNodes: VxeComponentSlotType[]) {
     const { $table, isHidden } = params
-    const { reactData } = $table
+    const { reactData, internalData } = $table
     const { computeTreeOpts } = $table.getComputeMaps()
     const { treeExpandedMaps, treeExpandLazyLoadedMaps } = reactData
+    const { fullAllDataRowIdData } = internalData
     const treeOpts = computeTreeOpts.value
     const { row, column, level } = params
     const { slots } = column
     const { indent, lazy, trigger, iconLoaded, showIcon, iconOpen, iconClose } = treeOpts
     const childrenField = treeOpts.children || treeOpts.childrenField
     const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
     const rowChilds = row[childrenField]
+    const hasChild = rowChilds && rowChilds.length
     const iconSlot = slots ? slots.icon : null
     let hasLazyChilds = false
     let isAceived = false
+    let isLazyLoading = false
     let isLazyLoaded = false
     const ons: any = {}
     if (iconSlot) {
@@ -274,8 +277,10 @@ export const Cell = {
       const rowid = getRowid($table, row)
       isAceived = !!treeExpandedMaps[rowid]
       if (lazy) {
-        isLazyLoaded = !!treeExpandLazyLoadedMaps[rowid]
+        const rest = fullAllDataRowIdData[rowid]
+        isLazyLoading = !!treeExpandLazyLoadedMaps[rowid]
         hasLazyChilds = row[hasChildField]
+        isLazyLoaded = !!rest.treeLoaded
       }
     }
     if (!trigger || trigger === 'default') {
@@ -292,14 +297,14 @@ export const Cell = {
           paddingLeft: `${level * indent}px`
         }
       }, [
-        showIcon && ((rowChilds && rowChilds.length) || hasLazyChilds)
+        showIcon && (lazy ? (isLazyLoaded ? hasChild : hasLazyChilds) : hasChild)
           ? [
               h('div', {
                 class: 'vxe-tree--btn-wrapper',
                 ...ons
               }, [
                 h('i', {
-                  class: ['vxe-tree--node-btn', isLazyLoaded ? (iconLoaded || getIcon().TABLE_TREE_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_TREE_OPEN) : (iconClose || getIcon().TABLE_TREE_CLOSE))]
+                  class: ['vxe-tree--node-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_TREE_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_TREE_OPEN) : (iconClose || getIcon().TABLE_TREE_CLOSE))]
                 })
               ])
             ]
@@ -622,15 +627,15 @@ export const Cell = {
     const defaultSlot = slots ? slots.default : null
     const iconSlot = slots ? slots.icon : null
     let isAceived = false
-    let isLazyLoaded = false
+    let isLazyLoading = false
     if (iconSlot) {
       return $table.callSlot(iconSlot, params)
     }
     if (!isHidden) {
       const rowid = getRowid($table, row)
       isAceived = !!rowExpandedMaps[rowid]
       if (lazy) {
-        isLazyLoaded = !!rowExpandLazyLoadedMaps[rowid]
+        isLazyLoading = !!rowExpandLazyLoadedMaps[rowid]
       }
     }
     return [
@@ -644,7 +649,7 @@ export const Cell = {
           }
         }, [
           h('i', {
-            class: ['vxe-table--expand-btn', isLazyLoaded ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))]
+            class: ['vxe-table--expand-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))]
           })
         ])
         : null,

packages/table/src/columnInfo.ts

@@ -128,6 +128,7 @@ export class ColumnInfo {
       renderWidth: 0,
       renderHeight: 0,
       renderResizeWidth: 0,
+      renderAutoWidth: 0,
       resizeWidth: 0, // 手动调整
 
       renderLeft: 0,