vxe-table 3.7.7-beta.3 → 3.7.7-beta.4

package/packages/select/src/select.js

@@ -139,8 +139,9 @@ function checkOptionDisabled (_vm, isSelected, option, group) {
 }
 
 export function renderOption (h, _vm, list, group) {
-  const { isGroup, labelField, valueField, optionKey, value, multiple, currentValue, optionOpts } = _vm
+  const { $scopedSlots, isGroup, labelField, valueField, optionKey, value, multiple, currentValue, optionOpts } = _vm
   const { useKey } = optionOpts
+  const optionSlot = $scopedSlots.option
   return list.map((option, cIndex) => {
     const { slots } = option
     const optionValue = option[valueField]
@@ -149,6 +150,7 @@ export function renderOption (h, _vm, list, group) {
     const isDisabled = checkOptionDisabled(_vm, isSelected, option, group)
     const optid = getOptid(_vm, option)
     const defaultSlot = slots ? slots.default : null
+    const optParams = { option, group: null, $select: _vm }
     return isVisible ? h('div', {
       key: useKey || optionKey ? optid : cIndex,
       class: ['vxe-select-option', option.className, {
@@ -172,18 +174,20 @@ export function renderOption (h, _vm, list, group) {
           }
         }
       }
-    }, defaultSlot ? _vm.callSlot(defaultSlot, { option, $select: _vm }, h) : UtilTools.formatText(getFuncText(option[labelField]))) : null
+    }, optionSlot ? _vm.callSlot(optionSlot, optParams, h) : (defaultSlot ? _vm.callSlot(defaultSlot, optParams, h) : UtilTools.formatText(getFuncText(option[labelField])))) : null
   })
 }
 
 export function renderOptgroup (h, _vm) {
-  const { optionKey, visibleGroupList, groupLabelField, groupOptionsField, optionOpts } = _vm
+  const { $scopedSlots, optionKey, visibleGroupList, groupLabelField, groupOptionsField, optionOpts } = _vm
   const { useKey } = optionOpts
+  const optionSlot = $scopedSlots.option
   return visibleGroupList.map((group, gIndex) => {
     const { slots } = group
     const optid = getOptid(_vm, group)
     const isGroupDisabled = group.disabled
     const defaultSlot = slots ? slots.default : null
+    const optParams = { option: group, group, $select: _vm }
     return h('div', {
       key: useKey || optionKey ? optid : gIndex,
       class: ['vxe-optgroup', group.className, {
@@ -195,7 +199,7 @@ export function renderOptgroup (h, _vm) {
     }, [
       h('div', {
         class: 'vxe-optgroup--title'
-      }, defaultSlot ? _vm.callSlot(defaultSlot, { option: group, $select: _vm }, h) : getFuncText(group[groupLabelField])),
+      }, optionSlot ? _vm.callSlot(optionSlot, optParams, h) : (defaultSlot ? _vm.callSlot(defaultSlot, optParams, h) : getFuncText(group[groupLabelField]))),
       h('div', {
         class: 'vxe-optgroup--wrapper'
       }, renderOption(h, _vm, group[groupOptionsField], group))
@@ -413,7 +417,10 @@ export default {
   },
   render (h) {
     const { _e, $scopedSlots, vSize, className, popupClassName, inited, isActivated, loading, disabled, visiblePanel, filterable } = this
+    const defaultSlot = $scopedSlots.default
     const prefixSlot = $scopedSlots.prefix
+    const headerSlot = $scopedSlots.header
+    const footerSlot = $scopedSlots.footer
     return h('div', {
       class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: this }) : className) : '', {
         [`size--${vSize}`]: vSize,
@@ -427,7 +434,7 @@ export default {
       h('div', {
         class: 'vxe-select-slots',
         ref: 'hideOption'
-      }, this.$slots.default),
+      }, defaultSlot ? defaultSlot.call(this, {}) : []),
       h('vxe-input', {
         ref: 'input',
         props: {
@@ -448,7 +455,7 @@ export default {
           'suffix-click': this.togglePanelEvent
         },
         scopedSlots: prefixSlot ? {
-          prefix: () => prefixSlot({})
+          prefix: () => prefixSlot.call(this, {})
         } : {}
       }),
       h('div', {
@@ -465,11 +472,11 @@ export default {
         style: this.panelStyle
       }, inited ? [
         filterable ? h('div', {
-          class: 'vxe-select-filter--wrapper'
+          class: 'vxe-select--panel-search'
         }, [
           h('vxe-input', {
             ref: 'inpSearch',
-            class: 'vxe-select-filter--input',
+            class: 'vxe-select-search--input',
             props: {
               value: this.searchValue,
               type: 'text',
@@ -487,10 +494,24 @@ export default {
           })
         ]) : _e(),
         h('div', {
-          ref: 'optWrapper',
-          class: 'vxe-select-option--wrapper'
-        }, renderOpts(h, this))
-      ] : null)
+          class: 'vxe-select--panel-wrapper'
+        }, [
+          headerSlot ? h('div', {
+            class: 'vxe-select--panel-header'
+          }, headerSlot.call(this, {})) : _e(),
+          h('div', {
+            class: 'vxe-select--panel-body'
+          }, [
+            h('div', {
+              ref: 'optWrapper',
+              class: 'vxe-select-option--wrapper'
+            }, renderOpts(h, this))
+          ]),
+          footerSlot ? h('div', {
+            class: 'vxe-select--panel-footer'
+          }, footerSlot.call(this, {})) : _e()
+        ])
+      ] : [])
     ])
   },
   methods: {

package/packages/table/src/body.js

@@ -82,10 +82,10 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
     editRules,
     validOpts,
     editStore,
-    validStore,
     tooltipConfig,
     rowOpts,
-    columnOpts
+    columnOpts,
+    validErrorMaps
   } = $xetable
   const { type, cellRender, editRender, align, showOverflow, className, treeNode } = column
   const { actived } = editStore
@@ -108,7 +108,7 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
   let isDirty
   const tdOns = {}
   const cellAlign = align || allAlign
-  const hasValidError = validStore.row === row && validStore.column === column
+  const errorValidItem = validErrorMaps[`${rowid}:${column.id}`]
   const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline')
   const attrs = { colid: column.id }
   const bindMouseenter = tableListeners['cell-mouseenter']
@@ -244,17 +244,17 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
         }
       }, column.renderCell(h, params))
     )
