vxe-table 3.19.39 → 3.20.0-beta.1

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _comp = require("../../../ui/src/comp");
 var _ui = require("../../../ui");
 var _utils = require("../../../ui/src/utils");
 var _dom = require("../../../ui/src/dom");
@@ -69,679 +70,7 @@ function hideDropTip($xeTableCustomPanel) {
     dragLineEl.style.display = '';
   }
 }
-const renderDragTip = (h, $xeTableCustomPanel) => {
-  const $xeTable = $xeTableCustomPanel.$xeTable;
-  const customPanelReactData = $xeTableCustomPanel.reactData;
-  const {
-    dragTipText
-  } = customPanelReactData;
-  const columnDragOpts = $xeTable.computeColumnDragOpts;
-  return h('div', {}, [h('div', {
-    ref: 'refDragLineElem',
-    class: ['vxe-table-custom-popup--drag-line', {
-      'is--guides': columnDragOpts.showGuidesStatus
-    }]
-  }), h('div', {
-    ref: 'refDragTipElem',
-    class: 'vxe-table-custom-popup--drag-tip'
-  }, [h('div', {
-    class: 'vxe-table-custom-popup--drag-tip-wrapper'
-  }, [h('div', {
-    class: 'vxe-table-custom-popup--drag-tip-status'
-  }, [h('span', {
-    class: ['vxe-table-custom-popup--drag-tip-normal-status', getIcon().TABLE_DRAG_STATUS_ROW]
-  }), h('span', {
-    class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
-  }), h('span', {
-    class: ['vxe-table-custom-popup--drag-tip-group-status', getIcon().TABLE_DRAG_STATUS_AGG_GROUP]
-  }), h('span', {
-    class: ['vxe-table-custom-popup--drag-tip-values-status', getIcon().TABLE_DRAG_STATUS_AGG_VALUES]
-  }), h('span', {
-    class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
-  })]), h('div', {
-    class: 'vxe-table-custom-popup--drag-tip-content'
-  }, `${dragTipText || ''}`)])])]);
-};
-const renderSimplePanel = (h, _vm) => {
-  const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
-  const props = _vm;
-  const $xeTable = _vm.$xeTable;
-  const tableProps = $xeTable;
-  const tableReactData = $xeTable;
-  const $xeGrid = $xeTable.$xeGrid;
-  const $xeGantt = $xeTable.$xeGantt;
-  const {
-    customStore
-  } = props;
-  const {
-    treeConfig,
-    rowGroupConfig,
-    aggregateConfig
-  } = tableProps;
-  const {
-    isCustomStatus,
-    customColumnList
-  } = tableReactData;
-  const customOpts = $xeTable.computeCustomOpts;
-  const {
-    immediate
-  } = customOpts;
-  const columnDragOpts = $xeTable.computeColumnDragOpts;
-  const {
-    maxHeight
-  } = customStore;
-  const {
-    checkMethod,
-    visibleMethod,
-    allowVisible,
-    allowSort,
-    allowFixed,
-    trigger,
-    placement
-  } = customOpts;
-  const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
-  const {
-    isCrossDrag
-  } = columnDragOpts;
-  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;
-  // hover 触发
-  if (trigger === 'hover') {
-    customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent;
-    customWrapperOns.mouseleave = _vm.handleWrapperMouseleaveEvent;
-  }
-  const params = {
-    $table: $xeTable,
-    $grid: $xeGrid,
-    $gantt: $xeGantt,
-    columns: customColumnList,
-    isAllChecked,
-    isAllIndeterminate,
-    isCustomStatus
-  };
-  _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
-    const isVisible = visibleMethod ? visibleMethod({
-      $table: $xeTable,
-      column
-    }) : true;
-    if (isVisible) {
-      const isChecked = column.renderVisible;
-      const isIndeterminate = column.halfVisible;
-      const isColGroup = column.children && column.children.length;
-      const colTitle = (0, _utils.formatText)(column.getTitle(), 1);
-      const isDisabled = checkMethod ? !checkMethod({
-        $table: $xeTable,
-        column
-      }) : false;
-      const isHidden = !isChecked;
-      colVNs.push(h('li', {
-        key: column.id,
-        attrs: {
-          colid: column.id
-        },
-        class: ['vxe-table-custom--option', `level--${column.level}`, {
-          'is--hidden': isDisabled || isHidden,
-          'is--group': isColGroup
-        }],
-        on: {
-          dragstart: _vm.sortDragstartEvent,
-          dragend: _vm.sortDragendEvent,
-          dragover: _vm.sortDragoverEvent
-        }
-      }, [allowVisible ? h('div', {
-        class: ['vxe-table-custom--checkbox-option', {
-          'is--checked': isChecked,
-          'is--indeterminate': isIndeterminate,
-          'is--disabled': isDisabled
-        }],
-        attrs: {
-          title: getI18n('vxe.custom.setting.colVisible')
-        },
-        on: {
-          click: evnt => {
-            if (!isDisabled) {
-              _vm.changeCheckboxOption(column, evnt);
-            }
-          }
-        }
-      }, [h('span', {
-        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })]) : renderEmptyElement($xeTable), h('div', {
-        class: 'vxe-table-custom--name-option'
-      }, [allowSort && ((isCrossDrag ? immediate : false) || column.level === 1) ? h('div', {
-        class: 'vxe-table-custom--sort-option'
-      }, [h('span', {
-        class: ['vxe-table-custom--sort-btn', {
-          'is--disabled': isHidden
-        }],
-        attrs: {
-          title: getI18n('vxe.custom.setting.sortHelpTip')
-        },
-        on: isHidden ? {} : {
-          mousedown: _vm.sortMousedownEvent,
-          mouseup: _vm.sortMouseupEvent
-        }
-      }, [h('i', {
-        class: getIcon().TABLE_CUSTOM_SORT
-      })])]) : renderEmptyElement($xeTable), 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(VxeUIButtonComponent, {
-        props: {
-          mode: 'text',
-          icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
-          status: column.renderFixed === 'left' ? 'primary' : '',
-          disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
-          title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft')
-        },
-        on: {
-          click: ({
-            $event
-          }) => {
-            _vm.changeFixedOption(column, 'left', $event);
-          }
-        }
-      }), h(VxeUIButtonComponent, {
-        props: {
-          mode: 'text',
-          icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
-          status: column.renderFixed === 'right' ? 'primary' : '',
-          disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
-          title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight')
-        },
-        on: {
-          click: ({
-            $event
-          }) => {
-            _vm.changeFixedOption(column, 'right', $event);
-          }
-        }
-      })]) : renderEmptyElement($xeTable)]));
-    }
-  });
-  return h('div', {
-    ref: 'refElem',
-    key: 'simple',
-    class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
-      'is--active': customStore.visible
-    }],
-    style: maxHeight && !['left', 'right'].includes(placement || '') ? {
-      maxHeight: `${maxHeight}px`
-    } : {}
-  }, customStore.visible ? [h('div', {
-    ref: 'refBodyWrapperElem',
-    class: 'vxe-table-custom-simple--body-wrapper'
-  }, [!treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel ? h($xeTable.getPivotTableAggregateSimplePanel(), {
-    props: {
-      customStore
-    }
-  }) : renderEmptyElement($xeTable), h('div', {
-    ref: 'refCustomBodyElem',
-    class: 'vxe-table-custom--handle-wrapper'
-  }, [h('div', {
-    class: 'vxe-table-custom--header'
-  }, headerSlot ? $xeTable.callSlot(headerSlot, params, h) : [h('ul', {
-    class: 'vxe-table-custom--panel-list'
-  }, [h('li', {
-    class: 'vxe-table-custom--option'
-  }, [allowVisible ? h('div', {
-    class: ['vxe-table-custom--checkbox-option', {
-      'is--checked': isAllChecked,
-      'is--indeterminate': isAllIndeterminate
-    }],
-    attrs: {
-      title: getI18n('vxe.table.allTitle')
-    },
-    on: {
-      click: _vm.allOptionEvent
-    }
-  }, [h('span', {
-    class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-  }), h('span', {
-    class: 'vxe-checkbox--label'
-  }, getI18n('vxe.toolbar.customAll'))]) : h('span', {
-    class: 'vxe-checkbox--label'
-  }, getI18n('vxe.table.customTitle'))])])]), h('div', {
-    class: 'vxe-table-custom--body'
-  }, [topSlot ? h('div', {
-    class: 'vxe-table-custom--panel-top'
-  }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), defaultSlot ? h('div', {
-    class: 'vxe-table-custom--panel-body'
-  }, $xeTable.callSlot(defaultSlot, params, h)) : h('transition-group', {
-    class: 'vxe-table-custom--panel-list',
-    props: {
-      name: 'vxe-table-custom--list',
-      tag: 'ul'
-    },
-    on: customWrapperOns
-  }, colVNs), bottomSlot ? h('div', {
-    class: 'vxe-table-custom--panel-bottom'
-  }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable)]), customOpts.showFooter ? h('div', {
-    class: 'vxe-table-custom--footer'
-  }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
-    class: 'vxe-table-custom--footer-buttons'
-  }, [h(VxeUIButtonComponent, {
-    props: {
-      mode: 'text',
-      content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
-      disabled: !isCustomStatus
-    },
-    on: {
-      click: _vm.resetCustomEvent
-    }
-  }), immediate ? h(VxeUIButtonComponent, {
-    props: {
-      mode: 'text',
-      content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
-    },
-    on: {
-      click: _vm.cancelCloseEvent
-    }
-  }) : h(VxeUIButtonComponent, {
-    props: {
-      mode: 'text',
-      content: customOpts.resetButtonText || getI18n('vxe.table.customCancel')
-    },
-    on: {
-      click: _vm.cancelCustomEvent
-    }
-  }), immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
-    props: {
-      mode: 'text',
-      status: 'primary',
-      content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
-    },
-    on: {
-      click: _vm.confirmCustomEvent
-    }
-  })])]) : null]), renderDragTip(h, _vm)])] : []);
-};
-const renderPopupPanel = (h, $xeTableCustomPanel) => {
-  const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
-  const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
-  const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
-  const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeNumberInput');
-  const _vm = $xeTableCustomPanel;
-  const props = $xeTableCustomPanel;
-  const $xeTable = $xeTableCustomPanel.$xeTable;
-  const tableProps = $xeTable;
-  const tableReactData = $xeTable;
-  const $xeGrid = $xeTable.$xeGrid;
-  const $xeGantt = $xeTable.$xeGantt;
-  const {
-    customStore
-  } = props;
-  const {
-    treeConfig,
-    rowGroupConfig,
-    aggregateConfig,
-    resizable: allResizable
-  } = tableProps;
-  const {
-    isCustomStatus,
-    customColumnList
-  } = tableReactData;
-  const customOpts = $xeTable.computeCustomOpts;
-  const {
-    immediate
-  } = customOpts;
-  const columnDragOpts = $xeTable.computeColumnDragOpts;
-  const {
-    mode,
-    modalOptions,
-    drawerOptions,
-    allowVisible,
-    allowSort,
-    allowFixed,
-    allowResizable,
-    checkMethod,
-    visibleMethod
-  } = customOpts;
-  const columnOpts = $xeTable.computeColumnOpts;
-  const {
-    maxFixedSize
-  } = columnOpts;
-  const resizableOpts = $xeTable.computeResizableOpts;
-  const {
-    minWidth: reMinWidth,
-    maxWidth: reMaxWidth
-  } = resizableOpts;
-  const modalOpts = Object.assign({}, modalOptions);
-  const drawerOpts = Object.assign({}, drawerOptions);
-  const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
-  const {
-    isCrossDrag
-  } = columnDragOpts;
-  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 params = {
-    $table: $xeTable,
-    $grid: $xeGrid,
-    $gantt: $xeGantt,
-    columns: customColumnList,
-    isAllChecked,
-    isAllIndeterminate,
-    isCustomStatus
-  };
-  _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
-    const isVisible = visibleMethod ? visibleMethod({
-      $table: $xeTable,
-      column
-    }) : true;
-    if (isVisible) {
-      // 默认继承调整宽度
-      let customMinWidth = 0;
-      let customMaxWidth = 0;
-      if (allowResizable) {
-        const resizeParams = {
-          $table: $xeTable,
-          column,
-          columnIndex: index,
-          $columnIndex: index,
-          $rowIndex: -1
-        };
-        if (reMinWidth) {
-          customMinWidth = _xeUtils.default.toNumber(_xeUtils.default.isFunction(reMinWidth) ? reMinWidth(resizeParams) : reMinWidth);
-        }
-        if (reMaxWidth) {
-          customMaxWidth = _xeUtils.default.toNumber(_xeUtils.default.isFunction(reMaxWidth) ? reMaxWidth(resizeParams) : reMaxWidth);
-        }
-      }
-      const isChecked = column.renderVisible;
-      const isIndeterminate = column.halfVisible;
-      const colTitle = (0, _utils.formatText)(column.getTitle(), 1);
-      const isColGroup = column.children && column.children.length;
-      const isDisabled = checkMethod ? !checkMethod({
-        $table: $xeTable,
-        column
-      }) : false;
-      const isHidden = !isChecked;
-      trVNs.push(h('tr', {
-        key: column.id,
-        attrs: {
-          colid: column.id
-        },
-        class: [`vxe-table-custom-popup--row level--${column.level}`, {
-          'is--group': isColGroup
-        }],
-        on: {
-          dragstart: _vm.sortDragstartEvent,
-          dragend: _vm.sortDragendEvent,
-          dragover: _vm.sortDragoverEvent
-        }
-      }, [allowVisible ? h('td', {
-        class: 'vxe-table-custom-popup--column-item col--visible'
-      }, [h('div', {
-        class: ['vxe-table-custom--checkbox-option', {
-          'is--checked': isChecked,
-          'is--indeterminate': isIndeterminate,
-          'is--disabled': isDisabled
-        }],
-        attrs: {
-          title: getI18n('vxe.custom.setting.colVisible')
-        },
-        on: {
-          click: evnt => {
-            if (!isDisabled) {
-              _vm.changeCheckboxOption(column, evnt);
-            }
-          }
-        }
-      }, [h('span', {
-        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })])]) : renderEmptyElement($xeTable), h('td', {
-        class: 'vxe-table-custom-popup--column-item col--name'
-      }, [h('div', {
-        class: 'vxe-table-custom-popup--name'
-      }, [allowSort ? (isCrossDrag ? immediate : false) || column.level === 1 ? h('div', {
-        class: ['vxe-table-custom-popup--column-sort-btn', {
-          'is--disabled': isHidden
-        }],
-        attrs: {
-          title: getI18n('vxe.custom.setting.sortHelpTip')
-        },
-        on: isHidden ? {} : {
-          mousedown: _vm.sortMousedownEvent,
-          mouseup: _vm.sortMouseupEvent
-        }
-      }, [h('i', {
-        class: getIcon().TABLE_CUSTOM_SORT
-      })]) : h('div', {
-        class: 'vxe-table-custom-popup--column-sort-placeholder'
-      }) : renderEmptyElement($xeTable), column.type === 'html' ? h('div', {
-        key: '1',
-        class: 'vxe-table-custom-popup--title',
-        domProps: {
-          innerHTML: colTitle
-        }
-      }) : h('div', {
-        key: '0',
-        class: 'vxe-table-custom-popup--title',
-        attrs: {
-          title: colTitle
-        }
-      }, colTitle)])]), allowResizable ? h('td', {
-        class: 'vxe-table-custom-popup--column-item col--resizable'
-      }, [column.children && column.children.length || !(_xeUtils.default.isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? h('span', '-') : VxeUINumberInputComponent ? h(VxeUINumberInputComponent, {
-        props: {
-          type: 'integer',
-          immediate: false,
-          disabled: isHidden,
-          value: column.renderResizeWidth,
-          min: customMinWidth || undefined,
-          max: customMaxWidth || undefined
-        },
-        on: {
-          modelValue(value) {
-            column.renderResizeWidth = Math.max(0, Number(value));
-          },
-          change() {
-            _vm.changeColumnWidth(column);
-          }
-        }
-      }) : renderEmptyElement($xeTableCustomPanel)]) : renderEmptyElement($xeTable), allowFixed ? h('td', {
-        class: 'vxe-table-custom-popup--column-item col--fixed'
-      }, [parent ? h('span', '-') : h('vxe-radio-group', {
-        props: {
-          value: column.renderFixed || '',
-          type: 'button',
-          size: 'mini',
-          disabled: isHidden,
-          options: [{
-            label: getI18n('vxe.custom.setting.fixedLeft'),
-            value: 'left',
-            disabled: isHidden || isMaxFixedColumn
-          }, {
-            label: getI18n('vxe.custom.setting.fixedUnset'),
-            value: '',
-            disabled: isHidden
-          }, {
-            label: getI18n('vxe.custom.setting.fixedRight'),
-            value: 'right',
-            disabled: isHidden || isMaxFixedColumn
-          }]
-        },
-        on: {
-          change({
-            label,
-            $event
-          }) {
-            _vm.changeFixedOption(column, label, $event);
-          }
-        }
-      })]) : renderEmptyElement($xeTable)]));
-    }
-  });
-  const scopedSlots = {
-    default: () => {
-      return h('div', {
-        ref: 'refBodyWrapperElem',
-        class: 'vxe-table-custom-popup--body-wrapper'
-      }, defaultSlot ? $xeTable.callSlot(defaultSlot, params, h) : [h('div', {
-        ref: 'refCustomBodyElem',
-        class: 'vxe-table-custom-popup--handle-wrapper'
-      }, [topSlot ? h('div', {
-        class: 'vxe-table-custom-popup--table-top'
-      }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), h('div', {
-        class: 'vxe-table-custom-popup--table-wrapper'
-      }, [h('table', {}, [h('colgroup', {}, [allowVisible ? h('col', {
-        class: 'vxe-table-custom-popup--table-col-seq'
-      }) : renderEmptyElement($xeTable), h('col', {
-        class: 'vxe-table-custom-popup--table-col-title'
-      }), allowResizable ? h('col', {
-        class: 'vxe-table-custom-popup--table-col-width'
-      }) : renderEmptyElement($xeTable), allowFixed ? h('col', {
-        class: 'vxe-table-custom-popup--table-col-fixed'
-      }) : renderEmptyElement($xeTable)]), h('thead', {}, [h('tr', {}, [allowVisible ? h('th', {}, [h('div', {
-        class: ['vxe-table-custom--checkbox-option', {
-          'is--checked': isAllChecked,
-          'is--indeterminate': isAllIndeterminate
-        }],
-        attrs: {
-          title: getI18n('vxe.table.allTitle')
-        },
-        on: {
-          click: _vm.allOptionEvent
-        }
-      }, [h('span', {
-        class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-      }), h('span', {
-        class: 'vxe-checkbox--label'
-      }, getI18n('vxe.toolbar.customAll'))])]) : renderEmptyElement($xeTable), h('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, getI18n('vxe.custom.setting.colResizable')) : renderEmptyElement($xeTable), allowFixed ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : renderEmptyElement($xeTable)])]), h('transition-group', {
-        class: 'vxe-table-custom--panel-list',
-        props: {
-          tag: 'tbody',
-          name: 'vxe-table-custom--list'
-        }
-      }, trVNs)])]), bottomSlot ? h('div', {
-        class: 'vxe-table-custom-popup--table-bottom'
-      }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), renderDragTip(h, _vm)]), !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel ? h($xeTable.getPivotTableAggregatePopupPanel(), {
-        props: {
-          customStore
-        }
-      }) : renderEmptyElement($xeTable)]);
-    },
-    footer: () => {
-      if (footerSlot) {
-        return $xeTable.callSlot(footerSlot, params, h);
-      }
-      return h('div', {
-        class: 'vxe-table-custom-popup--footer'
-      }, [h(VxeUIButtonComponent, {
-        props: {
-          content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
-          disabled: !isCustomStatus
-        },
-        on: {
-          click: _vm.resetCustomEvent
-        }
-      }), immediate ? h(VxeUIButtonComponent, {
-        props: {
-          content: customOpts.resetButtonText || getI18n('vxe.table.customClose')
-        },
-        on: {
-          click: _vm.cancelCloseEvent
-        }
-      }) : h(VxeUIButtonComponent, {
-        props: {
-          content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
-        },
-        on: {
-          click: _vm.cancelCustomEvent
-        }
-      }), immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
-        props: {
-          status: 'primary',
-          content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
-        },
-        on: {
-          click: _vm.confirmCustomEvent
-        }
-      })]);
-    }
-  };
-  if (headerSlot) {
-    scopedSlots.header = () => $xeTable.callSlot(headerSlot, params, h);
-  }
-  if (mode === 'drawer') {
-    return VxeUIDrawerComponent ? h(VxeUIDrawerComponent, {
-      key: 'drawer',
-      props: {
-        className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
-        value: customStore.visible,
-        title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
-        width: drawerOpts.width || Math.min(880, Math.floor(document.documentElement.clientWidth * 0.6)),
-        position: drawerOpts.position,
-        resize: !!drawerOpts.resize,
-        escClosable: !!drawerOpts.escClosable,
-        maskClosable: !!drawerOpts.maskClosable,
-        destroyOnClose: true,
-        showFooter: true
-      },
-      on: {
-        input(value) {
-          customStore.visible = value;
-        }
-      },
-      scopedSlots
-    }) : renderEmptyElement($xeTableCustomPanel);
-  }
-  return VxeUIModalComponent ? h(VxeUIModalComponent, {
-    key: 'modal',
-    props: {
-      className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
-      value: customStore.visible,
-      title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
-      width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
-      minWidth: modalOpts.minWidth || 700,
-      height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
-      minHeight: modalOpts.minHeight || 400,
-      showZoom: modalOpts.showZoom,
-      showMaximize: modalOpts.showMaximize,
-      showMinimize: modalOpts.showMinimize,
-      mask: modalOpts.mask,
-      lockView: modalOpts.lockView,
-      resize: modalOpts.resize,
-      escClosable: !!modalOpts.escClosable,
-      maskClosable: !!modalOpts.maskClosable,
-      destroyOnClose: true,
-      showFooter: true
-    },
-    on: {
-      input(value) {
-        customStore.visible = value;
-      }
-    },
-    scopedSlots
-  }) : renderEmptyElement($xeTableCustomPanel);
-};
-var _default = exports.default = {
+var _default = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeTableCustomPanel',
   props: {
     customStore: {
@@ -779,7 +108,7 @@ var _default = exports.default = {
       internalData
     };
   },
-  computed: {},
+  computed: Object.assign({}, {}),
   created() {
     const $xeTableCustomPanel = this;
     const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
@@ -812,22 +141,14 @@ var _default = exports.default = {
       }
     });
   },
