vxe-table 3.8.21 → 3.8.23

package/lib/vxe-table-edit-module/style/style.css

@@ -2,6 +2,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/

package/lib/vxe-table-export-module/style/style.css

@@ -2,6 +2,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/

package/lib/vxe-table-filter-module/style/style.css

@@ -3,6 +3,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/

package/lib/vxe-table-keyboard-module/style/style.css

@@ -2,6 +2,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/

package/lib/vxe-table-menu-module/style/style.css

@@ -3,6 +3,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/
@@ -51,46 +52,29 @@
 }
 
 .vxe-context-menu--link {
-  display: block;
-  padding: 0 2.5em;
-  width: 178px;
+  display: flex;
+  flex-direction: row;
+  width: 198px;
   line-height: 26px;
+  padding: 0 0.8em;
   color: #606266;
   cursor: pointer;
 }
 .vxe-context-menu--link .vxe-context-menu--link-prefix,
 .vxe-context-menu--link .vxe-context-menu--link-suffix {
-  position: absolute;
-  top: 5px;
-  margin-right: 5px;
-  font-size: 16px;
-}
-.vxe-context-menu--link .vxe-context-menu--link-prefix {
-  left: 5px;
-}
-.vxe-context-menu--link .vxe-context-menu--link-suffix {
-  right: 5px;
-}
-.vxe-context-menu--link .vxe-context-menu--link-suffix.suffix--haschild {
-  top: 8px;
-}
-.vxe-context-menu--link .vxe-context-menu--link-suffix.suffix--haschild:before {
-  position: absolute;
-  content: "";
-  border: 4px solid transparent;
-  border-left-color: #727272;
+  min-width: 2em;
+  flex-shrink: 0;
+  text-align: center;
+  padding: 0 0.2em;
 }
 .vxe-context-menu--link .vxe-context-menu--link-content {
-  display: block;
+  flex-grow: 1;
+  padding: 0 0.2em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.vxe-table--context-menu-clild-wrapper .vxe-context-menu--link {
-  padding: 0 2em 0 2.5em;
-}
-
 .vxe-context-menu--option-wrapper,
 .vxe-table--context-menu-clild-wrapper {
   margin: 0;

package/lib/vxe-table-menu-module/style/style.min.css

@@ -1 +1 @@
-@charset "UTF-8";.vxe-table--context-menu-wrapper{display:none}.vxe-table--context-menu-wrapper.is--visible{display:block}.vxe-table--context-menu-clild-wrapper,.vxe-table--context-menu-wrapper{position:absolute;top:0;left:0;font-size:12px;border:1px solid #dadce0;box-shadow:3px 3px 4px -2px rgba(0,0,0,.6);padding:0 1px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#606266;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;background-color:#fff}.vxe-context-menu--link{display:block;padding:0 2.5em;width:178px;line-height:26px;color:#606266;cursor:pointer}.vxe-context-menu--link .vxe-context-menu--link-prefix,.vxe-context-menu--link .vxe-context-menu--link-suffix{position:absolute;top:5px;margin-right:5px;font-size:16px}.vxe-context-menu--link .vxe-context-menu--link-prefix{left:5px}.vxe-context-menu--link .vxe-context-menu--link-suffix{right:5px}.vxe-context-menu--link .vxe-context-menu--link-suffix.suffix--haschild{top:8px}.vxe-context-menu--link .vxe-context-menu--link-suffix.suffix--haschild:before{position:absolute;content:"";border:4px solid transparent;border-left-color:#727272}.vxe-context-menu--link .vxe-context-menu--link-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-table--context-menu-clild-wrapper .vxe-context-menu--link{padding:0 2em 0 2.5em}.vxe-context-menu--option-wrapper,.vxe-table--context-menu-clild-wrapper{margin:0;padding:0;list-style-type:none;border-bottom:1px solid #e8eaed}.vxe-context-menu--option-wrapper li,.vxe-table--context-menu-clild-wrapper li{position:relative;margin:1px 0;border:1px solid transparent}.vxe-context-menu--option-wrapper li:last-child,.vxe-table--context-menu-clild-wrapper li:last-child{border:0}.vxe-context-menu--option-wrapper li.link--active,.vxe-table--context-menu-clild-wrapper li.link--active{background-color:#c5c5c5;border-color:#c5c5c5}.vxe-context-menu--option-wrapper li.link--active>.vxe-context-menu--link,.vxe-table--context-menu-clild-wrapper li.link--active>.vxe-context-menu--link{color:#2b2b2b}.vxe-context-menu--option-wrapper li.link--disabled>.vxe-context-menu--link,.vxe-table--context-menu-clild-wrapper li.link--disabled>.vxe-context-menu--link{color:#bfbfbf;cursor:no-drop}.vxe-context-menu--option-wrapper li.link--disabled.link--active,.vxe-table--context-menu-clild-wrapper li.link--disabled.link--active{border-color:#c0c1c2;background-color:#eee}.vxe-context-menu--option-wrapper li.link--disabled.link--active:hover,.vxe-table--context-menu-clild-wrapper li.link--disabled.link--active:hover{background-color:inherit}.vxe-table--context-menu-clild-wrapper{display:none;top:0;left:100%}.vxe-table--context-menu-clild-wrapper.is--show{display:block}
+@charset "UTF-8";.vxe-table--context-menu-wrapper{display:none}.vxe-table--context-menu-wrapper.is--visible{display:block}.vxe-table--context-menu-clild-wrapper,.vxe-table--context-menu-wrapper{position:absolute;top:0;left:0;font-size:12px;border:1px solid #dadce0;box-shadow:3px 3px 4px -2px rgba(0,0,0,.6);padding:0 1px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#606266;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;background-color:#fff}.vxe-context-menu--link{display:flex;flex-direction:row;width:198px;line-height:26px;padding:0 .8em;color:#606266;cursor:pointer}.vxe-context-menu--link .vxe-context-menu--link-prefix,.vxe-context-menu--link .vxe-context-menu--link-suffix{min-width:2em;flex-shrink:0;text-align:center;padding:0 .2em}.vxe-context-menu--link .vxe-context-menu--link-content{flex-grow:1;padding:0 .2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-context-menu--option-wrapper,.vxe-table--context-menu-clild-wrapper{margin:0;padding:0;list-style-type:none;border-bottom:1px solid #e8eaed}.vxe-context-menu--option-wrapper li,.vxe-table--context-menu-clild-wrapper li{position:relative;margin:1px 0;border:1px solid transparent}.vxe-context-menu--option-wrapper li:last-child,.vxe-table--context-menu-clild-wrapper li:last-child{border:0}.vxe-context-menu--option-wrapper li.link--active,.vxe-table--context-menu-clild-wrapper li.link--active{background-color:#c5c5c5;border-color:#c5c5c5}.vxe-context-menu--option-wrapper li.link--active>.vxe-context-menu--link,.vxe-table--context-menu-clild-wrapper li.link--active>.vxe-context-menu--link{color:#2b2b2b}.vxe-context-menu--option-wrapper li.link--disabled>.vxe-context-menu--link,.vxe-table--context-menu-clild-wrapper li.link--disabled>.vxe-context-menu--link{color:#bfbfbf;cursor:no-drop}.vxe-context-menu--option-wrapper li.link--disabled.link--active,.vxe-table--context-menu-clild-wrapper li.link--disabled.link--active{border-color:#c0c1c2;background-color:#eee}.vxe-context-menu--option-wrapper li.link--disabled.link--active:hover,.vxe-table--context-menu-clild-wrapper li.link--disabled.link--active:hover{background-color:inherit}.vxe-table--context-menu-clild-wrapper{display:none;top:0;left:100%}.vxe-table--context-menu-clild-wrapper.is--show{display:block}

package/lib/vxe-table-validator-module/style/style.css

@@ -2,6 +2,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/

package/lib/vxe-textarea/style/style.css

@@ -2,6 +2,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/

package/lib/vxe-toolbar/style/style.css

@@ -2,6 +2,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/

package/lib/vxe-tooltip/style/style.css

@@ -2,6 +2,7 @@
 /*size*/
 /*icon*/
 /*color*/
+/*layout*/
 /*input/radio/checkbox*/
 /*popup*/
 /*table*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.8.21",
+  "version": "3.8.23",
   "description": "一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/button/src/button.js

@@ -24,6 +24,7 @@ export default {
     disabled: Boolean,
     loading: Boolean,
     trigger: { type: String, default: () => GlobalConfig.button.trigger },
+    align: String,
     destroyOnClose: Boolean,
     className: [String, Function],
     popupClassName: [String, Function],
@@ -112,7 +113,7 @@ export default {
     GlobalEvent.off(this, 'mousedown')
   },
   render (h) {
-    const { $scopedSlots, className, popupClassName, trigger, title, inited, type, destroyOnClose, isFormBtn, btnMode, btnStatus, btnRound, btnCircle, vSize, name, disabled, loading, visiblePanel, animatVisible, panelPlacement } = this
+    const { $scopedSlots, className, popupClassName, trigger, align, title, inited, type, destroyOnClose, isFormBtn, btnMode, btnStatus, btnRound, btnCircle, vSize, name, disabled, loading, visiblePanel, animatVisible, panelPlacement } = this
     const downsSlot = $scopedSlots.dropdowns
     const btnOns = {}
     const panelOns = {}
@@ -132,7 +133,7 @@ export default {
     }, [
       h('button', {
         ref: 'xBtn',
-        class: ['vxe-button', `type--${btnMode}`, {
+        class: ['vxe-button', `type--${btnMode}`, align ? `align--${align}` : '', {
           [`size--${vSize}`]: vSize,
           [`theme--${btnStatus}`]: btnStatus,
           'is--round': btnRound,
@@ -178,7 +179,7 @@ export default {
       ] : null)
     ]) : h('button', {
       ref: 'xBtn',
-      class: ['vxe-button', `type--${btnMode}`, className ? (XEUtils.isFunction(className) ? className({ $button: this }) : className) : '', {
+      class: ['vxe-button', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: this }) : className) : '', {
         [`size--${vSize}`]: vSize,
         [`theme--${btnStatus}`]: btnStatus,
         'is--round': btnRound,

package/packages/custom/src/panel.js

@@ -3,6 +3,7 @@ import UtilTools from '../../tools/utils'
 import DomTools from '../../tools/dom'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import XEUtils from 'xe-utils'
+import VxeButtonComponent from '../../button/src/button'
 
 const { formatText } = UtilTools
 const { addClass, removeClass } = DomTools
@@ -24,7 +25,7 @@ function updateDropHint (_vm, evnt) {
 }
 
 const renderSimplePanel = (h, _vm) => {
-  const { _e, $xetable, customStore } = _vm
+  const { _e, $xetable, customStore, dragColumn } = _vm
   const { customColumnList, customOpts, isMaxFixedColumn } = $xetable
   const { maxHeight } = customStore
   const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts
@@ -43,6 +44,7 @@ const renderSimplePanel = (h, _vm) => {
       const isColGroup = column.children && column.children.length
       const colTitle = formatText(column.getTitle(), 1)
       const isDisabled = checkMethod ? !checkMethod({ column }) : false
+      const isHidden = !isChecked
       colVNs.push(
         h('li', {
           key: column.id,
@@ -50,6 +52,7 @@ const renderSimplePanel = (h, _vm) => {
             colid: column.id
           },
           class: ['vxe-table-custom--option', `level--${column.level}`, {
+            'is--hidden': isHidden,
             'is--group': isColGroup
           }],
           on: {
@@ -84,11 +87,13 @@ const renderSimplePanel = (h, _vm) => {
               class: 'vxe-table-custom--sort-option'
             }, [
               h('span', {
-                class: 'vxe-table-custom--sort-btn',
+                class: ['vxe-table-custom--sort-btn', {
+                  'is--disabled': isHidden
+                }],
                 attrs: {
                   title: GlobalConfig.i18n('vxe.custom.setting.sortHelpTip')
                 },
-                on: {
+                on: isHidden ? {} : {
                   mousedown: _vm.sortMousedownEvent,
                   mouseup: _vm.sortMouseupEvent
                 }
@@ -99,22 +104,30 @@ const renderSimplePanel = (h, _vm) => {
               ])
             ])
             : _e(),
-          h('div', {
-            class: 'vxe-table-custom--checkbox-label',
-            attrs: {
-              title: colTitle
-            }
-          }, colTitle),
+          column.type === 'html'
+            ? h('div', {
+              key: '1',
+              class: 'vxe-table-custom--checkbox-label',
+              domProps: {
+                innerHTML: colTitle
+              }
+            }) : h('div', {
+              key: '0',
+              class: 'vxe-table-custom--checkbox-label',
+              attrs: {
+                title: colTitle
+              }
+            }, colTitle),
           !parent && allowFixed
             ? h('div', {
               class: 'vxe-table-custom--fixed-option'
             }, [
-              h('span', {
-                class: ['vxe-table-custom--fixed-left-option', column.renderFixed === 'left' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT, {
-                  'is--checked': column.renderFixed === 'left',
-                  'is--disabled': isMaxFixedColumn && !column.renderFixed
-                }],
-                attrs: {
+              h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  icon: column.renderFixed === 'left' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT,
+                  status: column.renderFixed === 'left' ? 'primary' : '',
+                  disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
                   title: GlobalConfig.i18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft')
                 },
                 on: {
@@ -123,16 +136,15 @@ const renderSimplePanel = (h, _vm) => {
                   }
                 }
               }),
-              h('span', {
-                class: ['vxe-table-custom--fixed-right-option', column.renderFixed === 'right' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT, {
-                  'is--checked': column.renderFixed === 'right',
-                  'is--disabled': isMaxFixedColumn && !column.renderFixed
-                }],
-                attrs: {
+              h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  icon: column.renderFixed === 'right' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT,
+                  status: column.renderFixed === 'right' ? 'primary' : '',
+                  disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
                   title: GlobalConfig.i18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight')
                 },
                 on: {
-
                   click: () => {
                     _vm.changeFixedOption(column, 'right')
                   }
@@ -174,7 +186,7 @@ const renderSimplePanel = (h, _vm) => {
                   title: GlobalConfig.i18n('vxe.table.allTitle')
                 },
                 on: {
-                  click: _vm.allCustomEvent
+                  click: _vm.allOptionEvent
                 }
               }, [
                 h('span', {
@@ -203,32 +215,52 @@ const renderSimplePanel = (h, _vm) => {
           h('div', {
             ref: 'dragHintElemRef',
             class: 'vxe-table-custom-popup--drag-hint'
-          }, GlobalConfig.i18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))
+          }, GlobalConfig.i18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))
         ]),
         customOpts.showFooter
           ? h('div', {
             class: 'vxe-table-custom--footer'
           }, [
-            h('button', {
-              class: 'btn--reset',
+            h(VxeButtonComponent, {
+              props: {
+                mode: 'text',
+                content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.table.customRestore')
+              },
               on: {
                 click: _vm.resetCustomEvent
               }
-            }, customOpts.resetButtonText || GlobalConfig.i18n('vxe.table.customRestore')),
+            }),
             customOpts.immediate
-              ? _e()
-              : h('button', {
-                class: 'btn--cancel',
+              ? h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  content: customOpts.closeButtonText || GlobalConfig.i18n('vxe.table.customClose')
+                },
+                on: {
+                  click: _vm.cancelCloseEvent
+                }
+              })
+              : h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.table.customCancel')
+                },
                 on: {
                   click: _vm.cancelCustomEvent
                 }
-              }, customOpts.resetButtonText || GlobalConfig.i18n('vxe.table.customCancel')),
-            h('button', {
-              class: 'btn--confirm',
-              on: {
-                click: _vm.confirmCustomEvent
-              }
-            }, customOpts.confirmButtonText || GlobalConfig.i18n('vxe.table.customConfirm'))
+              }),
+            customOpts.immediate
+              ? _e()
+              : h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  status: 'primary',
+                  content: customOpts.confirmButtonText || GlobalConfig.i18n('vxe.table.customConfirm')
+                },
+                on: {
+                  click: _vm.confirmCustomEvent
+                }
+              })
           ])
           : null
       ]
@@ -250,6 +282,7 @@ const renderPopupPanel = (h, _vm) => {
       const colTitle = formatText(column.getTitle(), 1)
       const isColGroup = column.children && column.children.length
       const isDisabled = checkMethod ? !checkMethod({ column }) : false
+      const isHidden = !isChecked
       trVNs.push(
         h('tr', {
           key: column.id,
@@ -296,11 +329,13 @@ const renderPopupPanel = (h, _vm) => {
             }, [
               column.level === 1
                 ? h('span', {
-                  class: 'vxe-table-custom-popup--column-sort-btn',
+                  class: ['vxe-table-custom-popup--column-sort-btn', {
+                    'is--disabled': isHidden
+                  }],
                   attrs: {
                     title: GlobalConfig.i18n('vxe.custom.setting.sortHelpTip')
                   },
-                  on: {
+                  on: isHidden ? {} : {
                     mousedown: _vm.sortMousedownEvent,
                     mouseup: _vm.sortMouseupEvent
                   }
@@ -315,22 +350,31 @@ const renderPopupPanel = (h, _vm) => {
           h('td', {
             class: 'vxe-table-custom-popup--column-item col--name'
           }, [
-            h('div', {
-              class: 'vxe-table-custom-popup--name',
-              attrs: {
-                title: colTitle
-              }
-            }, colTitle)
+            column.type === 'html'
+              ? h('div', {
+                key: '1',
+                class: 'vxe-table-custom-popup--name',
+                domProps: {
+                  innerHTML: colTitle
+                }
+              }) : h('div', {
+                key: '0',
+                class: 'vxe-table-custom-popup--name',
+                attrs: {
+                  title: colTitle
+                }
+              }, colTitle)
           ]),
           allowResizable
             ? h('td', {
               class: 'vxe-table-custom-popup--column-item col--resizable'
             }, [
-              !isChecked || (column.children && column.children.length)
+              column.children && column.children.length
                 ? h('span', '-')
                 : h('vxe-input', {
                   props: {
                     type: 'integer',
+                    disabled: isHidden,
                     value: column.renderResizeWidth
                   },
                   on: {
@@ -352,19 +396,17 @@ const renderPopupPanel = (h, _vm) => {
                     value: column.renderFixed || '',
                     type: 'button',
                     size: 'mini',
+                    disabled: isHidden,
                     options: [
-                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
-                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedUnset'), value: '' },
-                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
+                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isHidden || isMaxFixedColumn },
+                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedUnset'), value: '', disabled: isHidden },
+                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isHidden || isMaxFixedColumn }
                     ]
                   },
                   on: {
                     input (value) {
                       column.renderFixed = value
                     }
-                  // onChange () {
-                  //   changePopupFixedOption(column)
-                  // }
                   }
                 })
             ])
@@ -453,7 +495,7 @@ const renderPopupPanel = (h, _vm) => {
                         title: GlobalConfig.i18n('vxe.table.allTitle')
                       },
                       on: {
-                        click: _vm.allCustomEvent
+                        click: _vm.allOptionEvent
                       }
 
                     }, [
@@ -514,7 +556,7 @@ const renderPopupPanel = (h, _vm) => {
         return h('div', {
           class: 'vxe-table-custom-popup--footer'
         }, [
-          h('vxe-button', {
+          h(VxeButtonComponent, {
             props: {
               content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.custom.cstmRestore')
             },
@@ -522,7 +564,7 @@ const renderPopupPanel = (h, _vm) => {
               click: _vm.resetCustomEvent
             }
           }),
-          h('vxe-button', {
+          h(VxeButtonComponent, {
             props: {
               content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.custom.cstmCancel')
             },
@@ -530,7 +572,7 @@ const renderPopupPanel = (h, _vm) => {
               click: _vm.cancelCustomEvent
             }
           }),
-          h('vxe-button', {
+          h(VxeButtonComponent, {
             props: {
               status: 'primary',
               content: customOpts.confirmButtonText || GlobalConfig.i18n('vxe.custom.cstmConfirm')
@@ -621,6 +663,11 @@ export default {
       $xetable.emitCustomEvent('confirm', evnt)
       $xetable.saveCustomStore('confirm')
     },
+    cancelCloseEvent ({ $event }) {
+      const { $xetable } = this
+      $xetable.closeCustom()
+      $xetable.emitCustomEvent('cancel', $event)
+    },
     cancelCustomEvent  (evnt) {
       const { $xetable } = this
       const { customStore, customOpts, customColumnList } = $xetable
@@ -701,49 +748,73 @@ export default {
       const { $xetable } = this
       const { customOpts } = $xetable
       const isChecked = !column.renderVisible
-      XEUtils.eachTree([column], (item) => {
-        item.renderVisible = isChecked
-        item.halfVisible = false
-      })
-      this.handleOptionCheck(column)
       if (customOpts.immediate) {
+        XEUtils.eachTree([column], (item) => {
+          item.visible = isChecked
+          item.renderVisible = isChecked
+          item.halfVisible = false
+        })
         $xetable.handleCustom()
         $xetable.saveCustomStore('update:visible')
+      } else {
+        XEUtils.eachTree([column], (item) => {
+          item.renderVisible = isChecked
+          item.halfVisible = false
+        })
       }
+      this.handleOptionCheck(column)
       $xetable.checkCustomStatus()
     },
     changeFixedOption  (column, colFixed) {
       const { $xetable } = this
-      const { isMaxFixedColumn } = $xetable
-      if (column.renderFixed === colFixed) {
-        column.renderFixed = ''
-        // $xeTable.clearColumnFixed(column)
+      const { isMaxFixedColumn, customOpts } = $xetable
+      if (customOpts.immediate) {
+        if (column.renderFixed === colFixed) {
+          column.fixed = ''
+          column.renderFixed = ''
+        } else {
+          if (!isMaxFixedColumn || column.renderFixed) {
+            column.fixed = colFixed
+            column.renderFixed = colFixed
+          }
+        }
+        $xetable.handleCustom()
+        $xetable.saveCustomStore('update:fixed')
       } else {
-        if (!isMaxFixedColumn || column.renderFixed) {
-          column.renderFixed = colFixed
-          // $xeTable.setColumnFixed(column, colFixed)
+        if (column.renderFixed === colFixed) {
+          column.renderFixed = ''
+        } else {
+          if (!isMaxFixedColumn || column.renderFixed) {
+            column.renderFixed = colFixed
+          }
         }
       }
     },
-    // changePopupFixedOption  (column) {
-    //   const { $xetable } = this
-    //   const { isMaxFixedColumn } = $xetable
-    //   if (!isMaxFixedColumn) {
-    //     $xetable.setColumnFixed(column, column.fixed)
-    //   }
-    // },
-    allCustomEvent () {
+    allOptionEvent () {
       const { $xetable, customStore } = this
-      const { customOpts, customColumnList } = $xetable
+      const { customColumnList, customOpts } = $xetable
       const { checkMethod } = customOpts
       const isAll = !customStore.isAll
-      XEUtils.eachTree(customColumnList, (column) => {
-        if (!checkMethod || checkMethod({ column })) {
-          column.renderVisible = isAll
-          column.halfVisible = false
-        }
-      })
-      customStore.isAll = isAll
+      if (customOpts.immediate) {
+        XEUtils.eachTree(customColumnList, (column) => {
+          if (!checkMethod || checkMethod({ column })) {
+            column.visible = isAll
+            column.renderVisible = isAll
+            column.halfVisible = false
+          }
+        })
+        customStore.isAll = isAll
+        $xetable.handleCustom()
+        $xetable.saveCustomStore('update:visible')
+      } else {
+        XEUtils.eachTree(customColumnList, (column) => {
+          if (!checkMethod || checkMethod({ column })) {
+            column.renderVisible = isAll
+            column.halfVisible = false
+          }
+        })
+        customStore.isAll = isAll
+      }
       $xetable.checkCustomStatus()
     },
     sortMousedownEvent (evnt) {
@@ -777,7 +848,7 @@ export default {
     },
     sortDragendEvent (evnt) {
       const { $xetable, prevDropTrEl } = this
-      const { customColumnList } = $xetable
+      const { customColumnList, customOpts } = $xetable
       const trEl = evnt.currentTarget
       const dragHintEl = this.$refs.dragHintElemRef
       if (prevDropTrEl) {
@@ -813,6 +884,17 @@ export default {
       }
       removeClass(trEl, 'active--drag-target')
       removeClass(trEl, 'active--drag-origin')
+
+      if (customOpts.immediate) {
+        XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
+          if (!parent) {
+            const sortIndex = index + 1
+            column.renderSortNumber = sortIndex
+          }
+        })
+        $xetable.handleCustom()
+        $xetable.saveCustomStore('update:sort')
+      }
     },
     sortDragoverEvent  (evnt) {
       const { $xetable, prevDropTrEl } = this