ele-admin-plus 1.1.4 → 1.1.5-beta.1

package/lib/ele-virtual-table/index.js

@@ -0,0 +1,986 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const EleTooltip = require("../ele-tooltip/index");
+const util = require("../ele-data-table/util");
+const util$1 = require("./util");
+const HeaderRow = require("./components/header-row");
+const BodyRow = require("./components/body-row");
+const ExpandRow = require("./components/expand-row");
+const FooterRow = require("./components/footer-row");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleVirtualTable",
+  components: {
+    ElTableV2: elementPlus.ElTableV2,
+    ElEmpty: elementPlus.ElEmpty,
+    EleTooltip,
+    HeaderRow,
+    BodyRow,
+    ExpandRow,
+    FooterRow
+  },
+  props: props.virtualTableProps,
+  emits: props.virtualTableEmits,
+  setup(props2, { emit, slots }) {
+    const { t } = elementPlus.useLocale();
+    const events = util.useEmits(emit);
+    const {
+      getCurrent,
+      setCurrent,
+      getSelected,
+      addSelected,
+      removeSelected,
+      clearSelected,
+      getScrollTop,
+      cacheScrollTop
+    } = util$1.useState();
+    const { wrapWidth, wrapHeight } = util$1.useAutoResize(() => rootRef.value);
+    const rootRef = vue.ref(null);
+    const tableRef = vue.ref(null);
+    const tableKey = vue.ref(1);
+    const headerRows = vue.ref([]);
+    const bodyCols = vue.ref([]);
+    const headerRowSizes = vue.ref([]);
+    const bodyColSizes = vue.ref([]);
+    const colsSumWidth = vue.ref(0);
+    const tableWidth = vue.ref(0);
+    const tableHeight = vue.ref(0);
+    const tableData = vue.ref([]);
+    const tableColumns = vue.ref([]);
+    const tableScrollLeft = vue.ref(0);
+    const currentRowKey = vue.ref(props2.currentRowKey ?? null);
+    const selectedRowKeys = vue.ref(/* @__PURE__ */ new Set([]));
+    const isCheckAll = vue.ref(false);
+    const expandedRowKeys = vue.ref([]);
+    const sortBy = vue.ref(util$1.getDefaultSort(props2.defaultSort));
+    const filtered = vue.reactive(util$1.getDefaultFiltered(props2.columns));
+    const tableTooltipProps = vue.reactive({
+      placement: "top",
+      trigger: "click",
+      offset: 0,
+      hideAfter: 0,
+      content: "",
+      virtualRef: void 0,
+      virtualTriggering: true,
+      disabled: true,
+      visible: false,
+      teleported: false,
+      transition: "ele-transition-none"
+    });
+    const slotKeys = vue.computed(() => {
+      return Object.keys(slots).filter(
+        (k) => !["default", "empty", "append"].includes(k)
+      );
+    });
+    const treeTableProps = vue.computed(() => {
+      return util$1.getTreeProps(props2.treeProps);
+    });
+    const treeChildrenName = vue.computed(() => {
+      return treeTableProps.value.childrenName;
+    });
+    const treeHasChildrenName = vue.computed(() => {
+      return treeTableProps.value.hasChildrenName;
+    });
+    const isTreeData = vue.computed(() => {
+      return tableData.value.some((d) => {
+        return d.children && d.children.length || props2.lazy && d[treeHasChildrenName.value] === true;
+      });
+    });
+    const tableExpandCol = vue.computed(() => {
+      return bodyCols.value.find((d) => {
+        return !!(d && d.originalCol && d.originalCol.type === "expand");
+      });
+    });
+    const hasExpandCol = vue.computed(() => {
+      return !!tableExpandCol.value;
+    });
+    const tableExpandColumnKey = vue.computed(() => {
+      if (tableExpandCol.value) {
+        return tableExpandCol.value.key;
+      }
+      if (!isTreeData.value) {
+        return;
+      }
+      const treeCol = bodyCols.value.find((d) => {
+        if (!d || !d.key || !d.originalCol) {
+          return false;
+        }
+        const colType = d.originalCol.type;
+        return !colType || !["selection", "index"].includes(colType);
+      });
+      return treeCol ? treeCol.key : void 0;
+    });
+    const tableRowHeight = vue.computed(() => {
+      return util$1.getRowHeight(props2.size, props2.rowHeight);
+    });
+    const autoRowHeight = vue.computed(() => {
+      return util$1.isAutoRowHeight(
+        hasExpandCol.value,
+        bodyCols.value,
+        props2.showOverflowTooltip
+      );
+    });
+    const headerNums = vue.computed(() => {
+      return props2.showHeader ? headerRows.value.length : 0;
+    });
+    const hasFooter = vue.computed(() => {
+      return !!(props2.showSummary && tableData.value.length);
+    });
+    const tableProps = vue.computed(() => {
+      const rowHeight = tableRowHeight.value;
+      const headerHeight = new Array(headerNums.value).fill(rowHeight);
+      const opt = {
+        cache: 2,
+        estimatedRowHeight: autoRowHeight.value ? rowHeight : void 0,
+        headerClass: (params) => {
+          const rowClass = props2.headerRowClassName;
+          const classes = ["ele-table-head-tr"];
+          if (typeof rowClass === "function") {
+            const custom = rowClass({ rowIndex: params.headerIndex });
+            if (custom) {
+              classes.push(custom);
+            }
+          } else if (typeof rowClass === "string" && rowClass) {
+            classes.push(rowClass);
+          }
+          return classes.join(" ");
+        },
+        headerProps: (params) => {
+          const opt2 = { rowIndex: params.headerIndex };
+          const style = props2.headerRowStyle;
+          return { style: typeof style === "function" ? style(opt2) : style };
+        },
+        //headerCellProps: void 0,
+        headerHeight: headerNums.value ? headerHeight : 0,
+        footerHeight: hasFooter.value ? rowHeight : void 0,
+        rowClass: (params) => {
+          const classes = ["ele-table-tr"];
+          const row = params.rowData;
+          const rowIndex = row._rowIndex;
+          if (row && row._isExpandRow === true) {
+            classes.push("is-expand-row");
+          } else if (row) {
+            if (props2.stripe && (rowIndex + 1) % 2 === 0) {
+              classes.push("is-even");
+            }
+            if (props2.highlightCurrentRow && currentRowKey.value != null && currentRowKey.value === row._rowKey) {
+              classes.push("is-current");
+            }
+            const rowClass = props2.rowClassName;
+            if (typeof rowClass === "function") {
+              const custom = rowClass({ row, rowIndex });
+              if (custom) {
+                classes.push(custom);
+              }
+            } else if (typeof rowClass === "string" && rowClass) {
+              classes.push(rowClass);
+            }
+          }
+          return classes.join(" ");
+        },
+        rowKey: "_rowKey",
+        rowProps: (params) => {
+          const row = params.rowData;
+          const opt2 = { row, rowIndex: row._rowIndex };
+          const style = props2.rowStyle;
+          return { style: typeof style === "function" ? style(opt2) : style };
+        },
+        rowHeight: autoRowHeight.value ? void 0 : rowHeight,
+        //cellProps: void 0,
+        columns: tableColumns.value,
+        data: tableData.value,
+        //dataGetter: void 0,
+        //fixedData: void 0,
+        expandColumnKey: tableExpandColumnKey.value,
+        expandedRowKeys: expandedRowKeys.value,
+        defaultExpandedRowKeys: expandedRowKeys.value,
+        //class: void 0,
+        fixed: true,
+        width: tableWidth.value,
+        height: tableHeight.value,
+        //maxHeight: void 0,
+        hScrollbarSize: 0,
+        vScrollbarSize: 0,
+        scrollbarAlwaysOn: props2.scrollbarAlwaysOn,
+        sortBy: sortBy.value
+        //sortState: void 0
+      };
+      return opt;
+    });
+    const isIndeterminate = vue.computed(() => {
+      return !!(selectedRowKeys.value.size && !isCheckAll.value);
+    });
+    const isPingLeft = vue.computed(() => {
+      return tableScrollLeft.value > 1;
+    });
+    const isPingRight = vue.computed(() => {
+      const scrollWidth = colsSumWidth.value - tableWidth.value - 1;
+      return scrollWidth > 1 && tableScrollLeft.value < scrollWidth;
+    });
+    const tableSumText = vue.computed(() => {
+      return props2.sumText ?? t("el.table.sumText");
+    });
+    const tableEmptyText = vue.computed(() => {
+      return props2.errorText || props2.emptyText || t("el.table.emptyText");
+    });
+    const tableEmptyProps = vue.computed(() => {
+      return util.getEmptyProps(props2.emptyProps, tableEmptyText.value);
+    });
+    const triggerTooltip = (cell, col) => {
+      const cellText = cell.innerText;
+      const tooltip = util.mergeTooltipProps(
+        col ? col.showOverflowTooltip : void 0,
+        util.getGlobalTooltipProps(
+          props2.showOverflowTooltip,
+          props2.tooltipEffect,
+          props2.tooltipOptions
+        )
+      );
+      if (cellText && !!tooltip && util$1.cellIsOverflow(cell)) {
+        tableTooltipProps.content = cellText;
+        const excludes = [
+          "virtualRef",
+          "virtualTriggering",
+          "disabled",
+          "visible",
+          "teleported"
+        ];
+        Object.keys(tooltip).forEach((key) => {
+          const value = tooltip[key];
+          if (!excludes.includes(key) && tableTooltipProps[key] !== value) {
+            tableTooltipProps[key] = value;
+          }
+        });
+        tableTooltipProps.virtualRef = cell;
+        tableTooltipProps.disabled = false;
+        tableTooltipProps.visible = true;
+      } else {
+        hideTooltip();
+      }
+    };
+    const hideTooltip = () => {
+      tableTooltipProps.visible = false;
+      tableTooltipProps.disabled = true;
+    };
+    const onTableFilterChange = (params) => {
+      const key = util$1.getColKey(params.column);
+      if (key) {
+        filtered[key] = params.value;
+        events.onFilterChange(filtered);
+      }
+    };
+    const onCellCheckedChange = (row, checked) => {
+      toggleSelected(row, checked);
+      const selection = getSelected();
+      events.onSelect(selection, row);
+      events.onSelectionChange(selection);
+    };
+    const onCellExpandChange = (row, expanded, children) => {
+      if (expanded && children != null) {
+        const childs = util$1.transformTableData(
+          children,
+          hasExpandCol.value,
+          treeChildrenName.value,
+          props2.rowKey,
+          util$1.getSelectableFunc(bodyCols.value)
+        );
+        let index2 = -1;
+        core.eachTree(tableData.value, (d) => {
+          index2++;
+          if (d._rowKey === row._rowKey) {
+            d.children = childs;
+            if (!childs.length) {
+              d[treeHasChildrenName.value] = false;
+            }
+          }
+          d._rowIndex = index2;
+        });
+        if (!childs.length) {
+          return;
+        }
+      }
+      toggleRowExpansion(row, expanded);
+    };
+    const onCellClick = (row, col, e) => {
+      const cell = e.currentTarget;
+      events.onCellClick(row, col, cell, e);
+      if (props2.highlightCurrentRow) {
+        setCurrentRow(row);
+      }
+      if (props2.rowClickChecked && !row._rowDisabled) {
+        if (props2.rowClickChecked === "smart" && selectedRowKeys.value.size === 1) {
+          setSelectedRows([row]);
+        } else {
+          toggleRowSelection(row);
+        }
+      }
+      events.onRowClick(row, col, e);
+    };
+    const onCellDblclick = (row, col, e) => {
+      const cell = e.currentTarget;
+      events.onCellDblclick(row, col, cell, e);
+      events.onRowDblclick(row, col, e);
+    };
+    const onCellContextmenu = (row, col, e) => {
+      const cell = e.currentTarget;
+      events.onCellContextmenu(row, col, cell, e);
+      events.onRowContextmenu(row, col, e);
+    };
+    const onCellMouseenter = (row, col, e) => {
+      const cell = e.currentTarget;
+      triggerTooltip(cell, col);
+      events.onCellMouseEnter(row, col, cell, e);
+    };
+    const onCellMouseleave = (row, col, e) => {
+      const cell = e.currentTarget;
+      events.onCellMouseLeave(row, col, cell, e);
+    };
+    const onHeaderCellClick = (col, e) => {
+      if (col && (col.sortable === true || col.sortable === "custom")) {
+        sortBy.value = util$1.getSortBy(sortBy.value, col);
+        events.onSortChange({
+          prop: col.property || col.prop,
+          order: util$1.getOrderValue(sortBy.value ? sortBy.value.order : void 0),
+          column: col
+        });
+      }
+      events.onHeaderClick(col, e);
+    };
+    const onHeaderCellContextmenu = (col, e) => {
+      events.onHeaderContextmenu(col, e);
+    };
+    const onHeaderCellMouseenter = () => {
+      hideTooltip();
+    };
+    const onFooterCellMouseenter = (e) => {
+      triggerTooltip(e.currentTarget, { showOverflowTooltip: true });
+    };
+    const onExpandCellMouseenter = () => {
+      hideTooltip();
+    };
+    const onTableMouseleave = () => {
+      hideTooltip();
+    };
+    const onTableScroll = (option) => {
+      cacheScrollTop(option.scrollTop);
+      const scrollLeft = option.scrollLeft;
+      if (tableScrollLeft.value !== scrollLeft) {
+        tableScrollLeft.value = scrollLeft;
+      }
+      if (hasFooter.value && tableRef.value && tableRef.value.$el) {
+        const childs = tableRef.value.$el.children;
+        if (childs) {
+          for (let i = 0; i < childs.length; i++) {
+            const el = childs[i];
+            if (el.classList.contains("el-table-v2__footer")) {
+              if (el.scrollLeft != scrollLeft) {
+                el.scrollLeft = scrollLeft;
+              }
+              break;
+            }
+          }
+        }
+      }
+    };
+    const updateTableData = () => {
+      tableData.value = util$1.transformTableData(
+        props2.data,
+        hasExpandCol.value,
+        treeChildrenName.value,
+        props2.rowKey,
+        util$1.getSelectableFunc(bodyCols.value)
+      );
+      if (props2.defaultExpandAll) {
+        toggleRowExpansionAll(true);
+      } else if (props2.expandRowKeys && props2.expandRowKeys.length) {
+        expandedRowKeys.value = [...props2.expandRowKeys];
+      } else {
+        toggleRowExpansionAll(false);
+      }
+      updateCurrentRowKey(currentRowKey.value);
+    };
+    const updateCurrentRowKey = (currentKey) => {
+      if (currentKey != null) {
+        if (!tableData.value.length) {
+          setCurrentRow();
+          return;
+        }
+        core.eachTree(tableData.value, (d) => {
+          if (d._rowKey === currentKey && !d._isExpandRow) {
+            setCurrentRow(d);
+            return false;
+          }
+        });
+      } else if (currentRowKey.value != null) {
+        setCurrentRow();
+      }
+    };
+    const updateIsCheckAll = () => {
+      if (!tableData.value.length || !selectedRowKeys.value.size) {
+        isCheckAll.value = false;
+        return;
+      }
+      let checked = true;
+      core.eachTree(tableData.value, (d) => {
+        if (!d._isExpandRow && !d._rowDisabled && d._rowKey != null && !selectedRowKeys.value.has(d._rowKey)) {
+          checked = false;
+          return false;
+        }
+      });
+      isCheckAll.value = checked;
+    };
+    const toggleSelected = (row, selected) => {
+      const dataKey = util.getValue(row, props2.rowKey);
+      if (dataKey == null) {
+        return;
+      }
+      const isChecked = selectedRowKeys.value.has(dataKey);
+      const checked = selected == null ? !isChecked : selected;
+      if (checked === isChecked) {
+        return;
+      }
+      if (checked) {
+        selectedRowKeys.value.add(dataKey);
+        addSelected(dataKey, row);
+      } else {
+        selectedRowKeys.value.delete(dataKey);
+        removeSelected(dataKey);
+      }
+      updateIsCheckAll();
+    };
+    const setSelectedRows = (rows) => {
+      if (rows == null) {
+        return;
+      }
+      selectedRowKeys.value.clear();
+      clearSelected();
+      rows.forEach((r) => {
+        const k = util.getValue(r, props2.rowKey);
+        if (k != null) {
+          selectedRowKeys.value.add(k);
+          addSelected(k, r);
+        }
+      });
+      updateIsCheckAll();
+      events.onSelectionChange(getSelected());
+    };
+    const setSelectedRowKeys = (keys) => {
+      if (!keys) {
+        return;
+      }
+      selectedRowKeys.value.clear();
+      clearSelected();
+      if (keys.length) {
+        core.eachTree(tableData.value, (d) => {
+          if (!d._isExpandRow && d._rowKey != null && keys.includes(d._rowKey)) {
+            selectedRowKeys.value.add(d._rowKey);
+            addSelected(d._rowKey, d);
+          }
+        });
+      }
+      updateIsCheckAll();
+      events.onSelectionChange(getSelected());
+    };
+    const toggleRowExpansionAll = (expanded) => {
+      if (!expanded) {
+        if (expandedRowKeys.value.length) {
+          expandedRowKeys.value = [];
+          events.onExpandChange(void 0, []);
+        }
+        return;
+      }
+      const keys = [];
+      const rows = [];
+      core.eachTree(tableData.value, (row) => {
+        if (row.children && row.children.length && row._rowKey != null) {
+          keys.push(row._rowKey);
+          rows.push(row);
+        }
+      });
+      expandedRowKeys.value = keys;
+      events.onExpandChange(void 0, rows);
+    };
+    const clearSelection = () => {
+      selectedRowKeys.value.clear();
+      clearSelected();
+      isCheckAll.value = false;
+      events.onSelectionChange([]);
+    };
+    const getSelectionRows = () => {
+      return getSelected();
+    };
+    const toggleRowSelection = (row, selected) => {
+      toggleSelected(row, selected);
+      events.onSelectionChange(getSelected());
+    };
+    const toggleAllSelection = () => {
+      if (!tableData.value.length) {
+        return;
+      }
+      if (isCheckAll.value || isIndeterminate.value && !props2.selectOnIndeterminate) {
+        if (selectedRowKeys.value.size) {
+          selectedRowKeys.value.clear();
+          clearSelected();
+          isCheckAll.value = false;
+          events.onSelectionChange([]);
+          events.onSelectAll([]);
+        }
+        return;
+      }
+      core.eachTree(tableData.value, (d) => {
+        if (!d._isExpandRow && !d._rowDisabled && d._rowKey != null) {
+          selectedRowKeys.value.add(d._rowKey);
+          addSelected(d._rowKey, d);
+        }
+      });
+      isCheckAll.value = true;
+      const selection = getSelected();
+      events.onSelectionChange(selection);
+      events.onSelectAll(selection);
+    };
+    const toggleRowExpansion = (row, expanded) => {
+      const dataKey = util.getValue(row, props2.rowKey);
+      if (dataKey == null) {
+        return;
+      }
+      const isSpread = expandedRowKeys.value.includes(dataKey);
+      const spread = expanded == null ? !isSpread : expanded;
+      if (spread === isSpread) {
+        return;
+      }
+      if (spread) {
+        expandedRowKeys.value.push(dataKey);
+      } else {
+        const index2 = expandedRowKeys.value.findIndex((t2) => t2 === dataKey);
+        expandedRowKeys.value.splice(index2, 1);
+      }
+      events.onExpandChange(row, spread);
+    };
+    const setCurrentRow = (row) => {
+      const oldCurrentRow = getCurrent();
+      if (oldCurrentRow == null && row == null || oldCurrentRow === row) {
+        return;
+      }
+      if (row == null) {
+        if (currentRowKey.value != null) {
+          currentRowKey.value = null;
+        }
+      } else {
+        const dataKey = util.getValue(row, props2.rowKey);
+        if (dataKey != null && currentRowKey.value !== dataKey) {
+          currentRowKey.value = dataKey;
+        }
+      }
+      setCurrent(row);
+      events.onCurrentChange(row, oldCurrentRow);
+    };
+    const clearSort = () => {
+      if (sortBy.value != null) {
+        sortBy.value = void 0;
+      }
+    };
+    const clearFilter = (columnKeys) => {
+      const keys = columnKeys == null ? Object.keys(filtered) : columnKeys;
+      keys.forEach((key) => {
+        const v = filtered[key];
+        if (v == null || v.length) {
+          filtered[key] = [];
+        }
+      });
+    };
+    const doLayout = (force) => {
+      const { width, sumWidth, rowSizes, colSizes } = util$1.computeColSizes(
+        bodyCols.value,
+        headerRows.value,
+        wrapWidth.value
+      );
+      const isUpdate = colsSumWidth.value && colsSumWidth.value !== sumWidth;
+      const isSizesChanged = util$1.colSizesIsChanged(bodyColSizes.value, colSizes);
+      tableWidth.value = width;
+      colsSumWidth.value = sumWidth;
+      headerRowSizes.value = rowSizes;
+      if (force || isSizesChanged) {
+        bodyColSizes.value = colSizes;
+        tableColumns.value = util$1.getTableColumns(
+          bodyCols.value,
+          bodyColSizes.value
+        );
+      }
+      if (isUpdate) {
+        tableKey.value++;
+      }
+    };
+    const sort = (prop, order) => {
+      const col = util$1.getColumnByKey(props2.columns, void 0, prop);
+      sortBy.value = {
+        key: util$1.getColKey(col),
+        order: util$1.getSortOrder(order)
+      };
+      events.onSortChange({ prop, order, column: col });
+    };
+    const scrollTo = (options, yCoord) => {
+      if (!tableRef.value) {
+        return;
+      }
+      const isNumber = typeof options === "number";
+      const top = isNumber ? options : options.top;
+      const left = isNumber ? yCoord : options.left;
+      tableRef.value.scrollTo({
+        scrollTop: top,
+        scrollLeft: left
+      });
+    };
+    const setScrollTop = (top) => {
+      if (!tableRef.value) {
+        return;
+      }
+      tableRef.value.scrollToTop(top);
+    };
+    const setScrollLeft = (left) => {
+      if (!tableRef.value) {
+        return;
+      }
+      tableRef.value.scrollToLeft(left);
+    };
+    const scrollToRow = (row, strategy) => {
+      if (!tableRef.value) {
+        return;
+      }
+      tableRef.value.scrollToRow(row, strategy);
+    };
+    vue.onDeactivated(() => {
+      hideTooltip();
+    });
+    vue.onActivated(() => {
+      const top = getScrollTop();
+      const left = tableScrollLeft.value;
+      if (top || left) {
+        scrollTo(top ? top - 1 : 0, left ? left - 1 : 0);
+      }
+    });
+    vue.watch(
+      [
+        () => props2.height,
+        () => props2.maxHeight,
+        tableRowHeight,
+        headerNums,
+        hasFooter,
+        wrapHeight
+      ],
+      () => {
+        const minRows = headerNums.value + (hasFooter.value ? 2 : 1);
+        const height = util$1.getTableHeight(
+          props2.height,
+          props2.maxHeight,
+          minRows * tableRowHeight.value,
+          wrapHeight.value
+        );
+        if (height !== tableHeight.value) {
+          tableHeight.value = height;
+        }
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props2.columns,
+      (columns) => {
+        const { cols, rows } = util$1.analyseColumns(columns);
+        bodyCols.value = cols;
+        headerRows.value = rows;
+        tableData.value = util$1.transformTableData(
+          props2.data,
+          hasExpandCol.value,
+          treeChildrenName.value,
+          props2.rowKey,
+          util$1.getSelectableFunc(bodyCols.value)
+        );
+        doLayout(true);
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    vue.watch(wrapWidth, () => {
+      doLayout();
+    });
+    vue.watch(
+      [hasExpandCol, treeChildrenName],
+      () => {
+        updateTableData();
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props2.data,
+      () => {
+        updateTableData();
+        if (selectedRowKeys.value.size && !util.isReserveSelected(props2.columns)) {
+          selectedRowKeys.value.clear();
+          clearSelected();
+          isCheckAll.value = false;
+          events.onSelectionChange(getSelected());
+        } else {
+          updateIsCheckAll();
+        }
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => props2.rowKey,
+      () => {
+        isCheckAll.value = false;
+        clearSelection();
+        setCurrentRow();
+        toggleRowExpansionAll(false);
+        updateTableData();
+      }
+    );
+    vue.watch(
+      () => props2.currentRowKey,
+      (currentKey) => {
+        updateCurrentRowKey(currentKey);
+      }
+    );
+    vue.watch(
+      () => props2.expandRowKeys,
+      (expandKeys) => {
+        if (expandKeys != null) {
+          expandedRowKeys.value = expandKeys;
+        }
+      },
+      { deep: true }
+    );
+    return {
+      rootRef,
+      tableRef,
+      tableKey,
+      wrapWidth,
+      headerRows,
+      bodyCols,
+      headerRowSizes,
+      bodyColSizes,
+      colsSumWidth,
+      tableWidth,
+      tableData,
+      isCheckAll,
+      isIndeterminate,
+      selectedRowKeys,
+      expandedRowKeys,
+      sortBy,
+      filtered,
+      tableTooltipProps,
+      slotKeys,
+      treeHasChildrenName,
+      tableExpandCol,
+      hasExpandCol,
+      tableExpandColumnKey,
+      tableRowHeight,
+      autoRowHeight,
+      hasFooter,
+      tableProps,
+      isPingLeft,
+      isPingRight,
+      tableSumText,
+      tableEmptyText,
+      tableEmptyProps,
+      onTableFilterChange,
+      onCellCheckedChange,
+      onCellExpandChange,
+      onCellClick,
+      onCellDblclick,
+      onCellContextmenu,
+      onCellMouseenter,
+      onCellMouseleave,
+      onHeaderCellClick,
+      onHeaderCellContextmenu,
+      onHeaderCellMouseenter,
+      onFooterCellMouseenter,
+      onExpandCellMouseenter,
+      onTableMouseleave,
+      onTableScroll,
+      setSelectedRows,
+      setSelectedRowKeys,
+      toggleRowExpansionAll,
+      clearSelection,
+      getSelectionRows,
+      toggleRowSelection,
+      toggleAllSelection,
+      toggleRowExpansion,
+      setCurrentRow,
+      clearSort,
+      clearFilter,
+      doLayout,
+      sort,
+      scrollTo,
+      setScrollTop,
+      setScrollLeft,
+      scrollToRow
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-table-empty-text"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_HeaderRow = vue.resolveComponent("HeaderRow");
+  const _component_ExpandRow = vue.resolveComponent("ExpandRow");
+  const _component_BodyRow = vue.resolveComponent("BodyRow");
+  const _component_FooterRow = vue.resolveComponent("FooterRow");
+  const _component_ElEmpty = vue.resolveComponent("ElEmpty");
+  const _component_ElTableV2 = vue.resolveComponent("ElTableV2");
+  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "rootRef",
+    class: vue.normalizeClass([
+      "ele-virtual-table",
+      { "is-border": _ctx.border || _ctx.headerRows.length > 1 },
+      { "is-stripe": _ctx.stripe },
+      { "is-sticky": _ctx.sticky },
+      { "has-footer": _ctx.hasFooter },
+      { "hide-header": !_ctx.showHeader },
+      { "hide-bottom-line": !_ctx.bottomLine },
+      { "is-ping-left": _ctx.isPingLeft },
+      { "is-ping-right": _ctx.isPingRight },
+      { "is-auto-width": _ctx.wrapWidth === _ctx.tableWidth },
+      { "is-small": _ctx.size === "small" },
+      { "is-large": _ctx.size === "large" }
+    ]),
+    onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.onTableMouseleave && _ctx.onTableMouseleave(...args))
+  }, [
+    _ctx.tableProps.width ? (vue.openBlock(), vue.createBlock(_component_ElTableV2, vue.mergeProps({ key: 0 }, _ctx.tableProps, {
+      key: _ctx.tableKey,
+      ref: "tableRef",
+      onScroll: _ctx.onTableScroll
+    }), vue.createSlots({
+      header: vue.withCtx((headerProps) => [
+        headerProps && _ctx.headerRows[headerProps.headerIndex] ? (vue.openBlock(), vue.createBlock(_component_HeaderRow, {
+          key: 0,
+          headerCols: _ctx.headerRows[headerProps.headerIndex],
+          headerColSizes: _ctx.headerRowSizes[headerProps.headerIndex],
+          headerIndex: headerProps.headerIndex,
+          sortBy: _ctx.sortBy,
+          filtered: _ctx.filtered,
+          isCheckAll: _ctx.isCheckAll,
+          isIndeterminate: _ctx.isIndeterminate,
+          disabledCheckbox: !_ctx.tableData.length,
+          tableSize: _ctx.size,
+          headerCellClass: _ctx.headerCellClassName,
+          headerCellStyle: _ctx.headerCellStyle,
+          headerEllipsis: true,
+          rowHeight: _ctx.tableRowHeight,
+          onCheckedChange: _cache[0] || (_cache[0] = ($event) => _ctx.toggleAllSelection()),
+          onFilterChange: _ctx.onTableFilterChange,
+          onCellClick: _ctx.onHeaderCellClick,
+          onCellContextmenu: _ctx.onHeaderCellContextmenu,
+          onCellMouseenter: _ctx.onHeaderCellMouseenter
+        }, vue.createSlots({ _: 2 }, [
+          vue.renderList(_ctx.slotKeys, (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["headerCols", "headerColSizes", "headerIndex", "sortBy", "filtered", "isCheckAll", "isIndeterminate", "disabledCheckbox", "tableSize", "headerCellClass", "headerCellStyle", "rowHeight", "onFilterChange", "onCellClick", "onCellContextmenu", "onCellMouseenter"])) : vue.createCommentVNode("", true)
+      ]),
+      row: vue.withCtx((rowProps) => [
+        rowProps && rowProps.rowData && rowProps.rowData._isExpandRow ? (vue.openBlock(), vue.createBlock(_component_ExpandRow, {
+          key: 0,
+          column: _ctx.tableExpandCol,
+          rowIndex: rowProps.rowData._expandParantIndex,
+          rowData: rowProps.rowData._expandParent,
+          onMouseenter: _ctx.onExpandCellMouseenter
+        }, vue.createSlots({ _: 2 }, [
+          vue.renderList(_ctx.slotKeys, (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["column", "rowIndex", "rowData", "onMouseenter"])) : rowProps ? (vue.openBlock(), vue.createBlock(_component_BodyRow, {
+          key: 1,
+          bodyCols: _ctx.bodyCols,
+          colSizes: _ctx.bodyColSizes,
+          rowIndex: rowProps.rowData._rowIndex,
+          rowData: rowProps.rowData,
+          selectedRowKeys: _ctx.selectedRowKeys,
+          tableSize: _ctx.size,
+          bodyCellClass: _ctx.cellClassName,
+          bodyCellStyle: _ctx.cellStyle,
+          spanMethod: _ctx.spanMethod,
+          tableTooltipProps: _ctx.showOverflowTooltip,
+          pageIndex: _ctx.pageIndex,
+          rowHeight: _ctx.tableRowHeight,
+          expandColumnKey: _ctx.tableExpandColumnKey,
+          expandedRowKeys: _ctx.expandedRowKeys,
+          hasChildrenName: _ctx.treeHasChildrenName,
+          lazy: _ctx.lazy,
+          load: _ctx.load,
+          level: rowProps.depth,
+          indent: _ctx.indent,
+          fixedCellHeight: _ctx.hasExpandCol,
+          autoRowHeight: _ctx.autoRowHeight,
+          onCellCheckedChange: _ctx.onCellCheckedChange,
+          onCellExpandChange: _ctx.onCellExpandChange,
+          onCellClick: _ctx.onCellClick,
+          onCellDblclick: _ctx.onCellDblclick,
+          onCellContextmenu: _ctx.onCellContextmenu,
+          onCellMouseenter: _ctx.onCellMouseenter,
+          onCellMouseleave: _ctx.onCellMouseleave
+        }, vue.createSlots({ _: 2 }, [
+          vue.renderList(_ctx.slotKeys, (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["bodyCols", "colSizes", "rowIndex", "rowData", "selectedRowKeys", "tableSize", "bodyCellClass", "bodyCellStyle", "spanMethod", "tableTooltipProps", "pageIndex", "rowHeight", "expandColumnKey", "expandedRowKeys", "hasChildrenName", "lazy", "load", "level", "indent", "fixedCellHeight", "autoRowHeight", "onCellCheckedChange", "onCellExpandChange", "onCellClick", "onCellDblclick", "onCellContextmenu", "onCellMouseenter", "onCellMouseleave"])) : vue.createCommentVNode("", true)
+      ]),
+      empty: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "empty", {
+          text: _ctx.emptyText,
+          error: _ctx.errorText
+        }, () => [
+          _ctx.emptyProps === false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(_ctx.tableEmptyText), 1)) : (vue.openBlock(), vue.createBlock(_component_ElEmpty, vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.tableEmptyProps)), null, 16))
+        ])
+      ]),
+      _: 2
+    }, [
+      _ctx.hasFooter ? {
+        name: "footer",
+        fn: vue.withCtx(() => [
+          vue.createVNode(_component_FooterRow, {
+            bodyCols: _ctx.bodyCols,
+            colSizes: _ctx.bodyColSizes,
+            sumWidth: _ctx.colsSumWidth,
+            tableData: _ctx.tableData,
+            rowHeight: _ctx.tableRowHeight,
+            sumText: _ctx.tableSumText,
+            summaryMethod: _ctx.summaryMethod,
+            onMouseenter: _ctx.onFooterCellMouseenter
+          }, null, 8, ["bodyCols", "colSizes", "sumWidth", "tableData", "rowHeight", "sumText", "summaryMethod", "onMouseenter"])
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["onScroll"])) : vue.createCommentVNode("", true),
+    vue.createVNode(_component_EleTooltip, vue.normalizeProps(vue.guardReactiveProps(_ctx.tableTooltipProps)), null, 16)
+  ], 34);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;