vxe-table 4.7.81 → 4.7.83

package/packages/grid/src/grid.ts

@@ -1257,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
@@ -1276,6 +1291,7 @@ export default defineComponent({
           $xeGrid.loadColumn(columns)
         }
         initToolbar()
+        initProxy()
       })
       globalEvents.on($xeGrid, 'keydown', handleGlobalKeydownEvent)
     })
@@ -1284,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/module/edit/hook.ts

@@ -768,24 +768,28 @@ hooks.add('tableEditModule', {
       handleFocus (params) {
         const { row, column, cell } = params
         const { editRender } = column
+        const editOpts = computeEditOpts.value
         if (isEnableConf(editRender)) {
           const compRender = renderer.get(editRender.name)
           let autoFocus = editRender.autofocus || editRender.autoFocus
           let autoSelect = editRender.autoSelect || editRender.autoselect
           let inputElem
-          if (!autoFocus && compRender) {
-            autoFocus = compRender.tableAutoFocus || compRender.tableAutofocus || compRender.autofocus
-          }
-          if (!autoSelect && compRender) {
-            autoSelect = compRender.tableAutoSelect || compRender.autoselect
-          }
-          // 如果指定了聚焦 class
-          if (XEUtils.isFunction(autoFocus)) {
-            inputElem = autoFocus(params)
-          } else if (autoFocus) {
-            inputElem = cell.querySelector(autoFocus)
-            if (inputElem) {
-              inputElem.focus()
+          // 是否启用聚焦
+          if (editOpts.autoFocus) {
+            if (!autoFocus && compRender) {
+              autoFocus = compRender.tableAutoFocus || compRender.tableAutofocus || compRender.autofocus
+            }
+            if (!autoSelect && compRender) {
+              autoSelect = compRender.tableAutoSelect || compRender.autoselect
+            }
+            // 如果指定了聚焦 class
+            if (XEUtils.isFunction(autoFocus)) {
+              inputElem = autoFocus(params)
+            } else if (autoFocus) {
+              inputElem = cell.querySelector(autoFocus)
+              if (inputElem) {
+                inputElem.focus()
+              }
             }
           }
           if (inputElem) {
@@ -800,8 +804,13 @@ hooks.add('tableEditModule', {
               }
             }
           } else {
-            // 显示到可视区中
-            $xeTable.scrollToRow(row, column)
+            // 是否自动定位
+            if (editOpts.autoPos) {
+              if (!column.fixed) {
+                // 显示到可视区中
+                $xeTable.scrollToRow(row, column)
+              }
+            }
           }
         }
       },

package/packages/table/render/index.ts

@@ -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', {
@@ -638,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

@@ -7045,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,8 +310,11 @@ export default defineComponent({
               round: child.round,
               status: child.status,
               content: child.name,
-              routerLink: item.routerLink,
-              permissionCode: item.permissionCode,
+              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()
@@ -354,8 +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,
@@ -411,8 +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,
@@ -108,7 +109,8 @@ VxeUI.setConfig({
     editConfig: {
       // mode: 'cell',
       showIcon: true,
-      showAsterisk: true
+      showAsterisk: true,
+      autoFocus: true
     },
     importConfig: {
       _typeMaps: {

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,
@@ -512,12 +528,12 @@
   font-family: var(--vxe-ui-font-family);
   direction: ltr;
   .vxe-table--body-wrapper {
-    table {
+    & > table {
       background-color: var(--vxe-ui-layout-background-color);
     }
   }
   .vxe-table--footer-wrapper {
-    table {
+    & > table {
       background-color: var(--vxe-ui-table-footer-background-color);
     }
   }
@@ -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);
+          }
         }
       }
     }