vxe-table 3.5.9-beta.13 → 3.5.9-beta.16

package/packages/modal/src/modal.js

@@ -5,6 +5,7 @@ import UtilTools, { getFuncText } from '../../tools/utils'
 import DomTools from '../../tools/dom'
 import { GlobalEvent } from '../../tools/event'
 import { errLog } from '../../tools/log'
+import { getSlotVNs } from '../../tools/vn'
 import VxeLoading from '../../loading/index'
 
 export const allActivedModals = []
@@ -168,8 +169,8 @@ export default {
             'is--ellipsis': !isMsg && showTitleOverflow
           }],
           on: headerOns
-        }, headerSlot ? (!inited || (destroyOnClose && !visible) ? [] : headerSlot.call(this, { $modal: this }, h)) : [
-          titleSlot ? titleSlot.call(this, { $modal: this }, h) : h('span', {
+        }, headerSlot ? (!inited || (destroyOnClose && !visible) ? [] : getSlotVNs(headerSlot.call(this, { $modal: this }, h))) : [
+          titleSlot ? getSlotVNs(titleSlot.call(this, { $modal: this }, h)) : h('span', {
             class: 'vxe-modal--title'
           }, title ? getFuncText(title) : GlobalConfig.i18n('vxe.alert.title')),
           showZoom ? h('i', {
@@ -203,7 +204,7 @@ export default {
           ]) : null,
           h('div', {
             class: 'vxe-modal--content'
-          }, defaultSlot ? (!inited || (destroyOnClose && !visible) ? [] : defaultSlot.call(this, { $modal: this }, h)) : getFuncText(content)),
+          }, defaultSlot ? (!inited || (destroyOnClose && !visible) ? [] : getSlotVNs(defaultSlot.call(this, { $modal: this }, h))) : getFuncText(content)),
           /**
            * 加载中
            */
@@ -216,7 +217,7 @@ export default {
         ]),
         showFooter ? h('div', {
           class: 'vxe-modal--footer'
-        }, footerSlot ? (!inited || (destroyOnClose && !visible) ? [] : footerSlot.call(this, { $modal: this }, h)) : [
+        }, footerSlot ? (!inited || (destroyOnClose && !visible) ? [] : getSlotVNs(footerSlot.call(this, { $modal: this }, h))) : [
           type === 'confirm' ? h('vxe-button', {
             ref: 'cancelBtn',
             on: {

package/packages/select/src/select.js

@@ -5,6 +5,7 @@ import vSize from '../../mixins/size'
 import UtilTools, { getFuncText } from '../../tools/utils'
 import DomTools from '../../tools/dom'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
+import { getSlotVNs } from '../../tools/vn'
 
 function isOptionVisible (option) {
   return option.visible !== false
@@ -474,7 +475,7 @@ export default {
           slotFunc = $scopedSlots[slotFunc] || null
         }
         if (XEUtils.isFunction(slotFunc)) {
-          return slotFunc.call(this, params, h)
+          return getSlotVNs(slotFunc.call(this, params, h))
         }
       }
       return []

package/packages/table/src/cell.js

@@ -4,6 +4,7 @@ import VXETable from '../../v-x-e-table'
 import DomTools from '../../tools/dom'
 import UtilTools, { eqEmptyValue, isEnableConf, getFuncText } from '../../tools/utils'
 import { getColumnConfig } from './util'
+import { getSlotVNs } from '../../tools/vn'
 
 function renderHelpIcon (h, params) {
   const { $table, column } = params
@@ -78,7 +79,7 @@ function getFooterContent (h, params) {
   if (renderOpts) {
     const compConf = VXETable.renderer.get(renderOpts.name)
     if (compConf && compConf.renderFooter) {
-      return compConf.renderFooter.call($table, h, renderOpts, params)
+      return getSlotVNs(compConf.renderFooter.call($table, h, renderOpts, params))
     }
   }
   return [UtilTools.formatText(items[_columnIndex], 1)]
@@ -152,7 +153,7 @@ export const Cell = {
     if (renderOpts) {
       const compConf = VXETable.renderer.get(renderOpts.name)
       if (compConf && compConf.renderHeader) {
-        return renderTitleContent(h, params, compConf.renderHeader.call($table, h, renderOpts, params))
+        return getSlotVNs(renderTitleContent(h, params, compConf.renderHeader.call($table, h, renderOpts, params)))
       }
     }
     return renderTitleContent(h, params, UtilTools.formatText(column.getTitle(), 1))
@@ -171,7 +172,7 @@ export const Cell = {
       const funName = editRender ? 'renderCell' : 'renderDefault'
       const compConf = VXETable.renderer.get(renderOpts.name)
       if (compConf && compConf[funName]) {
-        return compConf[funName].call($table, h, renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params))
+        return getSlotVNs(compConf[funName].call($table, h, renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params)))
       }
     }
     const cellValue = $table.getCellLabel(row, column)
@@ -592,7 +593,7 @@ export const Cell = {
     if (contentRender) {
       const compConf = VXETable.renderer.get(contentRender.name)
       if (compConf && compConf.renderExpand) {
-        return compConf.renderExpand.call($table, h, contentRender, params)
+        return getSlotVNs(compConf.renderExpand.call($table, h, contentRender, params))
       }
     }
     return []
@@ -756,7 +757,10 @@ export const Cell = {
       if (slots && slots.edit) {
         return $table.callSlot(slots.edit, params, h)
       }
-      return compConf && compConf.renderEdit ? compConf.renderEdit.call($table, h, editRender, Object.assign({ $type: 'edit' }, params)) : []
+      if (compConf && compConf.renderEdit) {
+        return getSlotVNs(compConf.renderEdit.call($table, h, editRender, Object.assign({ $type: 'edit' }, params)))
+      }
+      return []
     }
     if (slots && slots.default) {
       return $table.callSlot(slots.default, params, h)

package/packages/table/src/methods.js

@@ -7,6 +7,7 @@ import UtilTools, { eqEmptyValue, isEnableConf, getFuncText } from '../../tools/
 import DomTools, { browse, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '../../tools/dom'
 import { formats } from '../../v-x-e-table/src/formats'
 import { warnLog, errLog } from '../../tools/log'
+import { getSlotVNs } from '../../tools/vn'
 
 const { setCellValue, hasChildrenList, getColumnList } = UtilTools
 const { calcHeight, hasClass, addClass, removeClass, getEventTargetNode, isNodeElement } = DomTools
@@ -245,7 +246,7 @@ const Methods = {
         return $xegrid.callSlot(slotFunc, params, h, vNodes)
       }
       if (XEUtils.isFunction(slotFunc)) {
-        return slotFunc.call(this, params, h, vNodes)
+        return getSlotVNs(slotFunc.call(this, params, h, vNodes))
       }
     }
     return []

package/packages/tools/vn.js

@@ -0,0 +1,8 @@
+import XEUtils from 'xe-utils'
+
+export function getSlotVNs (vns) {
+  if (XEUtils.isArray(vns)) {
+    return vns
+  }
+  return [vns]
+}

package/styles/header.scss

@@ -1,135 +1 @@
 /**Variable**/
-
-.vxe-table {
-  .vxe-table--header-wrapper {
-    color: $vxe-table-header-font-color;
-    .vxe-table--header-border-line {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      height: 0;
-      border-bottom: $vxe-table-border-width solid $vxe-table-border-color;
-    }
-  }
-  /*排序*/
-  .vxe-cell--sort {
-    width: 1.5em;
-    height: 1.35em;
-    vertical-align: middle;
-    text-align: center;
-    display: inline-block;
-    position: relative;
-  }
-  .vxe-sort--asc-btn,
-  .vxe-sort--desc-btn {
-    position: absolute;
-    left: 0.35em;
-    color: $vxe-table-column-icon-border-color;
-    width: 1em;
-    text-align: center;
-    cursor: pointer;
-    &:hover {
-      color: $vxe-table-font-color;
-    }
-    &.sort--active {
-      color: $vxe-primary-color;
-    }
-  }
-  .vxe-sort--asc-btn {
-    top: -0.15em;
-  }
-  .vxe-sort--desc-btn {
-    bottom: -0.15em;
-  }
-}
-
-.vxe-header--column {
-  position: relative;
-  font-weight: $vxe-table-header-font-weight;
-  // user-select: none;
-  &.col--ellipsis {
-    & > .vxe-cell {
-      display: flex;
-      align-items: center;
-      .vxe-cell--title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > i,
-      & > span {
-        &:not(.vxe-cell--title) {
-          flex-shrink: 0;
-        }
-      }
-    }
-  }
-  .vxe-cell--required-icon {
-    display: inline-block;
-    color: $vxe-table-validate-error-color;
-    width: 0.8em;
-    height: 1em;
-    line-height: 1em;
-    font-family: $vxe-icon-font-family;
-    font-weight: normal;
-    position: relative;
-    &:before {
-      content: "*";
-      position: absolute;
-      left: 0;
-      top: 0.2em;
-    }
-  }
-  // .vxe-cell--required-icon,
-  // .vxe-cell--edit-icon,
-  // .vxe-cell-help-icon,
-  // .vxe-cell--title {
-  //   vertical-align: middle;
-  // }
-  .vxe-cell--required-icon {
-    margin-right: 0.1em;
-  }
-  .vxe-cell--edit-icon,
-  .vxe-cell-help-icon {
-    margin-right: 0.2em;
-  }
-  .vxe-cell-help-icon {
-    cursor: help;
-  }
-  .vxe-resizable {
-    position: absolute;
-    right: -7px;
-    bottom: 0;
-    width: 14px;
-    height: 100%;
-    text-align: center;
-    z-index: 1;
-    cursor: col-resize;
-    &.is--line {
-      &:before,
-      &:after {
-        content: "";
-        display: inline-block;
-        vertical-align: middle;
-      }
-      &:before {
-        width: 1px;
-        height: 50%;
-        background-color: $vxe-table-resizable-line-color;
-      }
-      &:after {
-        width: 0;
-        height: 100%;
-      }
-    }
-  }
-}
-
-.vxe-table--fixed-right-wrapper {
-  .vxe-header--column {
-    .vxe-resizable {
-      right: auto;
-      left: -7px;
-    }
-  }
-}

package/styles/table.scss

@@ -311,6 +311,140 @@
   }
 }
 
+/*header*/
+.vxe-table {
+  .vxe-table--header-wrapper {
+    color: $vxe-table-header-font-color;
+    .vxe-table--header-border-line {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      height: 0;
+      border-bottom: $vxe-table-border-width solid $vxe-table-border-color;
+    }
+  }
+  /*排序*/
+  .vxe-cell--sort {
+    width: 1.5em;
+    height: 1.35em;
+    vertical-align: middle;
+    text-align: center;
+    display: inline-block;
+    position: relative;
+  }
+  .vxe-sort--asc-btn,
+  .vxe-sort--desc-btn {
+    position: absolute;
+    left: 0.35em;
+    color: $vxe-table-column-icon-border-color;
+    width: 1em;
+    text-align: center;
+    cursor: pointer;
+    &:hover {
+      color: $vxe-table-font-color;
+    }
+    &.sort--active {
+      color: $vxe-primary-color;
+    }
+  }
+  .vxe-sort--asc-btn {
+    top: -0.15em;
+  }
+  .vxe-sort--desc-btn {
+    bottom: -0.15em;
+  }
+}
+
+.vxe-header--column {
+  position: relative;
+  font-weight: $vxe-table-header-font-weight;
+  // user-select: none;
+  &.col--ellipsis {
+    & > .vxe-cell {
+      display: flex;
+      align-items: center;
+      .vxe-cell--title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > i,
+      & > span {
+        &:not(.vxe-cell--title) {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+  .vxe-cell--required-icon {
+    display: inline-block;
+    color: $vxe-table-validate-error-color;
+    width: 0.8em;
+    height: 1em;
+    line-height: 1em;
+    font-family: $vxe-icon-font-family;
+    font-weight: normal;
+    position: relative;
+    &:before {
+      content: "*";
+      position: absolute;
+      left: 0;
+      top: 0.2em;
+    }
+  }
+  // .vxe-cell--required-icon,
+  // .vxe-cell--edit-icon,
+  // .vxe-cell-help-icon,
+  // .vxe-cell--title {
+  //   vertical-align: middle;
+  // }
+  .vxe-cell--required-icon {
+    margin-right: 0.1em;
+  }
+  .vxe-cell--edit-icon,
+  .vxe-cell-help-icon {
+    margin-right: 0.2em;
+  }
+  .vxe-cell-help-icon {
+    cursor: help;
+  }
+  .vxe-resizable {
+    position: absolute;
+    right: -7px;
+    bottom: 0;
+    width: 14px;
+    height: 100%;
+    text-align: center;
+    z-index: 1;
+    cursor: col-resize;
+    &.is--line {
+      &:before,
+      &:after {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+      }
+      &:before {
+        width: 1px;
+        height: 50%;
+        background-color: $vxe-table-resizable-line-color;
+      }
+      &:after {
+        width: 0;
+        height: 100%;
+      }
+    }
+  }
+}
+.vxe-table--fixed-right-wrapper {
+  .vxe-header--column {
+    .vxe-resizable {
+      right: auto;
+      left: -7px;
+    }
+  }
+}
+
 /*table*/
 .vxe-table--render-default {
   position: relative;

package/styles/variable.scss

@@ -108,7 +108,7 @@ $vxe-table-menu-item-width: 178px !default;
 $vxe-table-menu-background-color: #fff !default;
 
 /*loading*/
-$vxe-loading-background-color: rgba(0, 0, 0, 0.2) !default;
+$vxe-loading-background-color: rgba(0, 0, 0, 0.3) !default;
 $vxe-loading-z-index: 999 !default;
 
 /*validate*/

package/types/column.d.ts

@@ -1,5 +1,5 @@
 import { CreateElement, VNode } from 'vue'
-import { VXETableComponent } from './component'
+import { VXETableComponent, SlotVNodeType } from './component'
 import { ColumnFilterOption, ColumnFilterParams, ColumnFilterRenderOptions, ColumnFilterSlotParams, ColumnFilterMethodParams } from './filter'
 import { ColumnCellRenderParams, ColumnDefaultSlotParams, ColumnIconSlotParams, ColumnContentSlotParams, RenderOptions, OptionProps, OptionGroupProps } from './v-x-e-table'
 import { ColumnHeaderSlotParams, ColumnHeaderRenderParams } from './header'
@@ -292,13 +292,13 @@ export interface ColumnOptions {
   params?: any;
 
   slots?: {
-    default?(params: ColumnDefaultSlotParams, h: CreateElement): VNode[] | string[];
-    header?(params: ColumnHeaderSlotParams, h: CreateElement): VNode[] | string[];
-    footer?(params: ColumnFooterSlotParams, h: CreateElement): VNode[] | string[];
-    content?(params: ColumnContentSlotParams, h: CreateElement): VNode[] | string[];
-    filter?(params: ColumnFilterSlotParams, h: CreateElement): VNode[] | string[];
-    edit?(params: ColumnEditSlotParams, h: CreateElement): VNode[] | string[];
-    icon?(params: ColumnIconSlotParams, h: CreateElement): VNode[] | string[];
+    default?(params: ColumnDefaultSlotParams, h: CreateElement): SlotVNodeType | SlotVNodeType[]
+    header?(params: ColumnHeaderSlotParams, h: CreateElement): SlotVNodeType | SlotVNodeType[]
+    footer?(params: ColumnFooterSlotParams, h: CreateElement): SlotVNodeType | SlotVNodeType[]
+    content?(params: ColumnContentSlotParams, h: CreateElement): SlotVNodeType | SlotVNodeType[]
+    filter?(params: ColumnFilterSlotParams, h: CreateElement): SlotVNodeType | SlotVNodeType[]
+    edit?(params: ColumnEditSlotParams, h: CreateElement): SlotVNodeType | SlotVNodeType[]
+    icon?(params: ColumnIconSlotParams, h: CreateElement): SlotVNodeType | SlotVNodeType[]
   };
 }
 

package/types/component.d.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue, { VNode } from 'vue'
 
 declare type SizeType = null | '' | 'medium' | 'small' | 'mini'
 
@@ -22,3 +22,5 @@ export interface RecordInfo {
 export interface RowInfo {
   [key: string]: any;
 }
+
+export type SlotVNodeType = VNode | string | number