vxe-table 3.5.9-beta.9 → 3.5.9

package/packages/form/src/form-item.js

@@ -2,8 +2,9 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VXETable from '../../v-x-e-table'
 import { isEnableConf, getFuncText } from '../../tools/utils'
-import { createItem, destroyItem, assemItem } from './util'
+import { createItem, destroyItem, assemItem, isActivetem } from './util'
 import { renderTitle } from './render'
+import { getSlotVNs } from '../../tools/vn'
 
 const props = {
   title: String,
@@ -41,15 +42,14 @@ Object.keys(props).forEach(name => {
 })
 
 const renderItem = (h, _vm, item, slots) => {
-  const { rules, data, collapseAll, validOpts, titleOverflow: allTitleOverflow } = _vm
-  const { title, folding, visible, visibleMethod, field, collapseNode, itemRender, showError, errRule, className, titleOverflow } = item
+  const { _e, rules, data, collapseAll, validOpts, titleOverflow: allTitleOverflow } = _vm
+  const { title, folding, visible, field, collapseNode, itemRender, showError, errRule, className, titleOverflow } = item
   const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
   const itemClassName = compConf ? compConf.itemClassName : ''
   const span = item.span || _vm.span
   const align = item.align || _vm.align
   const titleAlign = item.titleAlign || _vm.titleAlign
   const titleWidth = item.titleWidth || _vm.titleWidth
-  let itemVisibleMethod = visibleMethod
   const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
   const showEllipsis = itemOverflow === 'ellipsis'
   const showTitle = itemOverflow === 'title'
@@ -57,8 +57,8 @@ const renderItem = (h, _vm, item, slots) => {
   const hasEllipsis = showTitle || showTooltip || showEllipsis
   const params = { data, field, property: field, item, $form: _vm }
   let isRequired
-  if (!itemVisibleMethod && compConf && compConf.itemVisibleMethod) {
-    itemVisibleMethod = compConf.itemVisibleMethod
+  if (visible === false) {
+    return _e()
   }
   if (rules) {
     const itemRules = rules[field]
@@ -70,9 +70,9 @@ const renderItem = (h, _vm, item, slots) => {
   if (slots && slots.default) {
     contentVNs = _vm.callSlot(slots.default, params, h)
   } else if (compConf && compConf.renderItemContent) {
-    contentVNs = compConf.renderItemContent.call(_vm, h, itemRender, params)
+    contentVNs = getSlotVNs(compConf.renderItemContent.call(_vm, h, itemRender, params))
   } else if (compConf && compConf.renderItem) {
-    contentVNs = compConf.renderItem.call(_vm, h, itemRender, params)
+    contentVNs = getSlotVNs(compConf.renderItem.call(_vm, h, itemRender, params))
   } else if (field) {
     contentVNs = [`${XEUtils.get(data, field)}`]
   }
@@ -88,12 +88,12 @@ const renderItem = (h, _vm, item, slots) => {
       item.id,
       span ? `vxe-col--${span} is--span` : '',
       className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
-      itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : className) : '',
+      itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : itemClassName) : '',
       {
         'is--title': title,
         'is--required': isRequired,
-        'is--hidden': visible === false || (folding && collapseAll),
-        'is--active': !itemVisibleMethod || itemVisibleMethod(params),
+        'is--hidden': folding && collapseAll,
+        'is--active': isActivetem(_vm, item),
         'is--error': showError
       }
     ]
@@ -156,9 +156,7 @@ export default {
   provide () {
     return {
       $xeformitem: this,
-      $xeformiteminfo: {
-        itemConfig: this.itemConfig
-      }
+      $xeformiteminfo: this
     }
   },
   data () {

package/packages/form/src/form.js

@@ -4,10 +4,11 @@ import vSize from '../../mixins/size'
 import VXETable from '../../v-x-e-table'
 import { isEnableConf, eqEmptyValue, getFuncText } from '../../tools/utils'
 import DomTools, { browse } from '../../tools/dom'
-import { createItem, handleFieldOrItem } from './util'
+import { createItem, handleFieldOrItem, isHiddenItem, isActivetem } from './util'
 import { errLog } from '../../tools/log'
 import VxeFormConfigItem from './form-config-item'
 import VxeLoading from '../../loading/index'
+import { getSlotVNs } from '../../tools/vn'
 
 class Rule {
   constructor (rule) {
@@ -79,6 +80,7 @@ export default {
     titleAsterisk: { type: Boolean, default: () => GlobalConfig.form.titleAsterisk },
     titleOverflow: { type: [Boolean, String], default: null },
     className: [String, Function],
+    readonly: Boolean,
     items: Array,
     rules: Object,
     preventSubmit: { type: Boolean, default: () => GlobalConfig.form.preventSubmit },
@@ -193,7 +195,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 []
@@ -357,7 +359,7 @@ export default {
       if (data && formRules) {
         itemList.forEach(item => {
           const { field } = item
-          if (field) {
+          if (field && !isHiddenItem(this, item) && isActivetem(this, item)) {
             itemValids.push(
               this.validItemRules(type || 'all', field).then(() => {
                 item.errRule = null
@@ -506,7 +508,7 @@ export default {
     },
     triggerItemEvent (evnt, field, itemValue) {
       if (field) {
-        return this.validItemRules(evnt ? evnt.type : 'all', field, itemValue)
+        return this.validItemRules(evnt ? (['blur'].includes(evnt.type) ? 'blur' : 'change') : 'all', field, itemValue)
           .then(() => {
             this.clearValidate(field)
           })

package/packages/form/src/util.js

@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils'
 import VXETable from '../../v-x-e-table'
 import { warnLog } from '../../tools/log'
+import { isEnableConf } from '../../tools/utils'
 
 class ItemConfig {
   constructor ($xeform, item) {
@@ -58,6 +59,28 @@ export const handleFieldOrItem = ($xeform, fieldOrItem) => {
   return null
 }
 
+export function isHiddenItem ($xeform, formItem) {
+  const { collapseAll } = $xeform
+  const { folding, visible } = formItem
+  return visible === false || (folding && collapseAll)
+}
+
+export function isActivetem ($xeform, formItem) {
+  let { visibleMethod, itemRender, visible, field } = formItem
+  if (visible === false) {
+    return visible
+  }
+  const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
+  if (!visibleMethod && compConf && compConf.itemVisibleMethod) {
+    visibleMethod = compConf.itemVisibleMethod
+  }
+  if (!visibleMethod) {
+    return true
+  }
+  const { data } = $xeform
+  return visibleMethod({ data, field, property: field, item: formItem, $form: $xeform })
+}
+
 export function createItem ($xeform, _vm) {
   return getItemConfig($xeform, _vm)
 }

package/packages/grid/src/grid.js

@@ -7,6 +7,7 @@ import UtilTools, { isEnableConf } from '../../tools/utils'
 import DomTools, { getOffsetHeight, getPaddingTopBottomSize } from '../../tools/dom'
 import { GlobalEvent } from '../../tools/event'
 import { warnLog, errLog } from '../../tools/log'
+import { getSlotVNs } from '../../tools/vn'
 
 const methods = {}
 const propKeys = Object.keys(Table.props)
@@ -372,7 +373,7 @@ export default {
           slotFunc = $scopedSlots[slotFunc] || null
         }
         if (XEUtils.isFunction(slotFunc)) {
-          return slotFunc.call(this, params, h, vNodes)
+          return getSlotVNs(slotFunc.call(this, params, h, vNodes))
         }
       }
       return []

package/packages/header/src/header.js

@@ -272,7 +272,8 @@ export default {
       document.onmouseup = function (evnt) {
         document.onmousemove = domMousemove
         document.onmouseup = domMouseup
-        column.resizeWidth = column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)
+        const resizeWidth = column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)
+        column.resizeWidth = resizeWidth
         resizeBarElem.style.display = 'none'
         $xetable._isResize = false
         $xetable._lastResizeTime = Date.now()
@@ -280,7 +281,7 @@ export default {
         $xetable.recalculate(true).then(() => {
           $xetable.saveCustomResizable()
           $xetable.updateCellAreas()
-          $xetable.emitEvent('resizable-change', params, evnt)
+          $xetable.emitEvent('resizable-change', { ...params, resizeWidth }, evnt)
         })
         DomTools.removeClass($xetable.$el, 'drag--resize')
       }

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 []
@@ -2227,7 +2228,7 @@ const Methods = {
                     // 如果点击了当前表格之外
                     !getEventTargetNode(evnt, $el).flag
                 ) {
-                  setTimeout(() => this.clearActived(evnt))
+                  setTimeout(() => this.clearEdit(evnt))
                 }
               })
             }
@@ -2288,7 +2289,7 @@ const Methods = {
             // 如果是激活编辑状态，则取消编辑
             if (actived.row) {
               const params = actived.args
-              this.clearActived(evnt)
+              this.clearEdit(evnt)
               // 如果配置了选中功能，则为选中状态
               if (mouseConfig && mouseOpts.selected) {
                 this.$nextTick(() => this.handleSelected(params, evnt))
@@ -2377,7 +2378,7 @@ const Methods = {
             // 如果是激活编辑状态，则取消编辑
             if (actived.row) {
               params = actived.args
-              this.clearActived(evnt)
+              this.clearEdit(evnt)
               // 如果配置了选中功能，则为选中状态
               if (mouseConfig && mouseOpts.selected) {
                 this.$nextTick(() => this.handleSelected(params, evnt))
@@ -4645,6 +4646,18 @@ const Methods = {
     }
     return cellLabel
   },
+  findRowIndexOf (list, row) {
+    return row ? XEUtils.findIndexOf(list, item => this.eqRow(item, row)) : -1
+  },
+  eqRow (row1, row2) {
+    if (row1 && row2) {
+      if (row1 === row2) {
+        return true
+      }
+      return getRowid(this, row1) === getRowid(this, row2)
+    }
+    return false
+  },
   /*************************
    * Publish methods
    *************************/

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/packages/v-x-e-table/src/store.js

@@ -19,13 +19,17 @@ class Store {
   }
 
   add (name, render) {
+    const conf = this.store[name]
     // 检测是否覆盖
     if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-      if (!XEUtils.eqNull(this.store[name]) && this.store[name] !== render) {
-        warnLog('vxe.error.coverProp', [this._name, name])
-      }
+      const confKeys = XEUtils.keys(conf)
+      XEUtils.each(render, (item, key) => {
+        if (confKeys.includes(key)) {
+          warnLog('vxe.error.coverProp', [name, key])
+        }
+      })
     }
-    this.store[name] = render
+    this.store[name] = conf ? XEUtils.merge(conf, render) : render
     return Store
   }
 

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*/