vxe-table 4.7.80 → 4.7.82

package/packages/grid/src/grid.ts

@@ -832,9 +832,12 @@ export default defineComponent({
                 }
               }
               if (isInited) {
-                const { computeSortOpts } = $xeTable.getComputeMaps()
-                const sortOpts = computeSortOpts.value
-                let defaultSort = sortOpts.defaultSort
+                let defaultSort = null
+                if ($xeTable) {
+                  const { computeSortOpts } = $xeTable.getComputeMaps()
+                  const sortOpts = computeSortOpts.value
+                  defaultSort = sortOpts.defaultSort
+                }
                 // 如果使用默认排序
                 if (defaultSort) {
                   if (!XEUtils.isArray(defaultSort)) {
@@ -848,14 +851,18 @@ export default defineComponent({
                     }
                   })
                 }
-                filterList = $xeTable.getCheckedFilters()
-              } else {
-                if (isReload) {
-                  $xeTable.clearAll()
-                } else {
-                  sortList = $xeTable.getSortColumns()
+                if ($xeTable) {
                   filterList = $xeTable.getCheckedFilters()
                 }
+              } else {
+                if ($xeTable) {
+                  if (isReload) {
+                    $xeTable.clearAll()
+                  } else {
+                    sortList = $xeTable.getSortColumns()
+                    filterList = $xeTable.getCheckedFilters()
+                  }
+                }
               }
               const commitParams = {
                 code,
@@ -1250,6 +1257,21 @@ export default defineComponent({
     initPages()
 
     onMounted(() => {
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
+        nextTick(() => {
+          if (props.formConfig) {
+            if (!VxeUIFormComponent) {
+              errLog('vxe.error.reqComp', ['vxe-form'])
+            }
+          }
+          if (props.pagerConfig) {
+            if (!VxeUIPagerComponent) {
+              errLog('vxe.error.reqComp', ['vxe-pager'])
+            }
+          }
+        })
+      }
+
       nextTick(() => {
         const { columns } = props
         // const { data, columns, proxyConfig } = props
@@ -1269,6 +1291,7 @@ export default defineComponent({
           $xeGrid.loadColumn(columns)
         }
         initToolbar()
+        initProxy()
       })
       globalEvents.on($xeGrid, 'keydown', handleGlobalKeydownEvent)
     })
@@ -1277,23 +1300,6 @@ export default defineComponent({
       globalEvents.off($xeGrid, 'keydown')
     })
 
-    nextTick(() => {
-      if (process.env.VUE_APP_VXE_ENV === 'development') {
-        if (props.formConfig) {
-          if (!VxeUIFormComponent) {
-            errLog('vxe.error.reqComp', ['vxe-form'])
-          }
-        }
-        if (props.pagerConfig) {
-          if (!VxeUIPagerComponent) {
-            errLog('vxe.error.reqComp', ['vxe-pager'])
-          }
-        }
-      }
-
-      initProxy()
-    })
-
     const renderVN = () => {
       const vSize = computeSize.value
       const styles = computeStyles.value

package/packages/table/render/index.ts

@@ -25,7 +25,7 @@ function getFormatDate (value: any, props: any, defaultFormat: string) {
 }
 
 function getLabelFormatDate (value: any, props: any) {
-  return getFormatDate(value, props, getI18n(`vxe.input.date.labelFormat.${props.type}`))
+  return getFormatDate(value, props, getI18n(`vxe.input.date.labelFormat.${props.type || 'date'}`))
 }
 
 /**
@@ -89,10 +89,10 @@ function isImmediateCell (renderOpts: VxeColumnPropTypes.EditRender, params: any
 }
 
 function getCellLabelVNs (renderOpts: any, params: any, cellLabel: any) {
-  const { placeholder } = renderOpts
+  const { name, placeholder } = renderOpts
   return [
     h('span', {
-      class: 'vxe-cell--label'
+      class: ['vxe-cell--label', ['VxeTextarea', 'textarea'].includes(name) ? 'is--textarea' : '']
     }, placeholder && isEmptyValue(cellLabel)
       ? [
           h('span', {
@@ -629,15 +629,7 @@ renderer.mixin({
       const { row, column } = params
       let cellValue = XEUtils.get(row, column.field)
       if (cellValue) {
-        switch (props.type) {
-          case 'date':
-          case 'week':
-          case 'month':
-          case 'quarter':
-          case 'year':
-            cellValue = getLabelFormatDate(cellValue, props)
-            break
-        }
+        cellValue = getLabelFormatDate(cellValue, props)
       }
       return getCellLabelVNs(renderOpts, params, cellValue)
     },
@@ -646,7 +638,13 @@ renderer.mixin({
     tableFilterDefaultMethod: handleFilterMethod
   },
   VxeTextarea: {
-    tableAutoFocus: 'VxeTextarea'
+    tableAutoFocus: 'textarea',
+    renderTableEdit: defaultEditRender,
+    renderTableCell (renderOpts, params) {
+      const { row, column } = params
+      const cellValue = XEUtils.get(row, column.field)
+      return getCellLabelVNs(renderOpts, params, cellValue)
+    }
   },
   VxeButton: {
     renderTableDefault: buttonCellRender

package/packages/table/src/body.ts

@@ -334,6 +334,7 @@ export default defineComponent({
             'col--tree-node': treeNode,
             'col--edit': isEdit,
             'col--ellipsis': hasEllipsis,
+            'col--height': !!rowOpts.height,
             'fixed--hidden': fixedHiddenColumn,
             'col--dirty': isDirty,
             'col--active': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),

package/packages/table/src/props.ts

@@ -34,6 +34,11 @@ export default {
     type: [Boolean, String] as PropType<VxeTablePropTypes.Border>,
     default: () => getConfig().table.border
   },
+  // 单元格是否有边距
+  padding: {
+    type: Boolean as PropType<VxeTablePropTypes.Padding>,
+    default: () => getConfig().table.padding
+  },
   // 是否圆角边框
   round: {
     type: Boolean as PropType<VxeTablePropTypes.Round>,

package/packages/table/src/table.ts

@@ -1132,10 +1132,20 @@ export default defineComponent({
               paddingSize = Math.floor(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight)) + 2
             }
             let colWidth = column.renderAutoWidth - paddingSize
-            XEUtils.arrayEach(cellElList, (cellEl) => {
-              const labelEl = cellEl.firstChild as HTMLElement
-              if (labelEl) {
-                colWidth = Math.max(colWidth, Math.ceil(labelEl.offsetWidth) + 4)
+            XEUtils.arrayEach(cellElList, (itemEl) => {
+              const cellEl = itemEl as HTMLElement
+              const thElem = cellEl.parentNode as HTMLElement
+              let titleWidth = 0
+              if (`${thElem.tagName}`.toLowerCase() === 'th') {
+                XEUtils.arrayEach(cellEl.children, (btnEl) => {
+                  titleWidth += (btnEl as HTMLElement).offsetWidth + 1
+                })
+              } else {
+                const labelEl = cellEl.firstChild as HTMLElement
+                titleWidth = labelEl.offsetWidth
+              }
+              if (titleWidth) {
+                colWidth = Math.max(colWidth, Math.ceil(titleWidth) + 4)
               }
             })
             column.renderAutoWidth = colWidth + paddingSize
@@ -7035,6 +7045,7 @@ export default defineComponent({
           'is--fixed-left': leftList.length,
           'is--fixed-right': rightList.length,
           'is--animat': !!props.animat,
+          'is--padding': props.padding,
           'is--round': props.round,
           'is--stripe': !treeConfig && stripe,
           'is--loading': currLoading,

package/packages/toolbar/src/toolbar.ts

@@ -310,6 +310,11 @@ export default defineComponent({
               round: child.round,
               status: child.status,
               content: child.name,
+              title: child.title,
+              routerLink: child.routerLink,
+              permissionCode: child.permissionCode,
+              prefixTooltip: child.prefixTooltip,
+              suffixTooltip: child.suffixTooltip,
               onClick: ({ $event }) => isBtn ? btnEvent($event, child) : tolEvent($event, child)
             })
             : createCommentVNode()
@@ -352,7 +357,11 @@ export default defineComponent({
                     round: item.round,
                     status: item.status,
                     content: item.name,
+                    title: item.title,
+                    routerLink: item.routerLink,
                     permissionCode: item.permissionCode,
+                    prefixTooltip: item.prefixTooltip,
+                    suffixTooltip: item.suffixTooltip,
                     destroyOnClose: item.destroyOnClose,
                     placement: item.placement,
                     transfer: item.transfer,
@@ -408,6 +417,11 @@ export default defineComponent({
                     round: item.round,
                     status: item.status,
                     content: item.name,
+                    title: item.title,
+                    routerLink: item.routerLink,
+                    permissionCode: item.permissionCode,
+                    prefixTooltip: item.prefixTooltip,
+                    suffixTooltip: item.suffixTooltip,
                     destroyOnClose: item.destroyOnClose,
                     placement: item.placement,
                     transfer: item.transfer,

package/packages/ui/index.ts

@@ -17,6 +17,7 @@ VxeUI.setConfig({
     animat: true,
     delayHover: 250,
     autoResize: true,
+    padding: true,
     minHeight: 144,
     // keepSource: false,
     // showOverflow: null,

package/styles/components/table.scss

@@ -130,6 +130,22 @@
     }
   }
 }
+.vxe-body--column {
+  &.col--height {
+    & > .vxe-cell {
+      height: 100%;
+      & > .vxe-textarea,
+      & > .vxe-default-textarea {
+        height: 100%;
+      }
+    }
+  }
+  .vxe-cell--label {
+    &.is--textarea {
+      white-space: pre-line;
+    }
+  }
+}
 
 .vxe-table--checkbox-range,
 .vxe-table--cell-main-area,
@@ -456,12 +472,12 @@
   //   vertical-align: middle;
   // }
   .vxe-cell--required-icon {
-    margin-right: 0.1em;
+    padding-right: 0.1em;
   }
   .vxe-cell--edit-icon,
   .vxe-cell-title-prefix-icon,
   .vxe-cell-title-suffix-icon {
-    margin-right: 0.2em;
+    padding: 0.2em;
   }
   .vxe-cell-title-prefix-icon,
   .vxe-cell-title-suffix-icon {
@@ -678,15 +694,25 @@
       }
     }
   }
+  &.is--padding {
+    .vxe-body--column {
+      &:not(.col--ellipsis) {
+        padding: var(--vxe-ui-table-column-padding-default);
+      }
+    }
+  }
+  .vxe-header--column,
+  .vxe-footer--column {
+    &:not(.col--ellipsis) {
+      padding: var(--vxe-ui-table-column-padding-default);
+    }
+  }
   .vxe-header--column,
   .vxe-body--column,
   .vxe-footer--column {
     position: relative;
     line-height: var(--vxe-ui-table-row-line-height);
     text-align: left;
-    &:not(.col--ellipsis) {
-      padding: var(--vxe-ui-table-column-padding-default);
-    }
     &.col--current {
       background-color: var(--vxe-ui-table-column-current-background-color);
       // .vxe-tree--btn-wrapper {
@@ -731,6 +757,27 @@
   .vxe-table--footer-wrapper {
     border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
   }
+  // &.border--default,
+  // &.border--full,
+  // &.border--inner,
+  // &.border--outer {
+  //   .vxe-body--row {
+  //     &:last-child {
+  //       & > .vxe-body--column {
+  //         & > .vxe-cell {
+  //           border-bottom: 1px solid transparent;
+  //         }
+  //       }
+  //     }
+  //   }
+  //   .vxe-body--column {
+  //     &:first-child {
+  //       & > .vxe-cell {
+  //         border-left: 1px solid transparent;
+  //       }
+  //     }
+  //   }
+  // }
   &.border--default,
   &.border--full,
   &.border--outer {
@@ -883,11 +930,16 @@
       }
     }
   }
+
+  &.is--padding {
+    .vxe-cell {
+      padding-left: var(--vxe-ui-table-cell-padding-left);
+      padding-right: var(--vxe-ui-table-cell-padding-right);
+    }
+  }
   .vxe-cell {
     white-space: pre-line;
     word-break: break-all;
-    padding-left: var(--vxe-ui-table-cell-padding-left);
-    padding-right: var(--vxe-ui-table-cell-padding-right);
   }
 
   // 单元格占位符
@@ -1146,6 +1198,7 @@
     }
   }
 
+
   /*溢出列*/
   .vxe-header--column,
   .vxe-body--column,
@@ -1159,8 +1212,10 @@
           white-space: nowrap;
         }
       }
-      & > .vxe-cell {
-        max-height: var(--vxe-ui-table-row-height-default);
+      &:not(.col--height) {
+        & > .vxe-cell {
+          max-height: var(--vxe-ui-table-row-height-default);
+        }
       }
     }
   }
@@ -1170,8 +1225,10 @@
     .vxe-footer--column {
       &.col--ellipsis {
         @extend %MediumColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-medium);
+        &:not(.col--height) {
+          & > .vxe-cell {
+            max-height: var(--vxe-ui-table-row-height-medium);
+          }
         }
       }
     }
@@ -1188,8 +1245,10 @@
     .vxe-footer--column {
       &.col--ellipsis {
         @extend %SmallColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-small);
+        &:not(.col--height) {
+          & > .vxe-cell {
+            max-height: var(--vxe-ui-table-row-height-small);
+          }
         }
       }
     }
@@ -1206,8 +1265,10 @@
     .vxe-footer--column {
       &.col--ellipsis {
         @extend %MiniColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-mini);
+        &:not(.col--height) {
+          & > .vxe-cell {
+            max-height: var(--vxe-ui-table-row-height-mini);
+          }
         }
       }
     }