vxe-table 3.3.11 → 3.3.14-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.3.11",
+  "version": "3.3.14-beta.0",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -35,12 +35,12 @@
     "@vue/cli-service": "~4.4.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "ant-design-vue": "^1.7.5",
+    "ant-design-vue": "^1.7.8",
     "codemirror": "^5.53.2",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
     "del": "^5.1.0",
-    "element-ui": "^2.15.2",
+    "element-ui": "^2.15.6",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
@@ -68,7 +68,7 @@
     "sass-loader": "^8.0.2",
     "sortablejs": "^1.10.2",
     "typescript": "~3.9.3",
-    "view-design": "^4.4.0",
+    "view-design": "^4.6.1",
     "vue": "^2.6.14",
     "vue-class-component": "^7.2.3",
     "vue-i18n": "^8.18.1",
@@ -88,7 +88,7 @@
     "vxe-table-plugin-virtual-tree": "0.6.10",
     "xe-ajax": "^4.0.5",
     "xe-clipboard": "^1.10.1",
-    "xe-utils": "^3.3.1",
+    "xe-utils": "^3.3.4",
     "xlsx": "^0.17.0"
   },
   "peerDependencies": {

package/packages/form/src/form.js

@@ -95,9 +95,10 @@ function renderTitle (h, _vm, item) {
   const { slots, field, itemRender, titlePrefix, titleSuffix } = item
   const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
   const params = { data, property: field, item, $form: _vm }
-  const tss = []
+  const contVNs = []
+  const titVNs = []
   if (titlePrefix) {
-    tss.push(
+    titVNs.push(
       titlePrefix.message
         ? h('vxe-tooltip', {
           props: {
@@ -111,13 +112,19 @@ function renderTitle (h, _vm, item) {
         : renderPrefixIcon(h, titlePrefix)
     )
   }
-  tss.push(
+  titVNs.push(
     h('span', {
       class: 'vxe-form--item-title-label'
     }, compConf && compConf.renderItemTitle ? compConf.renderItemTitle(itemRender, params) : (slots && slots.title ? callSlot(_vm, slots.title, params, h) : UtilTools.getFuncText(item.title)))
   )
+  contVNs.push(
+    h('div', {
+      class: 'vxe-form--item-title-content'
+    }, titVNs)
+  )
+  const fixVNs = []
   if (titleSuffix) {
-    tss.push(
+    fixVNs.push(
       titleSuffix.message
         ? h('vxe-tooltip', {
           props: {
@@ -131,7 +138,12 @@ function renderTitle (h, _vm, item) {
         : renderSuffixIcon(h, titleSuffix)
     )
   }
-  return tss
+  contVNs.push(
+    h('div', {
+      class: 'vxe-form--item-title-postfix'
+    }, fixVNs)
+  )
+  return contVNs
 }
 
 function renderItems (h, _vm, itemList) {
@@ -386,7 +398,7 @@ export default {
     submitEvent (evnt) {
       evnt.preventDefault()
       if (!this.preventSubmit) {
-        this.beginValidate().then(() => {
+        this.beginValidate(this.getItems()).then(() => {
           this.$emit('submit', { data: this.data, $form: this, $event: evnt })
         }).catch(errMap => {
           this.$emit('submit-invalid', { data: this.data, errMap, $form: this, $event: evnt })
@@ -443,7 +455,7 @@ export default {
       const { item } = params
       const { tooltipStore } = this
       const $tooltip = this.$refs.tooltip
-      const overflowElem = evnt.currentTarget
+      const overflowElem = evnt.currentTarget.children[0]
       const content = (overflowElem.textContent || '').trim()
       const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth
       clearTimeout(this.tooltipTimeout)
@@ -488,14 +500,16 @@ export default {
       return this.$nextTick()
     },
     validate (callback) {
-      return this.beginValidate('', callback)
+      return this.beginValidate(this.getItems(), '', callback)
     },
-    beginValidate (type, callback) {
+    validateField (field, callback) {
+      return this.beginValidate(this.getItems().filter(item => item.field === field), '', callback)
+    },
+    beginValidate (itemList, type, callback) {
       const { data, rules: formRules, validOpts } = this
       const validRest = {}
       const validFields = []
       const itemValids = []
-      const itemList = this.getItems()
       this.clearValidate()
       clearTimeout(this.showErrTime)
       if (data && formRules) {

package/packages/grid/src/grid.js

@@ -428,9 +428,19 @@ export default {
       if (proxyConfig) {
         if (isEnableConf(formConfig) && proxyOpts.form && formOpts.items) {
           const formData = {}
-          formOpts.items.forEach(({ field, itemRender }) => {
+          formOpts.items.forEach(item => {
+            const { field, itemRender } = item
             if (field) {
-              formData[field] = itemRender && !XEUtils.isUndefined(itemRender.defaultValue) ? itemRender.defaultValue : undefined
+              let itemValue = null
+              if (itemRender) {
+                const { defaultValue } = itemRender
+                if (XEUtils.isFunction(defaultValue)) {
+                  itemValue = defaultValue({ item })
+                } else if (!XEUtils.isUndefined(defaultValue)) {
+                  itemValue = defaultValue
+                }
+              }
+              formData[field] = itemValue
             }
           })
           this.formData = formData

package/packages/modal/src/modal.js

@@ -44,6 +44,7 @@ export default {
     zIndex: Number,
     marginSize: { type: [Number, String], default: () => GlobalConfig.modal.marginSize },
     fullscreen: Boolean,
+    draggable: { type: Boolean, default: () => GlobalConfig.modal.draggable },
     remember: { type: Boolean, default: () => GlobalConfig.modal.remember },
     destroyOnClose: { type: Boolean, default: () => GlobalConfig.modal.destroyOnClose },
     showTitleOverflow: { type: Boolean, default: () => GlobalConfig.modal.showTitleOverflow },
@@ -115,14 +116,15 @@ export default {
     }
   },
   render (h) {
-    const { _e, $scopedSlots, slots = {}, inited, vSize, className, type, resize, showClose, showZoom, animat, loading, status, iconStatus, showFooter, zoomLocat, modalTop, dblclickZoom, contentVisible, visible, title, lockScroll, lockView, mask, isMsg, showTitleOverflow, destroyOnClose } = this
+    const { _e, $scopedSlots, slots = {}, inited, vSize, className, type, resize, showClose, showZoom, animat, draggable, loading, status, iconStatus, showFooter, zoomLocat, modalTop, dblclickZoom, contentVisible, visible, title, lockScroll, lockView, mask, isMsg, showTitleOverflow, destroyOnClose } = this
     const content = this.content || this.message
     const defaultSlot = $scopedSlots.default || slots.default
     const footerSlot = $scopedSlots.footer || slots.footer
     const headerSlot = $scopedSlots.header || slots.header
     const titleSlot = $scopedSlots.title || slots.title
-    const headerOns = {
-      mousedown: this.mousedownEvent
+    const headerOns = {}
+    if (draggable) {
+      headerOns.mousedown = this.mousedownEvent
     }
     if (showZoom && dblclickZoom && type === 'modal') {
       headerOns.dblclick = this.toggleZoomEvent
@@ -157,7 +159,10 @@ export default {
         ref: 'modalBox'
       }, [
         this.showHeader ? h('div', {
-          class: ['vxe-modal--header', !isMsg && showTitleOverflow ? 'is--ellipsis' : ''],
+          class: ['vxe-modal--header', {
+            'is--drag': draggable,
+            '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', {

package/packages/select/src/util.js

@@ -30,7 +30,7 @@ export function createOption ($xeselect, _vm) {
 
 export function destroyOption (_vm) {
   const { $xeselect, optionConfig } = _vm
-  const matchObj = XEUtils.findTree($xeselect.collectOption, option => option === optionConfig)
+  const matchObj = XEUtils.findTree($xeselect.collectOption, option => option === optionConfig, { children: 'options' })
   if (matchObj) {
     matchObj.items.splice(matchObj.index, 1)
   }
@@ -39,8 +39,9 @@ export function destroyOption (_vm) {
 export function assemOption (_vm) {
   const { $el, $xeselect, $xeoptgroup, optionConfig } = _vm
   const groupConfig = $xeoptgroup ? $xeoptgroup.optionConfig : null
-  optionConfig.slots = _vm.$scopedSlots
   if (groupConfig) {
+    // 子选项才允许自定义插槽
+    optionConfig.slots = _vm.$slots
     if (!groupConfig.options) {
       groupConfig.options = []
     }

package/packages/table/src/methods.js

@@ -456,8 +456,7 @@ const Methods = {
    */
   loadColumn (columns) {
     const collectColumn = XEUtils.mapTree(columns, column => Cell.createColumn(this, column), { children: 'children' })
-    this.handleColumn(collectColumn)
-    return this.$nextTick()
+    return this.handleColumn(collectColumn)
   },
   /**
    * 加载列配置并恢复到初始状态
@@ -488,10 +487,11 @@ const Methods = {
         UtilTools.warn('vxe.error.scrollErrProp', ['column.type=expand'])
       }
     }
-    this.$nextTick(() => {
+    return this.$nextTick().then(() => {
       if (this.$toolbar) {
         this.$toolbar.syncUpdate({ collectColumn, $table: this })
       }
+      return this.recalculate()
     })
   },
   /**
@@ -775,13 +775,23 @@ const Methods = {
   defineField (record) {
     const { radioOpts, checkboxOpts, treeConfig, treeOpts, expandOpts } = this
     const rowkey = getRowkey(this)
-    this.visibleColumn.forEach(({ property, editRender }) => {
+    this.tableFullColumn.forEach(column => {
+      const { property, editRender } = column
       if (property && !XEUtils.has(record, property)) {
-        XEUtils.set(record, property, editRender && !XEUtils.isUndefined(editRender.defaultValue) ? editRender.defaultValue : null)
+        let cellValue = null
+        if (editRender) {
+          const { defaultValue } = editRender
+          if (XEUtils.isFunction(defaultValue)) {
+            cellValue = defaultValue({ column })
+          } else if (!XEUtils.isUndefined(defaultValue)) {
+            cellValue = defaultValue
+          }
+        }
+        XEUtils.set(record, property, cellValue)
       }
     })
-    const ohterFields = [radioOpts.labelField, checkboxOpts.checkField, checkboxOpts.labelField, expandOpts.labelField]
-    ohterFields.forEach((key) => {
+    const otherFields = [radioOpts.labelField, checkboxOpts.checkField, checkboxOpts.labelField, expandOpts.labelField]
+    otherFields.forEach((key) => {
       if (key && eqEmptyValue(XEUtils.get(record, key))) {
         XEUtils.set(record, key, null)
       }
@@ -3351,9 +3361,9 @@ const Methods = {
       clearAllSort(this)
     }
     if (!sortOpts.remote) {
-      return this.handleTableData(true)
+      this.handleTableData(true)
     }
-    return this.$nextTick()
+    return this.$nextTick().then(this.updateStyle)
   },
   // 在 v3 中废弃
   getSortColumn () {

package/packages/v-x-e-table/src/conf.js

@@ -308,6 +308,7 @@ export default {
     showTitleOverflow: true,
     animat: true,
     showClose: true,
+    draggable: true,
     // storage: false,
     storageKey: 'VXE_MODAL_POSITION'
   },

package/styles/form.scss

@@ -11,22 +11,12 @@
   font-family: $vxe-font-family;
   background-color: $vxe-form-background-color;
   text-align: left;
-  &.is--colon {
-    .vxe-form--item-title {
-      &:after {
-        content: ":";
-        font-size: 1.2em;
-        font-family: SimSun, sans-serif;
-      }
-    }
-  }
 }
 
 .vxe-form-slots {
   display: none;
 }
 
-.vxe-form--item-title,
 .vxe-form--item-content,
 .vxe-form--item-trigger-node {
   display: inline-block;
@@ -34,25 +24,45 @@
 }
 
 .vxe-form--item-title {
+  display: flex;
+  flex-direction: row;
   max-width: 320px;
   padding-right: 0.8em;
   &.is--ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    .vxe-form--item-title-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .vxe-form--item-title-prefix,
+  .vxe-form--item-title-suffix,
+  .vxe-form--item-title-postfix {
+    flex-shrink: 0;
   }
   .vxe-form--item-title-prefix,
   .vxe-form--item-title-suffix {
     cursor: help;
-    & > [class*="vxe-icon--"] {
-      margin-top: -0.2em;
+    vertical-align: middle;
+    & > i {
+      vertical-align: middle;
     }
   }
   .vxe-form--item-title-prefix {
     margin-right: 0.25em;
   }
   .vxe-form--item-title-suffix {
-    margin-left: 0.25em;
+    margin-left: 0.2em;
+  }
+  .vxe-form--item-title-postfix {
+    display: flex;
+    align-items: center;
+  }
+  .vxe-form--item-title-content {
+    flex-grow: 1;
+  }
+  .vxe-form--item-title-label {
+    vertical-align: middle;
   }
 }
 
@@ -99,18 +109,28 @@
   &.is--asterisk {
     .vxe-form--item {
       &.is--required {
-        .vxe-form--item-title {
+        .vxe-form--item-title-content {
           &:before {
             content: "*";
             color: $vxe-form-validate-error-color;
+            font-family: Verdana,Arial,Tahoma;
             margin-right: 0.2em;
-            font-family: $vxe-icon-font-family;
             font-weight: normal;
+            vertical-align: middle;
           }
         }
       }
     }
   }
+  &.is--colon {
+    .vxe-form--item-title-postfix {
+      &:after {
+        content: ":";
+        font-weight: normal;
+        margin-left: 0.2em;
+      }
+    }
+  }
 }
 
 .vxe-form--item {

package/styles/input.scss

@@ -88,7 +88,7 @@ $iconWidth: 1.6em;
   }
   &.is--prefix {
     .vxe-input--inner {
-      padding-left: #{$iconWidth + 0.2em};
+      padding-left: $iconWidth + 0.2em;
     }
   }
 }
@@ -104,7 +104,7 @@ $iconWidth: 1.6em;
   }
   &.is--suffix {
     .vxe-input--inner {
-      padding-right: #{$iconWidth + 0.2em};
+      padding-right: $iconWidth + 0.2em;
     }
   }
   &.is--left {
@@ -136,7 +136,7 @@ $iconWidth: 1.6em;
     &.type--year,
     &.type--time {
       .vxe-input--inner {
-        padding-right: #{$iconWidth + 0.2em};
+        padding-right: $iconWidth + 0.2em;
       }
       .vxe-input--suffix {
         right: $iconWidth;
@@ -158,7 +158,7 @@ $iconWidth: 1.6em;
       &.type--year,
       &.type--time {
         .vxe-input--inner {
-          padding-right: #{$iconWidth * 2};
+          padding-right: $iconWidth * 2;
         }
       }
     }

package/styles/modal.scss

@@ -141,9 +141,6 @@
       left: 50%;
       top: 0;
       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-      .vxe-modal--header {
-        cursor: move;
-      }
     }
     .vxe-modal--body {
       overflow: auto;
@@ -249,6 +246,9 @@
     background-color: $vxe-modal-header-background-color;
     border-radius: $vxe-border-radius $vxe-border-radius 0 0;
     user-select: none;
+    &.is--drag {
+      cursor: move;
+    }
     &.is--ellipsis {
       overflow: hidden;
       text-overflow: ellipsis;

package/styles/select.scss

@@ -129,6 +129,7 @@
 .vxe-select--empty-placeholder {
   padding: 0 10px;
   text-align: center;
+  color: $vxe-select-empty-color;
 }
 
 .vxe-select,

package/styles/tooltip.scss

@@ -7,7 +7,7 @@
   top: -100%;
   left: -100%;
   font-size: 12px;
-  max-width: 400px;
+  max-width: 500px;
   border-radius: $vxe-border-radius;
   padding: 8px 12px;
   white-space: normal;

package/styles/variable.scss

@@ -233,6 +233,7 @@ $vxe-select-option-height-small: 26px;
 $vxe-select-option-height-mini: 24px;
 $vxe-select-option-hover-background-color: #f5f7fa;
 $vxe-select-panel-background-color: #fff;
+$vxe-select-empty-color: #C0C4CC;
 $vxe-optgroup-title-color:#909399;
 
 /*switch*/

package/types/form.d.ts

@@ -29,6 +29,11 @@ export declare class Form extends VXETableComponent {
    * @param callback 回调函数
    */
   validate(callback?: (errMap?: FormValidErrMapParams) => void): Promise<any>;
+  /**
+   * 对表单执行项进行校验，参数为一个回调函数。该回调函数会在校验结束后被调用 callback(errMap)。若不传入回调函数，则会返回一个 promise
+   * @param callback 回调函数
+   */
+   validateField(callback?: (errMap?: FormValidErrMapParams) => void): Promise<any>;
   /**
    * 手动清除校验状态，如果指定 field 则清除指定的项，否则清除整个表单
    * @param field 字段名