vxe-table 3.19.22 → 3.19.25

package/packages/toolbar/src/toolbar.ts

@@ -472,52 +472,72 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { buttons } = props
       const { connectTable } = internalData
       const $table = connectTable
+      const buttonsSlot = slots.buttons
       const buttonPrefixSlot = slots.buttonPrefix || slots['button-prefix']
       const buttonSuffixSlot = slots.buttonSuffix || slots['button-suffix']
-      const btnVNs: VxeComponentSlotType[] = []
+      const lbVNs: VxeComponentSlotType[] = []
       if (buttonPrefixSlot) {
-        btnVNs.push(...getSlotVNs(buttonPrefixSlot.call($xeToolbar, { buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
-      }
-      if (buttons) {
-        buttons.forEach((item) => {
-          const { dropdowns, buttonRender } = item
-          if (item.visible !== false) {
-            const compConf = buttonRender ? renderer.get(buttonRender.name) : null
-            if (buttonRender && compConf && compConf.renderToolbarButton) {
-              const toolbarButtonClassName = compConf.toolbarButtonClassName
-              const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, button: item }
-              btnVNs.push(
-                h('span', {
-                  class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
-                }, getSlotVNs(compConf.renderToolbarButton(h, buttonRender, params)))
-              )
-            } else {
-              if (VxeUIButtonComponent) {
+        lbVNs.push(
+          h('span', {
+            key: 'tbp',
+            class: 'vxe-button--prefix-wrapper'
+          }, getSlotVNs(buttonPrefixSlot.call($xeToolbar, { buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        )
+      }
+      if (buttons || buttonsSlot) {
+        const btnVNs: VxeComponentSlotType[] = []
+        if (buttons) {
+          buttons.forEach((item) => {
+            const { dropdowns, buttonRender } = item
+            if (item.visible !== false) {
+              const compConf = buttonRender ? renderer.get(buttonRender.name) : null
+              if (buttonRender && compConf && compConf.renderToolbarButton) {
+                const toolbarButtonClassName = compConf.toolbarButtonClassName
+                const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, button: item }
                 btnVNs.push(
-                  h(VxeUIButtonComponent, {
-                    props: Object.assign({}, item, {
-                      content: item.content || item.name,
-                      options: undefined
-                    }),
-                    on: {
-                      click: (eventParams: VxeButtonDefines.ClickEventParams) => $xeToolbar.btnEvent(eventParams, item)
-                    },
-                    scopedSlots: dropdowns && dropdowns.length
-                      ? {
-                          dropdowns: () => $xeToolbar.renderDropdowns(h, item, true)
-                        }
-                      : {}
-                  })
+                  h('span', {
+                    class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
+                  }, getSlotVNs(compConf.renderToolbarButton(h, buttonRender, params)))
                 )
+              } else {
+                if (VxeUIButtonComponent) {
+                  btnVNs.push(
+                    h(VxeUIButtonComponent, {
+                      props: Object.assign({}, item, {
+                        content: item.content || item.name,
+                        options: undefined
+                      }),
+                      on: {
+                        click: (eventParams: VxeButtonDefines.ClickEventParams) => $xeToolbar.btnEvent(eventParams, item)
+                      },
+                      scopedSlots: dropdowns && dropdowns.length
+                        ? {
+                            dropdowns: () => $xeToolbar.renderDropdowns(h, item, true)
+                          }
+                        : {}
+                    })
+                  )
+                }
               }
             }
-          }
-        })
+          })
+        }
+        lbVNs.push(
+          h('span', {
+            key: 'tti',
+            class: 'vxe-button--item-wrapper'
+          }, buttonsSlot ? getSlotVNs(buttonsSlot.call($xeToolbar, { buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : btnVNs)
+        )
       }
       if (buttonSuffixSlot) {
-        btnVNs.push(...getSlotVNs(buttonSuffixSlot.call($xeToolbar, { buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        lbVNs.push(
+          h('span', {
+            key: 'tbs',
+            class: 'vxe-button--suffix-wrapper'
+          }, getSlotVNs(buttonSuffixSlot.call($xeToolbar, { buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        )
       }
-      return btnVNs
+      return lbVNs
     },
     /**
      * 渲染右侧工具
@@ -536,55 +556,75 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { tools } = props
       const { connectTable } = internalData
       const $table = connectTable
+      const toolsSlot = slots.tools
       const toolPrefixSlot = slots.toolPrefix || slots['tool-prefix']
       const toolSuffixSlot = slots.toolSuffix || slots['tool-suffix']
-      const btnVNs: VxeComponentSlotType[] = []
+      const rtVNs: VxeComponentSlotType[] = []
       if (toolPrefixSlot) {
-        btnVNs.push(...getSlotVNs(toolPrefixSlot.call($xeToolbar, { tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
-      }
-      if (tools) {
-        tools.forEach((item, tIndex) => {
-          const { dropdowns, toolRender } = item
-          if (item.visible !== false) {
-            const rdName = toolRender ? toolRender.name : null
-            const compConf = toolRender ? renderer.get(rdName) : null
-            if (toolRender && compConf && compConf.renderToolbarTool) {
-              const toolbarToolClassName = compConf.toolbarToolClassName
-              const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, tool: item }
-              btnVNs.push(
-                h('span', {
-                  key: rdName as string,
-                  class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
-                }, getSlotVNs(compConf.renderToolbarTool(h, toolRender, params)))
-              )
-            } else {
-              if (VxeUIButtonComponent) {
+        rtVNs.push(
+          h('span', {
+            key: 'ttp',
+            class: 'vxe-tool--prefix-wrapper'
+          }, getSlotVNs(toolPrefixSlot.call($xeToolbar, { tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        )
+      }
+      if (tools || toolsSlot) {
+        const btnVNs: VxeComponentSlotType[] = []
+        if (tools) {
+          tools.forEach((item, tIndex) => {
+            const { dropdowns, toolRender } = item
+            if (item.visible !== false) {
+              const rdName = toolRender ? toolRender.name : null
+              const compConf = toolRender ? renderer.get(rdName) : null
+              if (toolRender && compConf && compConf.renderToolbarTool) {
+                const toolbarToolClassName = compConf.toolbarToolClassName
+                const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, tool: item }
                 btnVNs.push(
-                  h(VxeUIButtonComponent, {
-                    key: tIndex,
-                    props: Object.assign({}, item, {
-                      content: item.content || item.name,
-                      options: undefined
-                    }),
-                    on: {
-                      click: (eventParams: VxeButtonDefines.ClickEventParams) => $xeToolbar.tolEvent(eventParams, item)
-                    },
-                    scopedSlots: dropdowns && dropdowns.length
-                      ? {
-                          dropdowns: () => $xeToolbar.renderDropdowns(h, item, false)
-                        }
-                      : {}
-                  })
+                  h('span', {
+                    key: rdName as string,
+                    class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
+                  }, getSlotVNs(compConf.renderToolbarTool(h, toolRender, params)))
                 )
+              } else {
+                if (VxeUIButtonComponent) {
+                  btnVNs.push(
+                    h(VxeUIButtonComponent, {
+                      key: tIndex,
+                      props: Object.assign({}, item, {
+                        content: item.content || item.name,
+                        options: undefined
+                      }),
+                      on: {
+                        click: (eventParams: VxeButtonDefines.ClickEventParams) => $xeToolbar.tolEvent(eventParams, item)
+                      },
+                      scopedSlots: dropdowns && dropdowns.length
+                        ? {
+                            dropdowns: () => $xeToolbar.renderDropdowns(h, item, false)
+                          }
+                        : {}
+                    })
+                  )
+                }
               }
             }
-          }
-        })
+          })
+        }
+        rtVNs.push(
+          h('span', {
+            key: 'tti',
+            class: 'vxe-tool--item-wrapper'
+          }, toolsSlot ? getSlotVNs(toolsSlot.call($xeToolbar, { tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : btnVNs)
+        )
       }
       if (toolSuffixSlot) {
-        btnVNs.push(...getSlotVNs(toolSuffixSlot.call($xeToolbar, { tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        rtVNs.push(
+          h('span', {
+            key: 'tts',
+            class: 'vxe-tool--suffix-wrapper'
+          }, getSlotVNs(toolSuffixSlot.call($xeToolbar, { tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        )
       }
-      return btnVNs
+      return rtVNs
     },
     renderToolImport  (h: CreateElement) {
       // 使用已安装的组件，如果未安装则不渲染
@@ -734,17 +774,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
     renderVN  (h: CreateElement): VNode {
       const $xeToolbar = this
       const props = $xeToolbar
-      const slots = $xeToolbar.$scopedSlots
-      const internalData = $xeToolbar.internalData
       const $xeGrid = $xeToolbar.$xeGrid
       const $xeGantt = $xeToolbar.$xeGantt
       const $xeGGWrapper = $xeGrid || $xeGantt
 
       const { perfect, loading, refresh, zoom, custom, className } = props
-      const { connectTable } = internalData
-      const $table = connectTable
-      const toolsSlot = slots.tools
-      const buttonsSlot = slots.buttons
       const vSize = $xeToolbar.computeSize
       return h('div', {
         ref: 'refElem',
@@ -756,10 +790,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }, [
         h('div', {
           class: 'vxe-buttons--wrapper'
-        }, buttonsSlot ? buttonsSlot({ $grid: $xeGrid, $gantt: $xeGantt, $table: $table }) : $xeToolbar.renderLeftBtns(h)),
+        }, $xeToolbar.renderLeftBtns(h)),
         h('div', {
           class: 'vxe-tools--wrapper'
-        }, toolsSlot ? toolsSlot({ $grid: $xeGrid, $gantt: $xeGantt, $table: $table }) : $xeToolbar.renderRightTools(h)),
+        }, $xeToolbar.renderRightTools(h)),
         h('div', {
           class: 'vxe-tools--operate'
         }, [

package/styles/components/toolbar.scss

@@ -68,10 +68,6 @@
     display: flex;
     align-items: center;
   }
-  .vxe-buttons--wrapper,
-  .vxe-tools--wrapper {
-    flex-wrap: wrap;
-  }
   .vxe-tools--operate {
     flex-shrink: 0;
   }
@@ -84,6 +80,17 @@
       }
     }
   }
+  .vxe-button--item-wrapper,
+  .vxe-tool--item-wrapper,
+  .vxe-button--prefix-wrapper,
+  .vxe-button--suffix-wrapper,
+  .vxe-tool--prefix-wrapper,
+  .vxe-tool--suffix-wrapper {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+  }
 }
 
 .vxe-toolbar {