-    if (showValidTip && hasValidError) {
+    if (showValidTip && errorValidItem) {
       tdVNs.push(
         h('div', {
-          class: 'vxe-cell--valid',
-          style: validStore.rule && validStore.rule.maxWidth ? {
-            width: `${validStore.rule.maxWidth}px`
+          class: 'vxe-cell--valid-error-hint',
+          style: errorValidItem.rule && errorValidItem.rule.maxWidth ? {
+            width: `${errorValidItem.rule.maxWidth}px`
           } : null
         }, [
           h('span', {
-            class: 'vxe-cell--valid-msg'
-          }, validStore.content)
+            class: 'vxe-cell--valid-error-msg'
+          }, errorValidItem.content)
         ])
       )
     }
@@ -272,8 +272,8 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
         'col--ellipsis': hasEllipsis,
         'fixed--hidden': fixedHiddenColumn,
         'col--dirty': isDirty,
-        'col--actived': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
-        'col--valid-error': hasValidError,
+        'col--active': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
+        'col--valid-error': !!errorValidItem,
         'col--current': currentColumn === column
       },
       UtilTools.getClass(compCellClassName, params),
@@ -310,7 +310,9 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
     expandColumn,
     hasFixedColumn,
     fullAllDataRowIdData,
-    rowOpts
+    rowOpts,
+    pendingRowList,
+    pendingRowMaps
   } = $xetable
   const childrenField = treeOpts.children || treeOpts.childrenField
   const rows = []
@@ -366,7 +368,8 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
             'is--expand-tree': isExpandTree,
             'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
             'row--radio': radioOpts.highlight && $xetable.selectRadioRow === row,
-            'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row)
+            'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row),
+            'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
           },
           rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
         ],
