vxe-table 3.19.39 → 3.20.0-beta.1

package/lib/table/module/export/export-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 _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _utils = require("../../../ui/src/utils");
@@ -15,19 +16,18 @@ const {
   globalMixins,
   renderEmptyElement
 } = _ui.VxeUI;
-var _default = exports.default = {
+var _default = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeTableExportPanel',
   mixins: [globalMixins.sizeMixin],
   props: {
-    defaultOptions: Object,
-    storeData: Object
-  },
-  components: {
-    // VxeModal,
-    // VxeInput,
-    // VxeCheckbox,
-    // VxeSelect,
-    // VxeOption
+    defaultOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    storeData: {
+      type: Object,
+      default: () => ({})
+    }
   },
   inject: {
     $xeTable: {
@@ -35,37 +35,56 @@ var _default = exports.default = {
     }
   },
   data() {
-    return {
+    const reactData = {
       isAll: false,
       isIndeterminate: false,
       loading: false
     };
+    return {
+      reactData
+    };
   },
-  computed: {
-    checkedAll() {
-      return this.storeData.columns.every(column => column.checked);
+  computed: Object.assign(Object.assign({}, {}), {
+    computeCheckedAll() {
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const {
+        storeData
+      } = props;
+      return storeData.columns.every(column => column.checked);
     },
-    showSheet() {
-      return ['html', 'xml', 'xlsx', 'pdf'].indexOf(this.defaultOptions.type) > -1;
+    computeShowSheet() {
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const {
+        defaultOptions
+      } = props;
+      return ['html', 'xml', 'xlsx', 'pdf'].indexOf(defaultOptions.type) > -1;
     },
-    supportMerge() {
+    computeSupportMerge() {
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
       const {
         storeData,
         defaultOptions
-      } = this;
+      } = props;
       return !defaultOptions.original && defaultOptions.mode === 'current' && (storeData.isPrint || ['html', 'xlsx'].indexOf(defaultOptions.type) > -1);
     },
     // computeSupportGroup () {
-    //   const { defaultOptions } = this
+    //   const $xeExportPanel = this
+    //   const props = $xeExportPanel
+    //   const { defaultOptions } = props
     //   return ['html', 'xlsx', 'csv', 'txt'].indexOf(defaultOptions.type) > -1
     // },
-    supportStyle() {
+    computeSupportStyle() {
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
       const {
         defaultOptions
-      } = this;
+      } = props;
       return !defaultOptions.original && ['xlsx'].indexOf(defaultOptions.type) > -1;
     }
-  },
+  }),
   created() {
     const $xeTableExportPanel = this;
     const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
@@ -91,344 +110,24 @@ var _default = exports.default = {
       }
     });
   },
-  render(h) {
-    const $xeTable = this.$xeTable;
-    const $xeGrid = $xeTable.$xeGrid;
-    const $xeGantt = $xeTable.$xeGantt;
-    const {
-      _e,
-      checkedAll,
-      isAll: isAllChecked,
-      isIndeterminate: isAllIndeterminate,
-      showSheet,
-      supportMerge,
-      supportStyle,
-      defaultOptions,
-      storeData
-    } = this;
-    const {
-      hasTree,
-      hasMerge,
-      isPrint,
-      hasColgroup,
-      columns
-    } = storeData;
-    const {
-      isHeader
-    } = defaultOptions;
-    // const supportGroup = this.computeSupportGroup
-    const slots = defaultOptions.slots || {};
-    const topSlot = slots.top;
-    const bottomSlot = slots.bottom;
-    const defaultSlot = slots.default;
-    const footerSlot = slots.footer;
-    const parameterSlot = slots.parameter;
-    const cols = [];
-    _xeUtils.default.eachTree(columns, column => {
-      const colTitle = (0, _utils.formatText)(column.getTitle(), 1);
-      const isColGroup = column.children && column.children.length;
-      const isChecked = column.checked;
-      const indeterminate = column.halfChecked;
-      const isHtml = column.type === 'html';
-      cols.push(h('li', {
-        class: ['vxe-table-export--panel-column-option', `level--${column.level}`, {
-          'is--group': isColGroup,
-          'is--checked': isChecked,
-          'is--indeterminate': indeterminate,
-          'is--disabled': column.disabled
-        }],
-        attrs: {
-          title: colTitle
-        },
-        on: {
-          click: () => {
-            if (!column.disabled) {
-              this.changeOption(column);
-            }
-          }
-        }
-      }, [h('span', {
-        class: ['vxe-checkbox--icon', indeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-      }), isHtml ? h('span', {
-        key: '1',
-        class: 'vxe-checkbox--label',
-        domProps: {
-          innerHTML: colTitle
-        }
-      }) : h('span', {
-        key: '0',
-        class: 'vxe-checkbox--label'
-      }, colTitle)]));
-    });
-    return h('vxe-modal', {
-      ref: 'modal',
-      props: {
-        id: 'VXE_EXPORT_MODAL',
-        value: storeData.visible,
-        title: getI18n(isPrint ? 'vxe.export.printTitle' : 'vxe.export.expTitle'),
-        width: 660,
-        minWidth: 500,
-        minHeight: 400,
-        mask: true,
-        lockView: true,
-        showFooter: true,
-        escClosable: true,
-        maskClosable: true,
-        showMaximize: true,
-        resize: true,
-        loading: this.loading
-      },
-      on: {
-        input(value) {
-          storeData.visible = value;
-        },
-        show: this.showEvent
-      },
-      scopedSlots: {
-        default: () => {
-          const params = {
-            $table: $xeTable,
-            $grid: $xeGrid,
-            $gantt: $xeGantt,
-            options: defaultOptions,
-            columns,
-            params: defaultOptions.params
-          };
-          const hasEmptyData = defaultOptions.mode === 'empty';
-          return h('div', {
-            class: 'vxe-table-export--panel'
-          }, [topSlot ? h('div', {
-            class: 'vxe-table-export--panel-top'
-          }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement(this), h('div', {
-            class: 'vxe-table-export--panel-body'
-          }, defaultSlot ? $xeTable.callSlot(defaultSlot, params, h) : [h('table', {
-            attrs: {
-              class: 'vxe-table-export--panel-table',
-              cellspacing: 0,
-              cellpadding: 0,
-              border: 0
-            }
-          }, [h('tbody', [[isPrint ? _e() : h('tr', [h('td', getI18n('vxe.export.expName')), h('td', [h('vxe-input', {
-            ref: 'filename',
-            props: {
-              value: defaultOptions.filename,
-              type: 'text',
-              clearable: true,
-              placeholder: getI18n('vxe.export.expNamePlaceholder')
-            },
-            on: {
-              modelValue(value) {
-                defaultOptions.filename = value;
-              }
-            }
-          })])]), isPrint ? _e() : h('tr', [h('td', getI18n('vxe.export.expType')), h('td', [h('vxe-select', {
-            props: {
-              value: defaultOptions.type,
-              options: storeData.typeList
-            },
-            on: {
-              modelValue(value) {
-                defaultOptions.type = value;
-              }
-            }
-          })])]), isPrint || showSheet ? h('tr', [h('td', getI18n('vxe.export.expSheetName')), h('td', [h('vxe-input', {
-            ref: 'sheetname',
-            props: {
-              value: defaultOptions.sheetName,
-              type: 'text',
-              clearable: true,
-              placeholder: getI18n('vxe.export.expSheetNamePlaceholder')
-            },
-            on: {
-              modelValue(value) {
-                defaultOptions.sheetName = value;
-              }
-            }
-          })])]) : _e(), h('tr', [h('td', getI18n('vxe.export.expMode')), h('td', [h('vxe-select', {
-            props: {
-              value: defaultOptions.mode,
-              options: storeData.modeList
-            },
-            on: {
-              modelValue(value) {
-                defaultOptions.mode = value;
-              }
-            }
-          })])]), h('tr', [h('td', [getI18n('vxe.export.expColumn')]), h('td', [h('div', {
-            class: 'vxe-table-export--panel-column'
-          }, [h('ul', {
-            class: 'vxe-table-export--panel-column-header'
-          }, [h('li', {
-            class: ['vxe-table-export--panel-column-option', {
-              'is--checked': isAllChecked,
-              'is--indeterminate': isAllIndeterminate
-            }],
-            attrs: {
-              title: getI18n('vxe.table.allTitle')
-            },
-            on: {
-              click: this.allColumnEvent
-            }
-          }, [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.export.expCurrentColumn'))])]), h('ul', {
-            class: 'vxe-table-export--panel-column-body'
-          }, cols)])])]), h('tr', [h('td', getI18n('vxe.export.expOpts')), parameterSlot ? h('td', [h('div', {
-            class: 'vxe-table-export--panel-option-row'
-          }, $xeTable.callSlot(parameterSlot, params, h))]) : h('td', [h('div', {
-            class: 'vxe-table-export--panel-option-row'
-          }, [h('vxe-checkbox', {
-            props: {
-              value: hasEmptyData || isHeader,
-              disabled: hasEmptyData,
-              title: getI18n('vxe.export.expHeaderTitle'),
-              content: getI18n('vxe.export.expOptHeader')
-            },
-            on: {
-              input(value) {
-                defaultOptions.isHeader = value;
-              }
-            }
-          }), h('vxe-checkbox', {
-            props: {
-              value: isHeader ? defaultOptions.isTitle : false,
-              disabled: !isHeader,
-              title: getI18n('vxe.export.expTitleTitle'),
-              content: getI18n('vxe.export.expOptTitle')
-            },
-            on: {
-              input(value) {
-                defaultOptions.isTitle = value;
-              }
-            }
-          }), h('vxe-checkbox', {
-            props: {
-              value: isHeader && hasColgroup && supportMerge ? defaultOptions.isColgroup : false,
-              disabled: !isHeader || !hasColgroup || !supportMerge,
-              title: getI18n('vxe.export.expColgroupTitle'),
-              content: getI18n('vxe.export.expOptColgroup')
-            },
-            on: {
-              input(value) {
-                defaultOptions.isColgroup = value;
-              }
-            }
-          })]), h('div', {
-            class: 'vxe-table-export--panel-option-row'
-          }, [h('vxe-checkbox', {
-            props: {
-              value: hasEmptyData ? false : defaultOptions.original,
-              disabled: hasEmptyData,
-              title: getI18n('vxe.export.expOriginalTitle'),
-              content: getI18n('vxe.export.expOptOriginal')
-            },
-            on: {
-              input(value) {
-                defaultOptions.original = value;
-              }
-            }
-          }), h('vxe-checkbox', {
-            props: {
-              value: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false,
-              disabled: hasEmptyData || !hasMerge || !supportMerge || !checkedAll,
-              title: getI18n('vxe.export.expMergeTitle'),
-              content: getI18n('vxe.export.expOptMerge')
-            },
-            on: {
-              input(value) {
-                defaultOptions.isMerge = value;
-              }
-            }
-          }), isPrint ? _e() : h('vxe-checkbox', {
-            props: {
-              value: supportStyle ? defaultOptions.useStyle : false,
-              disabled: !supportStyle,
-              title: getI18n('vxe.export.expUseStyleTitle'),
-              content: getI18n('vxe.export.expOptUseStyle')
-            },
-            on: {
-              input(value) {
-                defaultOptions.useStyle = value;
-              }
-            }
-          }), h('vxe-checkbox', {
-            props: {
-              value: hasTree ? defaultOptions.isAllExpand : false,
-              disabled: hasEmptyData || !hasTree,
-              title: getI18n('vxe.export.expAllExpandTitle'),
-              content: getI18n('vxe.export.expOptAllExpand')
-            },
-            on: {
-              input(value) {
-                defaultOptions.isAllExpand = value;
-              }
-            }
-          })]), h('div', {
-            class: 'vxe-table-export--panel-option-row'
-          }, [h('vxe-checkbox', {
-            props: {
-              value: defaultOptions.isFooter,
-              disabled: !storeData.hasFooter,
-              title: getI18n('vxe.export.expFooterTitle'),
-              content: getI18n('vxe.export.expOptFooter')
-            },
-            on: {
-              input(value) {
-                defaultOptions.isFooter = value;
-              }
-            }
-          })])])])]])])]), bottomSlot ? h('div', {
-            class: 'vxe-table-export--panel-bottom'
-          }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement(this)]);
-        },
-        footer: () => {
-          const params = {
-            $table: $xeTable,
-            $grid: $xeGrid,
-            $gantt: $xeGantt,
-            options: defaultOptions,
-            columns,
-            params: defaultOptions.params
-          };
-          return h('div', {
-            class: 'vxe-table-export--panel-footer'
-          }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
-            class: 'vxe-table-export--panel-btns'
-          }, [h('vxe-button', {
-            props: {
-              content: getI18n('vxe.export.expCancel')
-            },
-            on: {
-              click: this.cancelEvent
-            }
-          }), h('vxe-button', {
-            ref: 'confirmBtn',
-            props: {
-              status: 'primary',
-              content: getI18n(isPrint ? 'vxe.export.expPrint' : 'vxe.export.expConfirm')
-            },
-            on: {
-              click: this.confirmEvent
-            }
-          })])]);
-        }
-      }
-    });
-  },
   methods: {
     changeOption(column) {
+      const $xeExportPanel = this;
       const isChecked = !column.checked;
       _xeUtils.default.eachTree([column], item => {
         item.checked = isChecked;
         item.halfChecked = false;
       });
-      this.handleOptionCheck(column);
-      this.checkStatus();
+      $xeExportPanel.handleOptionCheck(column);
+      $xeExportPanel.checkStatus();
     },
     handleOptionCheck(column) {
-      const matchObj = _xeUtils.default.findTree(this.storeData.columns, item => item === column);
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const {
+        storeData
+      } = props;
+      const matchObj = _xeUtils.default.findTree(storeData.columns, item => item === column);
       if (matchObj && matchObj.parent) {
         const {
           parent
@@ -436,49 +135,61 @@ var _default = exports.default = {
         if (parent.children && parent.children.length) {
           parent.checked = parent.children.every(column => column.checked);
           parent.halfChecked = !parent.checked && parent.children.some(column => column.checked || column.halfChecked);
-          this.handleOptionCheck(parent);
+          $xeExportPanel.handleOptionCheck(parent);
         }
       }
     },
     checkStatus() {
-      const columns = this.storeData.columns;
-      this.isAll = columns.every(column => column.disabled || column.checked);
-      this.isIndeterminate = !this.isAll && columns.some(column => !column.disabled && (column.checked || column.halfChecked));
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const reactData = $xeExportPanel.reactData;
+      const {
+        storeData
+      } = props;
+      const columns = storeData.columns;
+      reactData.isAll = columns.every(column => column.disabled || column.checked);
+      reactData.isIndeterminate = !reactData.isAll && columns.some(column => !column.disabled && (column.checked || column.halfChecked));
     },
     allColumnEvent() {
-      const isAll = !this.isAll;
-      _xeUtils.default.eachTree(this.storeData.columns, column => {
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const reactData = $xeExportPanel.reactData;
+      const {
+        storeData
+      } = props;
+      const isAll = !reactData.isAll;
+      _xeUtils.default.eachTree(storeData.columns, column => {
         if (!column.disabled) {
           column.checked = isAll;
           column.halfChecked = false;
         }
       });
-      this.isAll = isAll;
-      this.checkStatus();
+      reactData.isAll = isAll;
+      $xeExportPanel.checkStatus();
     },
     showEvent() {
-      this.$nextTick(() => {
-        const {
-          $refs
-        } = this;
-        const targetElem = $refs.filename || $refs.sheetname || $refs.confirmBtn;
+      const $xeExportPanel = this;
+      $xeExportPanel.$nextTick(() => {
+        const targetElem = $xeExportPanel.$refs.filename || $xeExportPanel.$refs.sheetname || $xeExportPanel.$refs.confirmBtn;
         if (targetElem) {
           targetElem.focus();
         }
       });
-      this.checkStatus();
+      $xeExportPanel.checkStatus();
     },
     getExportOption() {
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
       const {
-        checkedAll,
         storeData,
-        defaultOptions,
-        supportMerge
-      } = this;
+        defaultOptions
+      } = props;
       const {
         hasMerge,
         columns
       } = storeData;
+      const checkedAll = $xeExportPanel.computeCheckedAll;
+      const supportMerge = $xeExportPanel.computeSupportMerge;
       const expColumns = _xeUtils.default.searchTree(columns, column => column.checked, {
         children: 'children',
         mapChildren: 'childNodes',
@@ -490,30 +201,385 @@ var _default = exports.default = {
       });
     },
     cancelEvent() {
-      this.storeData.visible = false;
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const {
+        storeData
+      } = props;
+      storeData.visible = false;
     },
-    confirmEvent(evnt) {
-      if (this.storeData.isPrint) {
-        this.printEvent(evnt);
+    confirmEvent() {
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const {
+        storeData
+      } = props;
+      if (storeData.isPrint) {
+        $xeExportPanel.printEvent();
       } else {
-        this.exportEvent(evnt);
+        $xeExportPanel.exportEvent();
       }
     },
     printEvent() {
-      const $xeTable = this.$parent;
-      this.storeData.visible = false;
-      $xeTable.print(Object.assign({}, $xeTable.printOpts, this.getExportOption()));
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const $xeTable = $xeExportPanel.$xeTable;
+      const {
+        storeData
+      } = props;
+      storeData.visible = false;
+      $xeTable.print(Object.assign({}, $xeTable.printOpts, $xeExportPanel.getExportOption()));
     },
     exportEvent() {
-      const $xeTable = this.$xeTable;
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const reactData = $xeExportPanel.reactData;
+      const $xeTable = $xeExportPanel.$xeTable;
+      const {
+        storeData
+      } = props;
       const exportOpts = $xeTable.exportOpts;
-      this.loading = true;
-      $xeTable.exportData(Object.assign({}, exportOpts, this.getExportOption())).then(() => {
-        this.loading = false;
-        this.storeData.visible = false;
+      reactData.loading = true;
+      $xeTable.exportData(Object.assign({}, exportOpts, $xeExportPanel.getExportOption())).then(() => {
+        reactData.loading = false;
+        storeData.visible = false;
       }).catch(() => {
-        this.loading = false;
+        reactData.loading = false;
+      });
+    },
+    renderVN(h) {
+      const $xeExportPanel = this;
+      const props = $xeExportPanel;
+      const reactData = $xeExportPanel.reactData;
+      const $xeTable = $xeExportPanel.$xeTable;
+      const $xeGrid = $xeTable.$xeGrid;
+      const $xeGantt = $xeTable.$xeGantt;
+      const {
+        defaultOptions,
+        storeData
+      } = props;
+      const {
+        isAll: isAllChecked,
+        isIndeterminate: isAllIndeterminate
+      } = reactData;
+      const {
+        hasTree,
+        hasMerge,
+        isPrint,
+        hasColgroup,
+        columns
+      } = storeData;
+      const {
+        isHeader
+      } = defaultOptions;
+      const colVNs = [];
+      const checkedAll = $xeExportPanel.computeCheckedAll;
+      const showSheet = $xeExportPanel.computeShowSheet;
+      const supportMerge = $xeExportPanel.computeSupportMerge;
+      const supportStyle = $xeExportPanel.computeSupportStyle;
+      // const supportGroup = $xeExportPanel.computeSupportGroup
+      const slots = defaultOptions.slots || {};
+      const topSlot = slots.top;
+      const bottomSlot = slots.bottom;
+      const defaultSlot = slots.default;
+      const footerSlot = slots.footer;
+      const parameterSlot = slots.parameter;
+      _xeUtils.default.eachTree(columns, column => {
+        const colTitle = (0, _utils.formatText)(column.getTitle(), 1);
+        const isColGroup = column.children && column.children.length;
+        const isChecked = column.checked;
+        const indeterminate = column.halfChecked;
+        const isHtml = column.type === 'html';
+        colVNs.push(h('li', {
+          class: ['vxe-table-export--panel-column-option', `level--${column.level}`, {
+            'is--group': isColGroup,
+            'is--checked': isChecked,
+            'is--indeterminate': indeterminate,
+            'is--disabled': column.disabled
+          }],
+          attrs: {
+            title: colTitle
+          },
+          on: {
+            click: () => {
+              if (!column.disabled) {
+                $xeExportPanel.changeOption(column);
+              }
+            }
+          }
+        }, [h('span', {
+          class: ['vxe-checkbox--icon', indeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+        }), isHtml ? h('span', {
+          key: '1',
+          class: 'vxe-checkbox--label',
+          domProps: {
+            innerHTML: colTitle
+          }
+        }) : h('span', {
+          key: '0',
+          class: 'vxe-checkbox--label'
+        }, colTitle)]));
+      });
+      return h('vxe-modal', {
+        ref: 'modal',
+        props: {
+          id: 'VXE_EXPORT_MODAL',
+          value: storeData.visible,
+          title: getI18n(isPrint ? 'vxe.export.printTitle' : 'vxe.export.expTitle'),
+          width: 660,
+          minWidth: 500,
+          minHeight: 400,
+          mask: true,
+          lockView: true,
+          showFooter: true,
+          escClosable: true,
+          maskClosable: true,
+          showMaximize: true,
+          resize: true,
+          loading: reactData.loading
+        },
+        on: {
+          input(value) {
+            storeData.visible = value;
+          },
+          show: $xeExportPanel.showEvent
+        },
+        scopedSlots: {
+          default() {
+            const params = {
+              $table: $xeTable,
+              $grid: $xeGrid,
+              $gantt: $xeGantt,
+              options: defaultOptions,
+              columns,
+              params: defaultOptions.params
+            };
+            const hasEmptyData = defaultOptions.mode === 'empty';
+            return h('div', {
+              class: 'vxe-table-export--panel'
+            }, [topSlot ? h('div', {
+              class: 'vxe-table-export--panel-top'
+            }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), h('div', {
+              class: 'vxe-table-export--panel-body'
+            }, defaultSlot ? $xeTable.callSlot(defaultSlot, params, h) : [h('table', {
+              attrs: {
+                class: 'vxe-table-export--panel-table',
+                cellspacing: 0,
+                cellpadding: 0,
+                border: 0
+              }
+            }, [h('tbody', [[isPrint ? renderEmptyElement($xeTable) : h('tr', [h('td', getI18n('vxe.export.expName')), h('td', [h('vxe-input', {
+              ref: 'filename',
+              props: {
+                value: defaultOptions.filename,
+                type: 'text',
+                clearable: true,
+                placeholder: getI18n('vxe.export.expNamePlaceholder')
+              },
+              on: {
+                modelValue(value) {
+                  defaultOptions.filename = value;
+                }
+              }
+            })])]), isPrint ? renderEmptyElement($xeTable) : h('tr', [h('td', getI18n('vxe.export.expType')), h('td', [h('vxe-select', {
+              props: {
+                value: defaultOptions.type,
+                options: storeData.typeList
+              },
+              on: {
+                modelValue(value) {
+                  defaultOptions.type = value;
+                }
+              }
+            })])]), isPrint || showSheet ? h('tr', [h('td', getI18n('vxe.export.expSheetName')), h('td', [h('vxe-input', {
+              ref: 'sheetname',
+              props: {
+                value: defaultOptions.sheetName,
+                type: 'text',
+                clearable: true,
+                placeholder: getI18n('vxe.export.expSheetNamePlaceholder')
+              },
+              on: {
+                modelValue(value) {
+                  defaultOptions.sheetName = value;
+                }
+              }
+            })])]) : renderEmptyElement($xeTable), h('tr', [h('td', getI18n('vxe.export.expMode')), h('td', [h('vxe-select', {
+              props: {
+                value: defaultOptions.mode,
+                options: storeData.modeList
+              },
+              on: {
+                modelValue(value) {
+                  defaultOptions.mode = value;
+                }
+              }
+            })])]), h('tr', [h('td', [getI18n('vxe.export.expColumn')]), h('td', [h('div', {
+              class: 'vxe-table-export--panel-column'
+            }, [h('ul', {
+              class: 'vxe-table-export--panel-column-header'
+            }, [h('li', {
+              class: ['vxe-table-export--panel-column-option', {
+                'is--checked': isAllChecked,
+                'is--indeterminate': isAllIndeterminate
+              }],
+              attrs: {
+                title: getI18n('vxe.table.allTitle')
+              },
+              on: {
+                click: $xeExportPanel.allColumnEvent
+              }
+            }, [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.export.expCurrentColumn'))])]), h('ul', {
+              class: 'vxe-table-export--panel-column-body'
+            }, colVNs)])])]), h('tr', [h('td', getI18n('vxe.export.expOpts')), parameterSlot ? h('td', [h('div', {
+              class: 'vxe-table-export--panel-option-row'
+            }, $xeTable.callSlot(parameterSlot, params, h))]) : h('td', [h('div', {
+              class: 'vxe-table-export--panel-option-row'
+            }, [h('vxe-checkbox', {
+              props: {
+                value: hasEmptyData || isHeader,
+                disabled: hasEmptyData,
+                title: getI18n('vxe.export.expHeaderTitle'),
+                content: getI18n('vxe.export.expOptHeader')
+              },
+              on: {
+                input(value) {
+                  defaultOptions.isHeader = value;
+                }
+              }
+            }), h('vxe-checkbox', {
+              props: {
+                value: isHeader ? defaultOptions.isTitle : false,
+                disabled: !isHeader,
+                title: getI18n('vxe.export.expTitleTitle'),
+                content: getI18n('vxe.export.expOptTitle')
+              },
+              on: {
+                input(value) {
+                  defaultOptions.isTitle = value;
+                }
+              }
+            }), h('vxe-checkbox', {
+              props: {
+                value: isHeader && hasColgroup && supportMerge ? defaultOptions.isColgroup : false,
+                disabled: !isHeader || !hasColgroup || !supportMerge,
+                title: getI18n('vxe.export.expColgroupTitle'),
+                content: getI18n('vxe.export.expOptColgroup')
+              },
+              on: {
+                input(value) {
+                  defaultOptions.isColgroup = value;
+                }
+              }
+            })]), h('div', {
+              class: 'vxe-table-export--panel-option-row'
+            }, [h('vxe-checkbox', {
+              props: {
+                value: hasEmptyData ? false : defaultOptions.original,
+                disabled: hasEmptyData,
+                title: getI18n('vxe.export.expOriginalTitle'),
+                content: getI18n('vxe.export.expOptOriginal')
+              },
+              on: {
+                input(value) {
+                  defaultOptions.original = value;
+                }
+              }
+            }), h('vxe-checkbox', {
+              props: {
+                value: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false,
+                disabled: hasEmptyData || !hasMerge || !supportMerge || !checkedAll,
+                title: getI18n('vxe.export.expMergeTitle'),
+                content: getI18n('vxe.export.expOptMerge')
+              },
+              on: {
+                input(value) {
+                  defaultOptions.isMerge = value;
+                }
+              }
+            }), isPrint ? renderEmptyElement($xeTable) : h('vxe-checkbox', {
+              props: {
+                value: supportStyle ? defaultOptions.useStyle : false,
+                disabled: !supportStyle,
+                title: getI18n('vxe.export.expUseStyleTitle'),
+                content: getI18n('vxe.export.expOptUseStyle')
+              },
+              on: {
+                input(value) {
+                  defaultOptions.useStyle = value;
+                }
+              }
+            }), h('vxe-checkbox', {
+              props: {
+                value: hasTree ? defaultOptions.isAllExpand : false,
+                disabled: hasEmptyData || !hasTree,
+                title: getI18n('vxe.export.expAllExpandTitle'),
+                content: getI18n('vxe.export.expOptAllExpand')
+              },
+              on: {
+                input(value) {
+                  defaultOptions.isAllExpand = value;
+                }
+              }
+            })]), h('div', {
+              class: 'vxe-table-export--panel-option-row'
+            }, [h('vxe-checkbox', {
+              props: {
+                value: defaultOptions.isFooter,
+                disabled: !storeData.hasFooter,
+                title: getI18n('vxe.export.expFooterTitle'),
+                content: getI18n('vxe.export.expOptFooter')
+              },
+              on: {
+                input(value) {
+                  defaultOptions.isFooter = value;
+                }
+              }
+            })])])])]])])]), bottomSlot ? h('div', {
+              class: 'vxe-table-export--panel-bottom'
+            }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable)]);
+          },
+          footer() {
+            const params = {
+              $table: $xeTable,
+              $grid: $xeGrid,
+              $gantt: $xeGantt,
+              options: defaultOptions,
+              columns,
+              params: defaultOptions.params
+            };
+            return h('div', {
+              class: 'vxe-table-export--panel-footer'
+            }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
+              class: 'vxe-table-export--panel-btns'
+            }, [h('vxe-button', {
+              props: {
+                content: getI18n('vxe.export.expCancel')
+              },
+              on: {
+                click: $xeExportPanel.cancelEvent
+              }
+            }), h('vxe-button', {
+              ref: 'confirmBtn',
+              props: {
+                status: 'primary',
+                content: getI18n(isPrint ? 'vxe.export.expPrint' : 'vxe.export.expConfirm')
+              },
+              on: {
+                click: $xeExportPanel.confirmEvent
+              }
+            })])]);
+          }
+        }
       });
     }
+  },
+  render(h) {
+    return this.renderVN(h);
   }
-};
+});
+/* define-vxe-component end */