-  render(h) {
-    const $xeTableCustomPanel = this;
-    const $xeTable = $xeTableCustomPanel.$xeTable;
-    const customOpts = $xeTable.computeCustomOpts;
-    if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
-      return renderPopupPanel(h, $xeTableCustomPanel);
-    }
-    return renderSimplePanel(h, $xeTableCustomPanel);
-  },
   methods: {
     handleWrapperMouseenterEvent(evnt) {
       const $xeTableCustomPanel = this;
+      const props = $xeTableCustomPanel;
       const $xeTable = $xeTableCustomPanel.$xeTable;
       const {
         customStore
-      } = this;
+      } = props;
       customStore.activeWrapper = true;
       $xeTable.customOpenEvent(evnt);
     },
@@ -1334,6 +655,693 @@ var _default = exports.default = {
         customPanelInternalData.prevDragPos = dragPos;
         showDropTip($xeTableCustomPanel, evnt, optEl, true, dragPos);
       }
+    },
+    renderDragTip(h) {
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const customPanelReactData = $xeTableCustomPanel.reactData;
+      const {
+        dragTipText
+      } = customPanelReactData;
+      const columnDragOpts = $xeTable.computeColumnDragOpts;
+      return h('div', {}, [h('div', {
+        ref: 'refDragLineElem',
+        class: ['vxe-table-custom-popup--drag-line', {
+          'is--guides': columnDragOpts.showGuidesStatus
+        }]
+      }), h('div', {
+        ref: 'refDragTipElem',
+        class: 'vxe-table-custom-popup--drag-tip'
+      }, [h('div', {
+        class: 'vxe-table-custom-popup--drag-tip-wrapper'
+      }, [h('div', {
+        class: 'vxe-table-custom-popup--drag-tip-status'
+      }, [h('span', {
+        class: ['vxe-table-custom-popup--drag-tip-normal-status', getIcon().TABLE_DRAG_STATUS_ROW]
+      }), h('span', {
+        class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+      }), h('span', {
+        class: ['vxe-table-custom-popup--drag-tip-group-status', getIcon().TABLE_DRAG_STATUS_AGG_GROUP]
+      }), h('span', {
+        class: ['vxe-table-custom-popup--drag-tip-values-status', getIcon().TABLE_DRAG_STATUS_AGG_VALUES]
+      }), h('span', {
+        class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
+      })]), h('div', {
+        class: 'vxe-table-custom-popup--drag-tip-content'
+      }, `${dragTipText || ''}`)])])]);
+    },
+    renderSimplePanel(h) {
+      const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      const $xeTableCustomPanel = this;
+      const props = $xeTableCustomPanel;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableProps = $xeTable;
+      const tableReactData = $xeTable;
+      const $xeGrid = $xeTable.$xeGrid;
+      const $xeGantt = $xeTable.$xeGantt;
+      const {
+        customStore
+      } = props;
+      const {
+        treeConfig,
+        rowGroupConfig,
+        aggregateConfig
+      } = tableProps;
+      const {
+        isCustomStatus,
+        customColumnList
+      } = tableReactData;
+      const customOpts = $xeTable.computeCustomOpts;
+      const {
+        immediate
+      } = customOpts;
+      const columnDragOpts = $xeTable.computeColumnDragOpts;
+      const {
+        maxHeight
+      } = customStore;
+      const {
+        checkMethod,
+        visibleMethod,
+        allowVisible,
+        allowSort,
+        allowFixed,
+        trigger,
+        placement
+      } = customOpts;
+      const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+      const {
+        isCrossDrag
+      } = columnDragOpts;
+      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;
+      // hover 触发
+      if (trigger === 'hover') {
+        customWrapperOns.mouseenter = $xeTableCustomPanel.handleWrapperMouseenterEvent;
+        customWrapperOns.mouseleave = $xeTableCustomPanel.handleWrapperMouseleaveEvent;
+      }
+      const params = {
+        $table: $xeTable,
+        $grid: $xeGrid,
+        $gantt: $xeGantt,
+        columns: customColumnList,
+        isAllChecked,
+        isAllIndeterminate,
+        isCustomStatus
+      };
+      _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
+        const isVisible = visibleMethod ? visibleMethod({
+          $table: $xeTable,
+          column
+        }) : true;
+        if (isVisible) {
+          const isChecked = column.renderVisible;
+          const isIndeterminate = column.halfVisible;
+          const isColGroup = column.children && column.children.length;
+          const colTitle = (0, _utils.formatText)(column.getTitle(), 1);
+          const isDisabled = checkMethod ? !checkMethod({
+            $table: $xeTable,
+            column
+          }) : false;
+          const isHidden = !isChecked;
+          colVNs.push(h('li', {
+            key: column.id,
+            attrs: {
+              colid: column.id
+            },
+            class: ['vxe-table-custom--option', `level--${column.level}`, {
+              'is--hidden': isDisabled || isHidden,
+              'is--group': isColGroup
+            }],
+            on: {
+              dragstart: $xeTableCustomPanel.sortDragstartEvent,
+              dragend: $xeTableCustomPanel.sortDragendEvent,
+              dragover: $xeTableCustomPanel.sortDragoverEvent
+            }
+          }, [allowVisible ? h('div', {
+            class: ['vxe-table-custom--checkbox-option', {
+              'is--checked': isChecked,
+              'is--indeterminate': isIndeterminate,
+              'is--disabled': isDisabled
+            }],
+            attrs: {
+              title: getI18n('vxe.custom.setting.colVisible')
+            },
+            on: {
+              click: evnt => {
+                if (!isDisabled) {
+                  $xeTableCustomPanel.changeCheckboxOption(column, evnt);
+                }
+              }
+            }
+          }, [h('span', {
+            class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+          })]) : renderEmptyElement($xeTable), h('div', {
+            class: 'vxe-table-custom--name-option'
+          }, [allowSort && ((isCrossDrag ? immediate : false) || column.level === 1) ? h('div', {
+            class: 'vxe-table-custom--sort-option'
+          }, [h('span', {
+            class: ['vxe-table-custom--sort-btn', {
+              'is--disabled': isHidden
+            }],
+            attrs: {
+              title: getI18n('vxe.custom.setting.sortHelpTip')
+            },
+            on: isHidden ? {} : {
+              mousedown: $xeTableCustomPanel.sortMousedownEvent,
+              mouseup: $xeTableCustomPanel.sortMouseupEvent
+            }
+          }, [h('i', {
+            class: getIcon().TABLE_CUSTOM_SORT
+          })])]) : renderEmptyElement($xeTable), 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(VxeUIButtonComponent, {
+            props: {
+              mode: 'text',
+              icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
+              status: column.renderFixed === 'left' ? 'primary' : '',
+              disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
+              title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft')
+            },
+            on: {
+              click: ({
+                $event
+              }) => {
+                $xeTableCustomPanel.changeFixedOption(column, 'left', $event);
+              }
+            }
+          }), h(VxeUIButtonComponent, {
+            props: {
+              mode: 'text',
+              icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
+              status: column.renderFixed === 'right' ? 'primary' : '',
+              disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
+              title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight')
+            },
+            on: {
+              click: ({
+                $event
+              }) => {
+                $xeTableCustomPanel.changeFixedOption(column, 'right', $event);
+              }
+            }
+          })]) : renderEmptyElement($xeTable)]));
+        }
+      });
+      return h('div', {
+        ref: 'refElem',
+        key: 'simple',
+        class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
+          'is--active': customStore.visible
+        }],
+        style: maxHeight && !['left', 'right'].includes(placement || '') ? {
+          maxHeight: `${maxHeight}px`
+        } : {}
+      }, customStore.visible ? [h('div', {
+        ref: 'refBodyWrapperElem',
+        class: 'vxe-table-custom-simple--body-wrapper'
+      }, [!treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel ? h($xeTable.getPivotTableAggregateSimplePanel(), {
+        props: {
+          customStore
+        }
+      }) : renderEmptyElement($xeTable), h('div', {
+        ref: 'refCustomBodyElem',
+        class: 'vxe-table-custom--handle-wrapper'
+      }, [h('div', {
+        class: 'vxe-table-custom--header'
+      }, headerSlot ? $xeTable.callSlot(headerSlot, params, h) : [h('ul', {
+        class: 'vxe-table-custom--panel-list'
+      }, [h('li', {
+        class: 'vxe-table-custom--option'
+      }, [allowVisible ? h('div', {
+        class: ['vxe-table-custom--checkbox-option', {
+          'is--checked': isAllChecked,
+          'is--indeterminate': isAllIndeterminate
+        }],
+        attrs: {
+          title: getI18n('vxe.table.allTitle')
+        },
+        on: {
+          click: $xeTableCustomPanel.allOptionEvent
+        }
+      }, [h('span', {
+        class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+      }), h('span', {
+        class: 'vxe-checkbox--label'
+      }, getI18n('vxe.toolbar.customAll'))]) : h('span', {
+        class: 'vxe-checkbox--label'
+      }, getI18n('vxe.table.customTitle'))])])]), h('div', {
+        class: 'vxe-table-custom--body'
+      }, [topSlot ? h('div', {
+        class: 'vxe-table-custom--panel-top'
+      }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), defaultSlot ? h('div', {
+        class: 'vxe-table-custom--panel-body'
+      }, $xeTable.callSlot(defaultSlot, params, h)) : h('transition-group', {
+        class: 'vxe-table-custom--panel-list',
+        props: {
+          name: 'vxe-table-custom--list',
+          tag: 'ul'
+        },
+        on: customWrapperOns
+      }, colVNs), bottomSlot ? h('div', {
+        class: 'vxe-table-custom--panel-bottom'
+      }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable)]), customOpts.showFooter ? h('div', {
+        class: 'vxe-table-custom--footer'
+      }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
+        class: 'vxe-table-custom--footer-buttons'
+      }, [h(VxeUIButtonComponent, {
+        props: {
+          mode: 'text',
+          content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
+          disabled: !isCustomStatus
+        },
+        on: {
+          click: $xeTableCustomPanel.resetCustomEvent
+        }
+      }), immediate ? h(VxeUIButtonComponent, {
+        props: {
+          mode: 'text',
+          content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
+        },
+        on: {
+          click: $xeTableCustomPanel.cancelCloseEvent
+        }
+      }) : h(VxeUIButtonComponent, {
+        props: {
+          mode: 'text',
+          content: customOpts.resetButtonText || getI18n('vxe.table.customCancel')
+        },
+        on: {
+          click: $xeTableCustomPanel.cancelCustomEvent
+        }
+      }), immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
+        props: {
+          mode: 'text',
+          status: 'primary',
+          content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
+        },
+        on: {
+          click: $xeTableCustomPanel.confirmCustomEvent
+        }
+      })])]) : null]), $xeTableCustomPanel.renderDragTip(h)])] : []);
+    },
+    renderPopupPanel(h) {
+      const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
+      const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
+      const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeNumberInput');
+      const $xeTableCustomPanel = this;
+      const props = $xeTableCustomPanel;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableProps = $xeTable;
+      const tableReactData = $xeTable;
+      const $xeGrid = $xeTable.$xeGrid;
+      const $xeGantt = $xeTable.$xeGantt;
+      const {
+        customStore
+      } = props;
+      const {
+        treeConfig,
+        rowGroupConfig,
+        aggregateConfig,
+        resizable: allResizable
+      } = tableProps;
+      const {
+        isCustomStatus,
+        customColumnList
+      } = tableReactData;
+      const customOpts = $xeTable.computeCustomOpts;
+      const {
+        immediate
+      } = customOpts;
+      const columnDragOpts = $xeTable.computeColumnDragOpts;
+      const {
+        mode,
+        modalOptions,
+        drawerOptions,
+        allowVisible,
+        allowSort,
+        allowFixed,
+        allowResizable,
+        checkMethod,
+        visibleMethod
+      } = customOpts;
+      const columnOpts = $xeTable.computeColumnOpts;
+      const {
+        maxFixedSize
+      } = columnOpts;
+      const resizableOpts = $xeTable.computeResizableOpts;
+      const {
+        minWidth: reMinWidth,
+        maxWidth: reMaxWidth
+      } = resizableOpts;
+      const modalOpts = Object.assign({}, modalOptions);
+      const drawerOpts = Object.assign({}, drawerOptions);
+      const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+      const {
+        isCrossDrag
+      } = columnDragOpts;
+      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 params = {
+        $table: $xeTable,
+        $grid: $xeGrid,
+        $gantt: $xeGantt,
+        columns: customColumnList,
+        isAllChecked,
+        isAllIndeterminate,
+        isCustomStatus
+      };
+      _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
+        const isVisible = visibleMethod ? visibleMethod({
+          $table: $xeTable,
+          column
+        }) : true;
+        if (isVisible) {
+          // 默认继承调整宽度
+          let customMinWidth = 0;
+          let customMaxWidth = 0;
+          if (allowResizable) {
+            const resizeParams = {
+              $table: $xeTable,
+              column,
+              columnIndex: index,
+              $columnIndex: index,
+              $rowIndex: -1
+            };
+            if (reMinWidth) {
+              customMinWidth = _xeUtils.default.toNumber(_xeUtils.default.isFunction(reMinWidth) ? reMinWidth(resizeParams) : reMinWidth);
+            }
+            if (reMaxWidth) {
+              customMaxWidth = _xeUtils.default.toNumber(_xeUtils.default.isFunction(reMaxWidth) ? reMaxWidth(resizeParams) : reMaxWidth);
+            }
+          }
+          const isChecked = column.renderVisible;
+          const isIndeterminate = column.halfVisible;
+          const colTitle = (0, _utils.formatText)(column.getTitle(), 1);
+          const isColGroup = column.children && column.children.length;
+          const isDisabled = checkMethod ? !checkMethod({
+            $table: $xeTable,
+            column
+          }) : false;
+          const isHidden = !isChecked;
+          trVNs.push(h('tr', {
+            key: column.id,
+            attrs: {
+              colid: column.id
+            },
+            class: [`vxe-table-custom-popup--row level--${column.level}`, {
+              'is--group': isColGroup
+            }],
+            on: {
+              dragstart: $xeTableCustomPanel.sortDragstartEvent,
+              dragend: $xeTableCustomPanel.sortDragendEvent,
+              dragover: $xeTableCustomPanel.sortDragoverEvent
+            }
+          }, [allowVisible ? h('td', {
+            class: 'vxe-table-custom-popup--column-item col--visible'
+          }, [h('div', {
+            class: ['vxe-table-custom--checkbox-option', {
+              'is--checked': isChecked,
+              'is--indeterminate': isIndeterminate,
+              'is--disabled': isDisabled
+            }],
+            attrs: {
+              title: getI18n('vxe.custom.setting.colVisible')
+            },
+            on: {
+              click: evnt => {
+                if (!isDisabled) {
+                  $xeTableCustomPanel.changeCheckboxOption(column, evnt);
+                }
+              }
+            }
+          }, [h('span', {
+            class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+          })])]) : renderEmptyElement($xeTable), h('td', {
+            class: 'vxe-table-custom-popup--column-item col--name'
+          }, [h('div', {
+            class: 'vxe-table-custom-popup--name'
+          }, [allowSort ? (isCrossDrag ? immediate : false) || column.level === 1 ? h('div', {
+            class: ['vxe-table-custom-popup--column-sort-btn', {
+              'is--disabled': isHidden
+            }],
+            attrs: {
+              title: getI18n('vxe.custom.setting.sortHelpTip')
+            },
+            on: isHidden ? {} : {
+              mousedown: $xeTableCustomPanel.sortMousedownEvent,
+              mouseup: $xeTableCustomPanel.sortMouseupEvent
+            }
+          }, [h('i', {
+            class: getIcon().TABLE_CUSTOM_SORT
+          })]) : h('div', {
+            class: 'vxe-table-custom-popup--column-sort-placeholder'
+          }) : renderEmptyElement($xeTable), column.type === 'html' ? h('div', {
+            key: '1',
+            class: 'vxe-table-custom-popup--title',
+            domProps: {
+              innerHTML: colTitle
+            }
+          }) : h('div', {
+            key: '0',
+            class: 'vxe-table-custom-popup--title',
+            attrs: {
+              title: colTitle
+            }
+          }, colTitle)])]), allowResizable ? h('td', {
+            class: 'vxe-table-custom-popup--column-item col--resizable'
+          }, [column.children && column.children.length || !(_xeUtils.default.isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? h('span', '-') : VxeUINumberInputComponent ? h(VxeUINumberInputComponent, {
+            props: {
+              type: 'integer',
+              immediate: false,
+              disabled: isHidden,
+              value: column.renderResizeWidth,
+              min: customMinWidth || undefined,
+              max: customMaxWidth || undefined
+            },
+            on: {
+              modelValue(value) {
+                column.renderResizeWidth = Math.max(0, Number(value));
+              },
+              change() {
+                $xeTableCustomPanel.changeColumnWidth(column);
+              }
+            }
+          }) : renderEmptyElement($xeTableCustomPanel)]) : renderEmptyElement($xeTable), allowFixed ? h('td', {
+            class: 'vxe-table-custom-popup--column-item col--fixed'
+          }, [parent ? h('span', '-') : h('vxe-radio-group', {
+            props: {
+              value: column.renderFixed || '',
+              type: 'button',
+              size: 'mini',
+              disabled: isHidden,
+              options: [{
+                label: getI18n('vxe.custom.setting.fixedLeft'),
+                value: 'left',
+                disabled: isHidden || isMaxFixedColumn
+              }, {
+                label: getI18n('vxe.custom.setting.fixedUnset'),
+                value: '',
+                disabled: isHidden
+              }, {
+                label: getI18n('vxe.custom.setting.fixedRight'),
+                value: 'right',
+                disabled: isHidden || isMaxFixedColumn
+              }]
+            },
+            on: {
+              change({
+                label,
+                $event
+              }) {
+                $xeTableCustomPanel.changeFixedOption(column, label, $event);
+              }
+            }
+          })]) : renderEmptyElement($xeTable)]));
+        }
+      });
+      const scopedSlots = {
+        default: () => {
+          return h('div', {
+            ref: 'refBodyWrapperElem',
+            class: 'vxe-table-custom-popup--body-wrapper'
+          }, defaultSlot ? $xeTable.callSlot(defaultSlot, params, h) : [h('div', {
+            ref: 'refCustomBodyElem',
+            class: 'vxe-table-custom-popup--handle-wrapper'
+          }, [topSlot ? h('div', {
+            class: 'vxe-table-custom-popup--table-top'
+          }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), h('div', {
+            class: 'vxe-table-custom-popup--table-wrapper'
+          }, [h('table', {}, [h('colgroup', {}, [allowVisible ? h('col', {
+            class: 'vxe-table-custom-popup--table-col-seq'
+          }) : renderEmptyElement($xeTable), h('col', {
+            class: 'vxe-table-custom-popup--table-col-title'
+          }), allowResizable ? h('col', {
+            class: 'vxe-table-custom-popup--table-col-width'
+          }) : renderEmptyElement($xeTable), allowFixed ? h('col', {
+            class: 'vxe-table-custom-popup--table-col-fixed'
+          }) : renderEmptyElement($xeTable)]), h('thead', {}, [h('tr', {}, [allowVisible ? h('th', {}, [h('div', {
+            class: ['vxe-table-custom--checkbox-option', {
+              'is--checked': isAllChecked,
+              'is--indeterminate': isAllIndeterminate
+            }],
+            attrs: {
+              title: getI18n('vxe.table.allTitle')
+            },
+            on: {
+              click: $xeTableCustomPanel.allOptionEvent
+            }
+          }, [h('span', {
+            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+          }), h('span', {
+            class: 'vxe-checkbox--label'
+          }, getI18n('vxe.toolbar.customAll'))])]) : renderEmptyElement($xeTable), h('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, getI18n('vxe.custom.setting.colResizable')) : renderEmptyElement($xeTable), allowFixed ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : renderEmptyElement($xeTable)])]), h('transition-group', {
+            class: 'vxe-table-custom--panel-list',
+            props: {
+              tag: 'tbody',
+              name: 'vxe-table-custom--list'
+            }
+          }, trVNs)])]), bottomSlot ? h('div', {
+            class: 'vxe-table-custom-popup--table-bottom'
+          }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), $xeTableCustomPanel.renderDragTip(h)]), !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel ? h($xeTable.getPivotTableAggregatePopupPanel(), {
+            props: {
+              customStore
+            }
+          }) : renderEmptyElement($xeTable)]);
+        },
+        footer: () => {
+          if (footerSlot) {
+            return $xeTable.callSlot(footerSlot, params, h);
+          }
+          return h('div', {
+            class: 'vxe-table-custom-popup--footer'
+          }, [h(VxeUIButtonComponent, {
+            props: {
+              content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
+              disabled: !isCustomStatus
+            },
+            on: {
+              click: $xeTableCustomPanel.resetCustomEvent
+            }
+          }), immediate ? h(VxeUIButtonComponent, {
+            props: {
+              content: customOpts.resetButtonText || getI18n('vxe.table.customClose')
+            },
+            on: {
+              click: $xeTableCustomPanel.cancelCloseEvent
+            }
+          }) : h(VxeUIButtonComponent, {
+            props: {
+              content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
+            },
+            on: {
+              click: $xeTableCustomPanel.cancelCustomEvent
+            }
+          }), immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
+            props: {
+              status: 'primary',
+              content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
+            },
+            on: {
+              click: $xeTableCustomPanel.confirmCustomEvent
+            }
+          })]);
+        }
+      };
+      if (headerSlot) {
+        scopedSlots.header = () => $xeTable.callSlot(headerSlot, params, h);
+      }
+      if (mode === 'drawer') {
+        return VxeUIDrawerComponent ? h(VxeUIDrawerComponent, {
+          key: 'drawer',
+          props: {
+            className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
+            value: customStore.visible,
+            title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
+            width: drawerOpts.width || Math.min(880, Math.floor(document.documentElement.clientWidth * 0.6)),
+            position: drawerOpts.position,
+            resize: !!drawerOpts.resize,
+            escClosable: !!drawerOpts.escClosable,
+            maskClosable: !!drawerOpts.maskClosable,
+            destroyOnClose: true,
+            showFooter: true
+          },
+          on: {
+            input(value) {
+              customStore.visible = value;
+            }
+          },
+          scopedSlots
+        }) : renderEmptyElement($xeTableCustomPanel);
+      }
+      return VxeUIModalComponent ? h(VxeUIModalComponent, {
+        key: 'modal',
+        props: {
+          className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
+          value: customStore.visible,
+          title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
+          width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
+          minWidth: modalOpts.minWidth || 700,
+          height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
+          minHeight: modalOpts.minHeight || 400,
+          showZoom: modalOpts.showZoom,
+          showMaximize: modalOpts.showMaximize,
+          showMinimize: modalOpts.showMinimize,
+          mask: modalOpts.mask,
+          lockView: modalOpts.lockView,
+          resize: modalOpts.resize,
+          escClosable: !!modalOpts.escClosable,
+          maskClosable: !!modalOpts.maskClosable,
+          destroyOnClose: true,
+          showFooter: true
+        },
+        on: {
+          input(value) {
+            customStore.visible = value;
+          }
+        },
+        scopedSlots
+      }) : renderEmptyElement($xeTableCustomPanel);
+    },
+    renderVN(h) {
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const customOpts = $xeTable.computeCustomOpts;
+      if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
+        return $xeTableCustomPanel.renderPopupPanel(h);
+      }
+      return $xeTableCustomPanel.renderSimplePanel(h);
     }
+  },
+  render(h) {
+    return this.renderVN(h);
   }
-};
+});
+/* define-vxe-component end */