@@ -499,8 +502,10 @@ export default {
     elemStore[`${prefix}xSpace`] = $refs.xSpace
     elemStore[`${prefix}ySpace`] = $refs.ySpace
     elemStore[`${prefix}emptyBlock`] = $refs.emptyBlock
-    this.$el.onscroll = this.scrollEvent
-    this.$el._onscroll = this.scrollEvent
+    if (this.$el) {
+      this.$el.onscroll = this.scrollEvent
+      this.$el._onscroll = this.scrollEvent
+    }
   },
   beforeDestroy () {
     clearTimeout(this.wheelTime)

package/packages/table/src/methods.js

@@ -2389,7 +2389,7 @@ const Methods = {
    * 全局按下事件处理
    */
   handleGlobalMousedownEvent (evnt) {
-    const { $el, $refs, $xegrid, $toolbar, mouseConfig, editStore, ctxMenuStore, editOpts, filterStore, getRowNode } = this
+    const { $el, $refs, $xegrid, $toolbar, mouseConfig, editStore, ctxMenuStore, editRules, editOpts, validOpts, filterStore, getRowNode } = this
     const { actived } = editStore
     const { ctxWrapper, filterWrapper, validTip } = $refs
     if (filterWrapper) {
@@ -2466,8 +2466,13 @@ const Methods = {
     if (ctxMenuStore.visible && ctxWrapper && !getEventTargetNode(evnt, ctxWrapper.$el).flag) {
       this.closeMenu()
     }
+    const isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag
+    // 如果存在校验，点击了表格之外则清除
+    if (!isActivated && editRules && validOpts.autoClear) {
+      this.validErrorMaps = {}
+    }
     // 最后激活的表格
-    this.isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag
+    this.isActivated = isActivated
   },
   /**
    * 窗口失焦事件处理
@@ -3944,6 +3949,74 @@ const Methods = {
       this.emitEvent('sort-change', params, evnt)
     }
   },
+  setPendingRow (rows, status) {
+    const pendingMaps = { ...this.pendingRowMaps }
+    const pendingList = [...this.pendingRowList]
+    if (rows && !XEUtils.isArray(rows)) {
+      rows = [rows]
+    }
+    if (status) {
+      rows.forEach((row) => {
+        const rowid = getRowid(this, row)
+        if (rowid && !pendingMaps[rowid]) {
+          pendingList.push(row)
+          pendingMaps[rowid] = row
+        }
+      })
+    } else {
+      rows.forEach((row) => {
+        const rowid = getRowid(this, row)
+        if (rowid && pendingMaps[rowid]) {
+          const pendingIndex = this.findRowIndexOf(pendingList, row)
+          if (pendingIndex > -1) {
+            pendingList.splice(pendingIndex, 1)
+          }
+          delete pendingMaps[rowid]
+        }
+      })
+    }
+    this.pendingRowMaps = pendingMaps
+    this.pendingRowList = pendingList
+    return this.$nextTick()
+  },
+  togglePendingRow (rows) {
+    const pendingMaps = { ...this.pendingRowMaps }
+    const pendingList = [...this.pendingRowList]
+    if (rows && !XEUtils.isArray(rows)) {
+      rows = [rows]
+    }
+    rows.forEach((row) => {
+      const rowid = getRowid(this, row)
+      if (rowid) {
+        if (pendingMaps[rowid]) {
+          const pendingIndex = this.findRowIndexOf(pendingList, row)
+          if (pendingIndex > -1) {
+            pendingList.splice(pendingIndex, 1)
+          }
+          delete pendingMaps[rowid]
+        } else {
+          pendingList.push(row)
+          pendingMaps[rowid] = row
+        }
+      }
+    })
+    this.pendingRowMaps = pendingMaps
+    this.pendingRowList = pendingList
+    return this.$nextTick()
+  },
+  getPendingRecords () {
+    return this.pendingRowList.slice(0)
+  },
+  hasPendingByRow (row) {
+    const { pendingRowMaps } = this
+    const rowid = getRowid(this, row)
+    return !!pendingRowMaps[rowid]
+  },
+  clearPendingRow () {
+    this.pendingRowMaps = {}
+    this.pendingRowList = []
+    return this.$nextTick()
+  },
   sort (sortConfs, sortOrder) {
     const { sortOpts } = this
     const { multiple, remote, orders } = sortOpts
@@ -4126,7 +4199,7 @@ const Methods = {
     const { lazy } = expandOpts
     const rowid = getRowid(this, row)
     if (!lazy || !rowExpandLazyLoadedMaps[rowid]) {
-      const expanded = !this.isExpandByRow(row)
+      const expanded = !this.isRowExpandByRow(row)
       const columnIndex = this.getColumnIndex(column)
       const $columnIndex = this.getVMColumnIndex(column)
       this.setRowExpand(row, expanded)
@@ -4137,7 +4210,7 @@ const Methods = {
    * 切换展开行
    */
   toggleRowExpand (row) {
-    return this.setRowExpand(row, !this.isExpandByRow(row))
+    return this.setRowExpand(row, !this.isRowExpandByRow(row))
   },
   /**
    * 处理默认展开行
@@ -4263,11 +4336,18 @@ const Methods = {
    * 判断行是否为展开状态
    * @param {Row} row 行对象
    */
-  isExpandByRow (row) {
+  isRowExpandByRow (row) {
     const { rowExpandedMaps } = this
     const rowid = getRowid(this, row)
     return !!rowExpandedMaps[rowid]
   },
+  isExpandByRow (row) {
+    // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+    //   warnLog('vxe.error.delFunc', ['isExpandByRow', 'isRowExpandByRow'])
+    // }
+    // 即将废弃
+    return this.isRowExpandByRow(row)
+  },
   /**
    * 手动清空展开行状态，数据会恢复成未展开的状态
    */
@@ -4944,7 +5024,7 @@ const Methods = {
     return this.$nextTick()
   },
   /**
-   * 更新列状态
+   * 更新列状态 updateStatus({ row, column }, cellValue)
    * 如果组件值 v-model 发生 change 时，调用改函数用于更新某一列编辑状态
    * 如果单元格配置了校验规则，则会进行校验
    */
@@ -4952,25 +5032,28 @@ const Methods = {
     const customVal = !XEUtils.isUndefined(cellValue)
     return this.$nextTick().then(() => {
       const { $refs, editRules, validStore } = this
-      if (slotParams && $refs.tableBody && editRules) {
+      const tableBody = $refs.tableBody
+      if (slotParams && tableBody && editRules) {
         const { row, column } = slotParams
         const type = 'change'
-        if (this.hasCellRules(type, row, column)) {
-          const cell = this.getCell(row, column)
-          if (cell) {
-            return this.validCellRules(type, row, column, cellValue)
-              .then(() => {
-                if (customVal && validStore.visible) {
-                  setCellValue(row, column, cellValue)
-                }
-                this.clearValidate()
-              })
-              .catch(({ rule }) => {
-                if (customVal) {
-                  setCellValue(row, column, cellValue)
-                }
-                this.showValidTooltip({ rule, row, column, cell })
-              })
+        if (this.hasCellRules) {
+          if (this.hasCellRules(type, row, column)) {
+            const cell = this.getCell(row, column)
+            if (cell) {
+              return this.validCellRules(type, row, column, cellValue)
+                .then(() => {
+                  if (customVal && validStore.visible) {
+                    setCellValue(row, column, cellValue)
+                  }
+                  this.clearValidate(row, column)
+                })
+                .catch(({ rule }) => {
+                  if (customVal) {
+                    setCellValue(row, column, cellValue)
+                  }
+                  this.showValidTooltip({ rule, row, column, cell })
+                })
+            }
           }
         }
       }

package/packages/table/src/table.js

@@ -343,6 +343,10 @@ export default {
       upDataFlag: 0,
       // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
       reColumnFlag: 0,
+      // 已标记的对象集
+      pendingRowMaps: {},
+      // 已标记的行
+      pendingRowList: [],
       // 当前选中的筛选列
       filterStore: {
         isAllSelected: false,
@@ -413,13 +417,9 @@ export default {
       },
       // 存放数据校验相关信息
       validStore: {
-        visible: false,
-        row: null,
-        column: null,
-        content: '',
-        rule: null,
-        isArrow: false
+        visible: false
       },
+      validErrorMaps: {},
       // 导入相关信息
       importStore: {
         inited: false,
@@ -1044,6 +1044,7 @@ export default {
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
         [`vaild-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
+        'old-cell-valid': editRules && GlobalConfig.cellVaildMode === 'obsolete',
         'cell--highlight': highlightCell,
         'cell--selected': mouseConfig && mouseOpts.selected,
         'cell--area': mouseConfig && mouseOpts.area,
@@ -1227,7 +1228,9 @@ export default {
        */
       hasTip && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip') ? h('vxe-tooltip', {
         ref: 'validTip',
-        class: 'vxe-table--valid-error',
+        class: [{
+          'old-cell-valid': editRules && GlobalConfig.cellVaildMode === 'obsolete'
+        }, 'vxe-table--valid-error'],
         props: validOpts.message === 'tooltip' || tableData.length === 1 ? validTipOpts : null
       }) : _e()
     ])

package/packages/textarea/src/textarea.js

@@ -188,7 +188,7 @@ export default {
         autoTxtElem.className = ['vxe-textarea--autosize', size ? `size--${size}` : ''].join(' ')
         autoTxtElem.style.width = `${textElem.clientWidth}px`
         autoTxtElem.style.padding = textStyle.padding
-        autoTxtElem.innerHTML = ('' + (inputValue || '　')).replace(/\n$/, '\n　')
+        autoTxtElem.innerText = ('' + (inputValue || '　')).replace(/\n$/, '\n　')
       }
     },
     handleResize () {

package/packages/tooltip/src/tooltip.js

@@ -175,7 +175,7 @@ export default {
         'is--enterable': enterable,
         'is--visible': visible,
         'is--arrow': isArrow,
-        'is--actived': tipActive
+        'is--active': tipActive
       }],
       style: tipStore.style,
       ref: 'tipWrapper',

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

@@ -12,7 +12,7 @@ export default {
     showHeader: true,
     animat: true,
     delayHover: 250,
-    autoResize: false,
+    autoResize: true,
     minHeight: 144,
     // keepSource: false,
     // showOverflow: null,