vxe-table 3.5.9-beta.8 → 3.6.0-beta.0

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 []
@@ -1124,9 +1125,9 @@ const Methods = {
     } else {
       const { selection } = this
       if (treeConfig) {
-        rowList = XEUtils.filterTree(currTableData, row => selection.indexOf(row) > -1, { children: transform ? mapChildren : children })
+        rowList = XEUtils.filterTree(currTableData, row => this.findRowIndexOf(selection, row) > -1, { children: transform ? mapChildren : children })
       } else {
-        rowList = currTableData.filter(row => selection.indexOf(row) > -1)
+        rowList = currTableData.filter(row => this.findRowIndexOf(selection, row) > -1)
       }
     }
     return rowList
@@ -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))
@@ -2726,7 +2727,7 @@ const Methods = {
   getCheckboxIndeterminateRecords (isFull) {
     const { treeConfig, treeIndeterminates, afterFullData } = this
     if (treeConfig) {
-      return isFull ? treeIndeterminates.slice(0) : treeIndeterminates.filter(row => afterFullData.indexOf(row))
+      return isFull ? treeIndeterminates.slice(0) : treeIndeterminates.filter(row => this.findRowIndexOf(afterFullData, row) > -1)
     }
     return []
   },
@@ -2761,14 +2762,16 @@ const Methods = {
     return this.$nextTick()
   },
   isCheckedByCheckboxRow (row) {
+    const { selection } = this
     const { checkField } = this.checkboxOpts
     if (checkField) {
       return XEUtils.get(row, checkField)
     }
-    return this.selection.indexOf(row) > -1
+    return this.findRowIndexOf(selection, row) > -1
   },
   isIndeterminateByCheckboxRow (row) {
-    return this.treeIndeterminates.indexOf(row) > -1 && !this.isCheckedByCheckboxRow(row)
+    const { treeIndeterminates } = this
+    return this.findRowIndexOf(treeIndeterminates, row) > -1 && !this.isCheckedByCheckboxRow(row)
   },
   /**
    * 多选，行选中事件
@@ -2780,31 +2783,31 @@ const Methods = {
     if (checkField) {
       if (treeConfig && !checkStrictly) {
         if (value === -1) {
-          if (treeIndeterminates.indexOf(row) === -1) {
+          if (this.findRowIndexOf(treeIndeterminates, row) === -1) {
             treeIndeterminates.push(row)
           }
           XEUtils.set(row, checkField, false)
         } else {
           // 更新子节点状态
           XEUtils.eachTree([row], (item) => {
-            if (row === item || (!checkMethod || checkMethod({ row: item }))) {
+            if (this.eqRow(item, row) || (!checkMethod || checkMethod({ row: item }))) {
               XEUtils.set(item, checkField, value)
-              XEUtils.remove(treeIndeterminates, half => half === item)
+              XEUtils.remove(treeIndeterminates, half => this.eqRow(half, item))
               this.handleCheckboxReserveRow(row, value)
             }
           }, treeOpts)
         }
         // 如果存在父节点，更新父节点状态
-        const matchObj = XEUtils.findTree(afterFullData, item => item === row, treeOpts)
+        const matchObj = XEUtils.findTree(afterFullData, item => this.eqRow(item, row), treeOpts)
         if (matchObj && matchObj.parent) {
           let parentStatus
           const vItems = checkMethod ? matchObj.items.filter((item) => checkMethod({ row: item })) : matchObj.items
-          const indeterminatesItem = XEUtils.find(matchObj.items, item => treeIndeterminates.indexOf(item) > -1)
+          const indeterminatesItem = XEUtils.find(matchObj.items, item => this.findRowIndexOf(treeIndeterminates, item) > -1)
           if (indeterminatesItem) {
             parentStatus = -1
           } else {
             const selectItems = matchObj.items.filter(item => XEUtils.get(item, checkField))
-            parentStatus = selectItems.filter(item => vItems.indexOf(item) > -1).length === vItems.length ? true : (selectItems.length || value === -1 ? -1 : false)
+            parentStatus = selectItems.filter(item => this.findRowIndexOf(vItems, item) > -1).length === vItems.length ? true : (selectItems.length || value === -1 ? -1 : false)
           }
           return this.handleSelectRow({ row: matchObj.parent }, parentStatus)
         }
@@ -2817,46 +2820,46 @@ const Methods = {
     } else {
       if (treeConfig && !checkStrictly) {
         if (value === -1) {
-          if (treeIndeterminates.indexOf(row) === -1) {
+          if (this.findRowIndexOf(treeIndeterminates, row) === -1) {
             treeIndeterminates.push(row)
           }
-          XEUtils.remove(selection, item => item === row)
+          XEUtils.remove(selection, item => this.eqRow(item, row))
         } else {
           // 更新子节点状态
           XEUtils.eachTree([row], (item) => {
-            if (row === item || (!checkMethod || checkMethod({ row: item }))) {
+            if (this.eqRow(item, row) || (!checkMethod || checkMethod({ row: item }))) {
               if (value) {
                 selection.push(item)
               } else {
-                XEUtils.remove(selection, select => select === item)
+                XEUtils.remove(selection, select => this.eqRow(select, item))
               }
-              XEUtils.remove(treeIndeterminates, half => half === item)
+              XEUtils.remove(treeIndeterminates, half => this.eqRow(half, item))
               this.handleCheckboxReserveRow(row, value)
             }
           }, treeOpts)
         }
         // 如果存在父节点，更新父节点状态
-        const matchObj = XEUtils.findTree(afterFullData, item => item === row, treeOpts)
+        const matchObj = XEUtils.findTree(afterFullData, item => this.eqRow(item, row), treeOpts)
         if (matchObj && matchObj.parent) {
           let parentStatus
           const vItems = checkMethod ? matchObj.items.filter((item) => checkMethod({ row: item })) : matchObj.items
-          const indeterminatesItem = XEUtils.find(matchObj.items, item => treeIndeterminates.indexOf(item) > -1)
+          const indeterminatesItem = XEUtils.find(matchObj.items, item => this.findRowIndexOf(treeIndeterminates, item) > -1)
           if (indeterminatesItem) {
             parentStatus = -1
           } else {
-            const selectItems = matchObj.items.filter(item => selection.indexOf(item) > -1)
-            parentStatus = selectItems.filter(item => vItems.indexOf(item) > -1).length === vItems.length ? true : (selectItems.length || value === -1 ? -1 : false)
+            const selectItems = matchObj.items.filter(item => this.findRowIndexOf(selection, item) > -1)
+            parentStatus = selectItems.filter(item => this.findRowIndexOf(vItems, item) > -1).length === vItems.length ? true : (selectItems.length || value === -1 ? -1 : false)
           }
           return this.handleSelectRow({ row: matchObj.parent }, parentStatus)
         }
       } else {
         if (!checkMethod || checkMethod({ row })) {
           if (value) {
-            if (selection.indexOf(row) === -1) {
+            if (this.findRowIndexOf(selection, row) === -1) {
               selection.push(row)
             }
           } else {
-            XEUtils.remove(selection, item => item === row)
+            XEUtils.remove(selection, item => this.eqRow(item, row))
           }
           this.handleCheckboxReserveRow(row, value)
         }
@@ -2868,7 +2871,7 @@ const Methods = {
     const { selection, checkboxOpts } = this
     const { checkField } = checkboxOpts
     const { row } = params
-    const value = checkField ? !XEUtils.get(row, checkField) : selection.indexOf(row) === -1
+    const value = checkField ? !XEUtils.get(row, checkField) : this.findRowIndexOf(selection, row) === -1
     if (evnt) {
       this.triggerCheckRowEvent(evnt, params, value)
     } else {
@@ -2879,7 +2882,12 @@ const Methods = {
     const { checkMethod } = this.checkboxOpts
     if (!checkMethod || checkMethod({ row: params.row })) {
       this.handleSelectRow(params, value)
-      this.emitEvent('checkbox-change', Object.assign({ records: this.getCheckboxRecords(), reserves: this.getCheckboxReserveRecords(), indeterminates: this.getCheckboxIndeterminateRecords(), checked: value }, params), evnt)
+      this.emitEvent('checkbox-change', Object.assign({
+        records: this.getCheckboxRecords(),
+        reserves: this.getCheckboxReserveRecords(),
+        indeterminates: this.getCheckboxIndeterminateRecords(),
+        checked: value
+      }, params), evnt)
     }
   },
   /**
@@ -2897,7 +2905,7 @@ const Methods = {
     const { afterFullData, treeConfig, treeOpts, selection, checkboxReserveRowMap, checkboxOpts } = this
     const { checkField, reserve, checkStrictly, checkMethod } = checkboxOpts
     let selectRows = []
-    const beforeSelection = treeConfig ? [] : selection.filter(row => afterFullData.indexOf(row) === -1)
+    const beforeSelection = treeConfig ? [] : selection.filter(row => this.findRowIndexOf(afterFullData, row) === -1)
     if (checkStrictly) {
       this.isAllSelected = value
     } else {
@@ -2944,7 +2952,7 @@ const Methods = {
              */
             if (checkMethod) {
               XEUtils.eachTree(afterFullData, (row) => {
-                if (checkMethod({ row }) ? 0 : selection.indexOf(row) > -1) {
+                if (checkMethod({ row }) ? 0 : this.findRowIndexOf(selection, row) > -1) {
                   selectRows.push(row)
                 }
               }, treeOpts)
@@ -2958,7 +2966,7 @@ const Methods = {
              * 如果不存在选中方法，则添加所有数据到临时集合中
              */
             if (checkMethod) {
-              selectRows = afterFullData.filter((row) => selection.indexOf(row) > -1 || checkMethod({ row }))
+              selectRows = afterFullData.filter((row) => this.findRowIndexOf(selection, row) > -1 || checkMethod({ row }))
             } else {
               selectRows = afterFullData.slice(0)
             }
@@ -2969,7 +2977,7 @@ const Methods = {
              * 如果不存在选中方法，无需处理，临时集合默认为空
              */
             if (checkMethod) {
-              selectRows = afterFullData.filter((row) => checkMethod({ row }) ? 0 : selection.indexOf(row) > -1)
+              selectRows = afterFullData.filter((row) => checkMethod({ row }) ? 0 : this.findRowIndexOf(selection, row) > -1)
             }
           }
         }
@@ -3016,9 +3024,9 @@ const Methods = {
         isAllSelected = isAllResolve && afterFullData.length !== disableRows.length
         if (treeConfig) {
           if (halfField) {
-            isIndeterminate = !isAllSelected && afterFullData.some(row => XEUtils.get(row, checkField) || XEUtils.get(row, halfField) || treeIndeterminates.indexOf(row) > -1)
+            isIndeterminate = !isAllSelected && afterFullData.some(row => XEUtils.get(row, checkField) || XEUtils.get(row, halfField) || this.findRowIndexOf(treeIndeterminates, row) > -1)
           } else {
-            isIndeterminate = !isAllSelected && afterFullData.some(row => XEUtils.get(row, checkField) || treeIndeterminates.indexOf(row) > -1)
+            isIndeterminate = !isAllSelected && afterFullData.some(row => XEUtils.get(row, checkField) || this.findRowIndexOf(treeIndeterminates, row) > -1)
           }
         } else {
           if (halfField) {
@@ -3035,19 +3043,19 @@ const Methods = {
                 disableRows.push(row)
                 return true
               }
-              if (selection.indexOf(row) > -1) {
+              if (this.findRowIndexOf(selection, row) > -1) {
                 checkRows.push(row)
                 return true
               }
               return false
             }
-            : row => selection.indexOf(row) > -1
+            : row => this.findRowIndexOf(selection, row) > -1
         )
         isAllSelected = isAllResolve && afterFullData.length !== disableRows.length
         if (treeConfig) {
-          isIndeterminate = !isAllSelected && afterFullData.some(row => treeIndeterminates.indexOf(row) > -1 || selection.indexOf(row) > -1)
+          isIndeterminate = !isAllSelected && afterFullData.some(row => this.findRowIndexOf(treeIndeterminates, row) > -1 || this.findRowIndexOf(selection, row) > -1)
         } else {
-          isIndeterminate = !isAllSelected && afterFullData.some(row => selection.indexOf(row) > -1)
+          isIndeterminate = !isAllSelected && afterFullData.some(row => this.findRowIndexOf(selection, row) > -1)
         }
       }
       this.isAllSelected = isAllSelected
@@ -3694,7 +3702,7 @@ const Methods = {
     const rest = fullAllDataRowMap.get(row)
     if (lazy && rest) {
       rest.expandLoaded = false
-      XEUtils.remove(expandLazyLoadeds, item => row === item)
+      XEUtils.remove(expandLazyLoadeds, item => this.eqRow(item, row))
     }
     return this.$nextTick()
   },
@@ -3705,7 +3713,7 @@ const Methods = {
   reloadRowExpand (row) {
     const { expandOpts, expandLazyLoadeds } = this
     const { lazy } = expandOpts
-    if (lazy && expandLazyLoadeds.indexOf(row) === -1) {
+    if (lazy && this.findRowIndexOf(expandLazyLoadeds, row) === -1) {
       this.clearRowExpandLoaded(row)
         .then(() => this.handleAsyncRowExpand(row))
     }
@@ -3725,7 +3733,7 @@ const Methods = {
     const { expandOpts, expandLazyLoadeds, expandColumn: column } = this
     const { row } = params
     const { lazy } = expandOpts
-    if (!lazy || expandLazyLoadeds.indexOf(row) === -1) {
+    if (!lazy || this.findRowIndexOf(expandLazyLoadeds, row) === -1) {
       const expanded = !this.isExpandByRow(row)
       const columnIndex = this.getColumnIndex(column)
       const $columnIndex = this.getVMColumnIndex(column)
@@ -3774,7 +3782,7 @@ const Methods = {
       }).catch(() => {
         rest.expandLoaded = false
       }).finally(() => {
-        XEUtils.remove(this.expandLazyLoadeds, item => item === row)
+        XEUtils.remove(this.expandLazyLoadeds, item => this.eqRow(item, row))
         resolve(this.$nextTick().then(this.recalculate))
       })
     })
@@ -3805,9 +3813,9 @@ const Methods = {
       const validRows = toggleMethod ? rows.filter(row => toggleMethod({ expanded, column, columnIndex, $columnIndex, row, rowIndex: this.getRowIndex(row), $rowIndex: this.getVMRowIndex(row) })) : rows
       if (expanded) {
         validRows.forEach(row => {
-          if (rowExpandeds.indexOf(row) === -1) {
+          if (this.findRowIndexOf(rowExpandeds, row) === -1) {
             const rest = fullAllDataRowMap.get(row)
-            const isLoad = lazy && !rest.expandLoaded && expandLazyLoadeds.indexOf(row) === -1
+            const isLoad = lazy && !rest.expandLoaded && this.findRowIndexOf(expandLazyLoadeds, row) === -1
             if (isLoad) {
               lazyRests.push(this.handleAsyncRowExpand(row))
             } else {
@@ -3816,7 +3824,7 @@ const Methods = {
           }
         })
       } else {
-        XEUtils.remove(rowExpandeds, row => validRows.indexOf(row) > -1)
+        XEUtils.remove(rowExpandeds, row => this.findRowIndexOf(validRows, row) > -1)
       }
       if (reserve) {
         validRows.forEach(row => this.handleRowExpandReserve(row, expanded))
@@ -3830,7 +3838,8 @@ const Methods = {
    * @param {Row} row 行对象
    */
   isExpandByRow (row) {
-    return this.rowExpandeds.indexOf(row) > -1
+    const { rowExpandeds } = this
+    return this.findRowIndexOf(rowExpandeds, row) > -1
   },
   /**
    * 手动清空展开行状态，数据会恢复成未展开的状态
@@ -4645,6 +4654,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*/