vxe-table 4.8.4 → 4.8.5

package/lib/table/module/custom/hook.js

@@ -4,7 +4,7 @@ var _vue = require("vue");
 var _ui = require("../../../ui");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const tableCustomMethodKeys = ['openCustom', 'closeCustom'];
+const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
 _ui.VxeUI.hooks.add('tableCustomModule', {
   setupTable($xeTable) {
     const {
@@ -28,7 +28,7 @@ _ui.VxeUI.hooks.add('tableCustomModule', {
       if (el) {
         tableHeight = el.clientHeight - 28;
       }
-      customStore.maxHeight = Math.max(4, tableHeight);
+      customStore.maxHeight = Math.max(88, tableHeight);
     };
     const openCustom = () => {
       const {
@@ -75,9 +75,183 @@ _ui.VxeUI.hooks.add('tableCustomModule', {
       }
       return (0, _vue.nextTick)();
     };
+    const saveCustom = () => {
+      const {
+        customColumnList
+      } = reactData;
+      const customOpts = computeCustomOpts.value;
+      const {
+        allowVisible,
+        allowSort,
+        allowFixed,
+        allowResizable
+      } = customOpts;
+      _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
+        if (parent) {
+          // 更新子列信息
+          column.fixed = parent.fixed;
+        } else {
+          if (allowSort) {
+            const sortIndex = index + 1;
+            column.renderSortNumber = sortIndex;
+          }
+          if (allowFixed) {
+            column.fixed = column.renderFixed;
+          }
+        }
+        if (allowResizable) {
+          if (column.renderVisible && (!column.children || column.children.length)) {
+            if (column.renderResizeWidth !== column.renderWidth) {
+              column.resizeWidth = column.renderResizeWidth;
+              column.renderWidth = column.renderResizeWidth;
+            }
+          }
+        }
+        if (allowVisible) {
+          column.visible = column.renderVisible;
+        }
+      });
+      return $xeTable.saveCustomStore('confirm');
+    };
+    const cancelCustom = () => {
+      const {
+        customColumnList,
+        customStore
+      } = reactData;
+      const {
+        oldSortMaps,
+        oldFixedMaps,
+        oldVisibleMaps
+      } = customStore;
+      const customOpts = computeCustomOpts.value;
+      const {
+        allowVisible,
+        allowSort,
+        allowFixed,
+        allowResizable
+      } = customOpts;
+      _xeUtils.default.eachTree(customColumnList, column => {
+        const colid = column.getKey();
+        const visible = !!oldVisibleMaps[colid];
+        const fixed = oldFixedMaps[colid] || '';
+        if (allowVisible) {
+          column.renderVisible = visible;
+          column.visible = visible;
+        }
+        if (allowFixed) {
+          column.renderFixed = fixed;
+          column.fixed = fixed;
+        }
+        if (allowSort) {
+          column.renderSortNumber = oldSortMaps[colid] || 0;
+        }
+        if (allowResizable) {
+          column.renderResizeWidth = column.renderWidth;
+        }
+      }, {
+        children: 'children'
+      });
+      return (0, _vue.nextTick)();
+    };
+    const setCustomAllCheckbox = checked => {
+      const {
+        customStore
+      } = reactData;
+      const {
+        customColumnList
+      } = reactData;
+      const customOpts = computeCustomOpts.value;
+      const {
+        checkMethod,
+        visibleMethod
+      } = customOpts;
+      const isAll = !!checked;
+      if (customOpts.immediate) {
+        _xeUtils.default.eachTree(customColumnList, column => {
+          if (visibleMethod && !visibleMethod({
+            column
+          })) {
+            return;
+          }
+          if (checkMethod && !checkMethod({
+            column
+          })) {
+            return;
+          }
+          column.visible = isAll;
+          column.renderVisible = isAll;
+          column.halfVisible = false;
+        });
+        customStore.isAll = isAll;
+        $xeTable.handleCustom();
+        $xeTable.saveCustomStore('update:visible');
+      } else {
+        _xeUtils.default.eachTree(customColumnList, column => {
+          if (visibleMethod && !visibleMethod({
+            column
+          })) {
+            return;
+          }
+          if (checkMethod && !checkMethod({
+            column
+          })) {
+            return;
+          }
+          column.renderVisible = isAll;
+          column.halfVisible = false;
+        });
+        customStore.isAll = isAll;
+      }
+      $xeTable.checkCustomStatus();
+      return (0, _vue.nextTick)();
+    };
     const customMethods = {
       openCustom,
-      closeCustom
+      closeCustom,
+      saveCustom,
+      cancelCustom,
+      resetCustom(options) {
+        const {
+          collectColumn
+        } = internalData;
+        const customOpts = computeCustomOpts.value;
+        const {
+          checkMethod
+        } = customOpts;
+        const opts = Object.assign({
+          visible: true,
+          resizable: options === true,
+          fixed: options === true,
+          sort: options === true
+        }, options);
+        _xeUtils.default.eachTree(collectColumn, column => {
+          if (opts.resizable) {
+            column.resizeWidth = 0;
+          }
+          if (opts.fixed) {
+            column.fixed = column.defaultFixed;
+          }
+          if (opts.sort) {
+            column.renderSortNumber = column.sortNumber;
+          }
+          if (!checkMethod || checkMethod({
+            column
+          })) {
+            column.visible = column.defaultVisible;
+          }
+          column.renderResizeWidth = column.renderWidth;
+        });
+        $xeTable.saveCustomStore('reset');
+        return $xeTable.handleCustom();
+      },
+      toggleCustomAllCheckbox() {
+        const {
+          customStore
+        } = reactData;
+        const isAll = !customStore.isAll;
+        return setCustomAllCheckbox(isAll);
+      },
+      setCustomAllCheckbox
     };
     const checkCustomStatus = () => {
       const {

package/lib/table/module/custom/hook.min.js

@@ -1 +1 @@
-"use strict";var _vue=require("vue"),_ui=require("../../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const tableCustomMethodKeys=["openCustom","closeCustom"];_ui.VxeUI.hooks.add("tableCustomModule",{setupTable(s){const{reactData:u,internalData:l}=s,o=s.getComputeMaps()["computeCustomOpts"],i=s.getRefMaps()["refElem"],r=s.xegrid,n=()=>{var e=u["customStore"],t=i.value;let s=0;t&&(s=t.clientHeight-28),e.maxHeight=Math.max(4,s)},a=()=>{var{initStore:e,customStore:t}=u,s=l["collectColumn"];const o={},i={},r={};return _xeUtils.default.eachTree(s,e=>{var t=e.getKey();e.renderFixed=e.fixed,e.renderVisible=e.visible,e.renderResizeWidth=e.renderWidth,o[t]=e.renderSortNumber,i[t]=e.fixed,r[t]=e.visible},{children:"children"}),t.oldSortMaps=o,t.oldFixedMaps=i,t.oldVisibleMaps=r,u.customColumnList=s.slice(0),t.visible=!0,e.custom=!0,m(),n(),(0,_vue.nextTick)().then(()=>n())},c=()=>{var e=u["customStore"],t=o.value;return e.visible&&(e.visible=!1,t.immediate||s.handleCustom()),(0,_vue.nextTick)()};var e={openCustom:a,closeCustom:c};const m=()=>{var e=u["customStore"],t=l["collectColumn"];const s=o.value["checkMethod"];e.isAll=t.every(e=>!!s&&!s({column:e})||e.renderVisible),e.isIndeterminate=!e.isAll&&t.some(e=>(!s||s({column:e}))&&(e.renderVisible||e.halfVisible))},v=(e,t)=>{(r||s).dispatchEvent("custom",{type:e},t)};var t={checkCustomStatus:m,emitCustomEvent:v,triggerCustomEvent(e){var t=s.reactData["customStore"];t.visible?(c(),v("close",e)):(t.btnEl=e.target,a(),v("open",e))},customOpenEvent(e){var t=u["customStore"];t.visible||(t.activeBtn=!0,t.btnEl=e.target,s.openCustom(),s.emitCustomEvent("open",e))},customCloseEvent(e){var t=u["customStore"];t.visible&&(t.activeBtn=!1,s.closeCustom(),s.emitCustomEvent("close",e))}};return Object.assign(Object.assign({},e),t)},setupGrid(e){return e.extendTableMethods(tableCustomMethodKeys)}});
+"use strict";var _vue=require("vue"),_ui=require("../../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const tableCustomMethodKeys=["openCustom","closeCustom","saveCustom","cancelCustom","resetCustom","toggleCustomAllCheckbox","setCustomAllCheckbox"];_ui.VxeUI.hooks.add("tableCustomModule",{setupTable(a){const{reactData:c,internalData:o}=a,m=a.getComputeMaps()["computeCustomOpts"],s=a.getRefMaps()["refElem"],i=a.xegrid,u=()=>{var e=c["customStore"],t=s.value;let i=0;t&&(i=t.clientHeight-28),e.maxHeight=Math.max(88,i)},r=()=>{var{initStore:e,customStore:t}=c,i=o["collectColumn"];const s={},r={},l={};return _xeUtils.default.eachTree(i,e=>{var t=e.getKey();e.renderFixed=e.fixed,e.renderVisible=e.visible,e.renderResizeWidth=e.renderWidth,s[t]=e.renderSortNumber,r[t]=e.fixed,l[t]=e.visible},{children:"children"}),t.oldSortMaps=s,t.oldFixedMaps=r,t.oldVisibleMaps=l,c.customColumnList=i.slice(0),t.visible=!0,e.custom=!0,n(),u(),(0,_vue.nextTick)().then(()=>u())},l=()=>{var e=c["customStore"],t=m.value;return e.visible&&(e.visible=!1,t.immediate||a.handleCustom()),(0,_vue.nextTick)()};const t=e=>{var t=c["customStore"],i=c["customColumnList"],s=m.value;const{checkMethod:r,visibleMethod:l}=s,o=!!e;return s.immediate?(_xeUtils.default.eachTree(i,e=>{l&&!l({column:e})||r&&!r({column:e})||(e.visible=o,e.renderVisible=o,e.halfVisible=!1)}),t.isAll=o,a.handleCustom(),a.saveCustomStore("update:visible")):(_xeUtils.default.eachTree(i,e=>{l&&!l({column:e})||r&&!r({column:e})||(e.renderVisible=o,e.halfVisible=!1)}),t.isAll=o),a.checkCustomStatus(),(0,_vue.nextTick)()};var e={openCustom:r,closeCustom:l,saveCustom:()=>{var e=c["customColumnList"];const{allowVisible:l,allowSort:o,allowFixed:u,allowResizable:n}=m.value;return _xeUtils.default.eachTree(e,(e,t,i,s,r)=>{r?e.fixed=r.fixed:(o&&(e.renderSortNumber=t+1),u&&(e.fixed=e.renderFixed)),n&&e.renderVisible&&(!e.children||e.children.length)&&e.renderResizeWidth!==e.renderWidth&&(e.resizeWidth=e.renderResizeWidth,e.renderWidth=e.renderResizeWidth),l&&(e.visible=e.renderVisible)}),a.saveCustomStore("confirm")},cancelCustom:()=>{var{customColumnList:e,customStore:t}=c;const{oldSortMaps:r,oldFixedMaps:l,oldVisibleMaps:o}=t,{allowVisible:u,allowSort:n,allowFixed:a,allowResizable:d}=m.value;return _xeUtils.default.eachTree(e,e=>{var t=e.getKey(),i=!!o[t],s=l[t]||"";u&&(e.renderVisible=i,e.visible=i),a&&(e.renderFixed=s,e.fixed=s),n&&(e.renderSortNumber=r[t]||0),d&&(e.renderResizeWidth=e.renderWidth)},{children:"children"}),(0,_vue.nextTick)()},resetCustom(e){var t=o["collectColumn"];const i=m.value["checkMethod"],s=Object.assign({visible:!0,resizable:!0===e,fixed:!0===e,sort:!0===e},e);return _xeUtils.default.eachTree(t,e=>{s.resizable&&(e.resizeWidth=0),s.fixed&&(e.fixed=e.defaultFixed),s.sort&&(e.renderSortNumber=e.sortNumber),i&&!i({column:e})||(e.visible=e.defaultVisible),e.renderResizeWidth=e.renderWidth}),a.saveCustomStore("reset"),a.handleCustom()},toggleCustomAllCheckbox(){var e=c["customStore"],e=!e.isAll;return t(e)},setCustomAllCheckbox:t};const n=()=>{var e=c["customStore"],t=o["collectColumn"];const i=m.value["checkMethod"];e.isAll=t.every(e=>!!i&&!i({column:e})||e.renderVisible),e.isIndeterminate=!e.isAll&&t.some(e=>(!i||i({column:e}))&&(e.renderVisible||e.halfVisible))},d=(e,t)=>{(i||a).dispatchEvent("custom",{type:e},t)};var v={checkCustomStatus:n,emitCustomEvent:d,triggerCustomEvent(e){var t=a.reactData["customStore"];t.visible?(l(),d("close",e)):(t.btnEl=e.target,r(),d("open",e))},customOpenEvent(e){var t=c["customStore"];t.visible||(t.activeBtn=!0,t.btnEl=e.target,a.openCustom(),a.emitCustomEvent("open",e))},customCloseEvent(e){var t=c["customStore"];t.visible&&(t.activeBtn=!1,a.closeCustom(),a.emitCustomEvent("close",e))}};return Object.assign(Object.assign({},e),v)},setupGrid(e){return e.extendTableMethods(tableCustomMethodKeys)}});

package/lib/table/module/custom/panel.js

@@ -13,7 +13,8 @@ var _xeUtils = _interopRequireDefault(require("xe-utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const {
   getI18n,
-  getIcon
+  getIcon,
+  renderEmptyElement
 } = _ui.VxeUI;
 var _default = exports.default = (0, _vue.defineComponent)({
   name: 'TableCustomPanel',
@@ -65,44 +66,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const confirmCustomEvent = ({
       $event
     }) => {
-      const {
-        customColumnList
-      } = reactData;
-      const customOpts = computeCustomOpts.value;
-      const {
-        allowVisible,
-        allowSort,
-        allowFixed,
-        allowResizable
-      } = customOpts;
-      _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
-        if (parent) {
-          // 更新子列信息
-          column.fixed = parent.fixed;
-        } else {
-          if (allowSort) {
-            const sortIndex = index + 1;
-            column.renderSortNumber = sortIndex;
-          }
-          if (allowFixed) {
-            column.fixed = column.renderFixed;
-          }
-        }
-        if (allowResizable) {
-          if (column.renderVisible && (!column.children || column.children.length)) {
-            if (column.renderResizeWidth !== column.renderWidth) {
-              column.resizeWidth = column.renderResizeWidth;
-              column.renderWidth = column.renderResizeWidth;
-            }
-          }
-        }
-        if (allowVisible) {
-          column.visible = column.renderVisible;
-        }
-      });
+      $xeTable.saveCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('confirm', $event);
-      $xeTable.saveCustomStore('confirm');
     };
     const cancelCloseEvent = ({
       $event
@@ -113,50 +79,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const cancelCustomEvent = ({
       $event
     }) => {
-      const {
-        customStore
-      } = props;
-      const {
-        customColumnList
-      } = reactData;
-      const {
-        oldSortMaps,
-        oldFixedMaps,
-        oldVisibleMaps
-      } = customStore;
-      const customOpts = computeCustomOpts.value;
-      const {
-        allowVisible,
-        allowSort,
-        allowFixed,
-        allowResizable
-      } = customOpts;
-      _xeUtils.default.eachTree(customColumnList, column => {
-        const colid = column.getKey();
-        const visible = !!oldVisibleMaps[colid];
-        const fixed = oldFixedMaps[colid] || '';
-        if (allowVisible) {
-          column.renderVisible = visible;
-          column.visible = visible;
-        }
-        if (allowFixed) {
-          column.renderFixed = fixed;
-          column.fixed = fixed;
-        }
-        if (allowSort) {
-          column.renderSortNumber = oldSortMaps[colid] || 0;
-        }
-        if (allowResizable) {
-          column.renderResizeWidth = column.renderWidth;
-        }
-      }, {
-        children: 'children'
-      });
+      $xeTable.cancelCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('cancel', $event);
     };
     const handleResetCustomEvent = evnt => {
-      $xeTable.resetColumn(true);
+      $xeTable.resetCustom(true);
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('reset', evnt);
     };
@@ -247,55 +175,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
     };
     const allOptionEvent = () => {
-      const {
-        customStore
-      } = props;
-      const {
-        customColumnList
-      } = reactData;
-      const customOpts = computeCustomOpts.value;
-      const {
-        checkMethod,
-        visibleMethod
-      } = customOpts;
-      const isAll = !customStore.isAll;
-      if (customOpts.immediate) {
-        _xeUtils.default.eachTree(customColumnList, column => {
-          if (visibleMethod && !visibleMethod({
-            column
-          })) {
-            return;
-          }
-          if (checkMethod && !checkMethod({
-            column
-          })) {
-            return;
-          }
-          column.visible = isAll;
-          column.renderVisible = isAll;
-          column.halfVisible = false;
-        });
-        customStore.isAll = isAll;
-        $xeTable.handleCustom();
-        $xeTable.saveCustomStore('update:visible');
-      } else {
-        _xeUtils.default.eachTree(customColumnList, column => {
-          if (visibleMethod && !visibleMethod({
-            column
-          })) {
-            return;
-          }
-          if (checkMethod && !checkMethod({
-            column
-          })) {
-            return;
-          }
-          column.renderVisible = isAll;
-          column.halfVisible = false;
-        });
-        customStore.isAll = isAll;
-      }
-      $xeTable.checkCustomStatus();
+      $xeTable.toggleCustomAllCheckbox();
     };
     const sortMousedownEvent = evnt => {
       const btnEl = evnt.currentTarget;
@@ -306,6 +186,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       trEl.draggable = true;
       dragColumnRef.value = column;
       (0, _dom.addClass)(trEl, 'active--drag-origin');
+      updateDropHint(evnt);
     };
     const sortMouseupEvent = evnt => {
       const btnEl = evnt.currentTarget;
@@ -429,13 +310,29 @@ var _default = exports.default = (0, _vue.defineComponent)({
         placement
       } = customOpts;
       const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+      const slots = customOpts.slots || {};
+      const headerSlot = slots.header;
+      const topSlot = slots.top;
+      const bottomSlot = slots.bottom;
+      const defaultSlot = slots.default;
+      const footerSlot = slots.footer;
       const colVNs = [];
       const customWrapperOns = {};
+      const isAllChecked = customStore.isAll;
+      const isAllIndeterminate = customStore.isIndeterminate;
+      const dragColumn = dragColumnRef.value;
       // hover 触发
       if (trigger === 'hover') {
         customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
         customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
       }
+      const params = {
+        $table: $xeTable,
+        $grid: $xeTable.xegrid,
+        columns: customColumnList,
+        isAllChecked,
+        isAllIndeterminate
+      };
       _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({
           column
@@ -515,9 +412,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)()]));
         }
       });
-      const isAllChecked = customStore.isAll;
-      const isAllIndeterminate = customStore.isIndeterminate;
-      const dragColumn = dragColumnRef.value;
       return (0, _vue.h)('div', {
         ref: refElem,
         key: 'simple',
@@ -527,8 +421,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
         style: maxHeight && !['left', 'right'].includes(placement) ? {
           maxHeight: `${maxHeight}px`
         } : {}
-      }, customStore.visible ? [(0, _vue.h)('ul', {
+      }, customStore.visible ? [(0, _vue.h)('div', {
         class: 'vxe-table-custom--header'
+      }, headerSlot ? $xeTable.callSlot(headerSlot, params) : [(0, _vue.h)('ul', {
+        class: 'vxe-table-custom--panel-list'
       }, [(0, _vue.h)('li', {
         class: 'vxe-table-custom--option'
       }, [allowVisible ? (0, _vue.h)('div', {
@@ -544,20 +440,28 @@ var _default = exports.default = (0, _vue.defineComponent)({
         class: 'vxe-checkbox--label'
       }, getI18n('vxe.toolbar.customAll'))]) : (0, _vue.h)('span', {
         class: 'vxe-checkbox--label'
-      }, getI18n('vxe.table.customTitle'))])]), (0, _vue.h)('div', {
+      }, getI18n('vxe.table.customTitle'))])])]), (0, _vue.h)('div', {
         ref: bodyElemRef,
-        class: 'vxe-table-custom--list-wrapper'
-      }, [(0, _vue.h)(_vue.TransitionGroup, Object.assign({
-        class: 'vxe-table-custom--body',
+        class: 'vxe-table-custom--body'
+      }, [topSlot ? (0, _vue.h)('div', {
+        class: 'vxe-table-custom--panel-top'
+      }, $xeTable.callSlot(topSlot, params)) : renderEmptyElement($xeTable), defaultSlot ? (0, _vue.h)('div', {
+        class: 'vxe-table-custom--panel-body'
+      }, $xeTable.callSlot(defaultSlot, params)) : (0, _vue.h)(_vue.TransitionGroup, Object.assign({
+        class: 'vxe-table-custom--panel-list',
         name: 'vxe-table-custom--list',
         tag: 'ul'
       }, customWrapperOns), {
         default: () => colVNs
-      }), (0, _vue.h)('div', {
+      }), bottomSlot ? (0, _vue.h)('div', {
+        class: 'vxe-table-custom--panel-bottom'
+      }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable), (0, _vue.h)('div', {
         ref: dragHintElemRef,
         class: 'vxe-table-custom-popup--drag-hint'
       }, getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))]), customOpts.showFooter ? (0, _vue.h)('div', {
         class: 'vxe-table-custom--footer'
+      }, footerSlot ? $xeTable.callSlot(footerSlot, params) : [(0, _vue.h)('div', {
+        class: 'vxe-table-custom--footer-buttons'
       }, [VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
         mode: 'text',
         content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
@@ -575,7 +479,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         status: 'primary',
         content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
         onClick: confirmCustomEvent
-      }) : (0, _vue.createCommentVNode)()]) : null] : []);
+      }) : (0, _vue.createCommentVNode)()])]) : null] : []);
     };
     const renderPopupPanel = () => {
       const {
@@ -605,7 +509,23 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const modalOpts = Object.assign({}, modalOptions);
       const drawerOpts = Object.assign({}, drawerOptions);
       const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+      const slots = customOpts.slots || {};
+      const headerSlot = slots.header;
+      const topSlot = slots.top;
+      const bottomSlot = slots.bottom;
+      const defaultSlot = slots.default;
+      const footerSlot = slots.footer;
       const trVNs = [];
+      const isAllChecked = customStore.isAll;
+      const isAllIndeterminate = customStore.isIndeterminate;
+      const dragColumn = dragColumnRef.value;
+      const params = {
+        $table: $xeTable,
+        $grid: $xeTable.xegrid,
+        columns: customColumnList,
+        isAllChecked,
+        isAllIndeterminate
+      };
       _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({
           column
@@ -701,36 +621,28 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)()]));
         }
       });
-      const isAllChecked = customStore.isAll;
-      const isAllIndeterminate = customStore.isIndeterminate;
-      const dragColumn = dragColumnRef.value;
       const scopedSlots = {
         default: () => {
+          if (defaultSlot) {
+            return $xeTable.callSlot(defaultSlot, params);
+          }
           return (0, _vue.h)('div', {
             ref: bodyElemRef,
             class: 'vxe-table-custom-popup--body'
-          }, [(0, _vue.h)('div', {
+          }, [topSlot ? (0, _vue.h)('div', {
+            class: 'vxe-table-custom-popup--table-top'
+          }, $xeTable.callSlot(topSlot, params)) : renderEmptyElement($xeTable), (0, _vue.h)('div', {
             class: 'vxe-table-custom-popup--table-wrapper'
           }, [(0, _vue.h)('table', {}, [(0, _vue.h)('colgroup', {}, [allowVisible ? (0, _vue.h)('col', {
-            style: {
-              width: '80px'
-            }
+            class: 'vxe-table-custom-popup--table-col-seq'
           }) : (0, _vue.createCommentVNode)(), allowSort ? (0, _vue.h)('col', {
-            style: {
-              width: '80px'
-            }
+            class: 'vxe-table-custom-popup--table-col-sort'
           }) : (0, _vue.createCommentVNode)(), (0, _vue.h)('col', {
-            style: {
-              minWidth: '120px'
-            }
+            class: 'vxe-table-custom-popup--table-col-title'
           }), allowResizable ? (0, _vue.h)('col', {
-            style: {
-              width: '140px'
-            }
+            class: 'vxe-table-custom-popup--table-col-width'
           }) : (0, _vue.createCommentVNode)(), allowFixed ? (0, _vue.h)('col', {
-            style: {
-              width: '200px'
-            }
+            class: 'vxe-table-custom-popup--table-col-fixed'
           }) : (0, _vue.createCommentVNode)()]), (0, _vue.h)('thead', {}, [(0, _vue.h)('tr', {}, [allowVisible ? (0, _vue.h)('th', {}, [(0, _vue.h)('div', {
             class: ['vxe-table-custom--checkbox-option', {
               'is--checked': isAllChecked,
@@ -755,17 +667,22 @@ var _default = exports.default = (0, _vue.defineComponent)({
               });
             }
           }) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? (0, _vue.h)('th', {}, getI18n('vxe.custom.setting.colResizable')) : (0, _vue.createCommentVNode)(), allowFixed ? (0, _vue.h)('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : (0, _vue.createCommentVNode)()])]), (0, _vue.h)(_vue.TransitionGroup, {
-            class: 'vxe-table-custom--body',
+            class: 'vxe-table-custom--panel-list',
             tag: 'tbody',
             name: 'vxe-table-custom--list'
           }, {
             default: () => trVNs
-          })])]), (0, _vue.h)('div', {
+          })])]), bottomSlot ? (0, _vue.h)('div', {
+            class: 'vxe-table-custom-popup--table-bottom'
+          }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable), (0, _vue.h)('div', {
             ref: dragHintElemRef,
             class: 'vxe-table-custom-popup--drag-hint'
           }, getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))]);
         },
         footer: () => {
+          if (footerSlot) {
+            return $xeTable.callSlot(footerSlot, params);
+          }
           return (0, _vue.h)('div', {
             class: 'vxe-table-custom-popup--footer'
           }, [VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
@@ -781,6 +698,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }) : (0, _vue.createCommentVNode)()]);
         }
       };
+      if (headerSlot) {
+        scopedSlots.header = () => $xeTable.callSlot(headerSlot, params);
+      }
       if (mode === 'drawer') {
         return VxeUIDrawerComponent ? (0, _vue.h)(VxeUIDrawerComponent, {
           key: 'drawer',