ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/es/ele-table-select/index.js

@@ -1,9 +1,9 @@
-import { defineComponent, ref, computed, watch, onMounted, createBlock, openBlock, createSlots, withCtx, renderSlot, createVNode, mergeProps, renderList, normalizeProps, guardReactiveProps, nextTick } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, provide, resolveComponent, createBlock, openBlock, createSlots, withCtx, createElementBlock, resolveDynamicComponent, normalizeProps, mergeProps, renderSlot, createVNode, renderList, unref, guardReactiveProps, Fragment, nextTick } from "vue";
+import { getSlotsMap, getValue } from "../utils/common";
 import { useResponsive } from "../ele-pro-layout/util";
 import EleBasicSelect from "../ele-basic-select/index";
-import { useFormValidate, isEmptyValue, valueIsChanged } from "../ele-basic-select/util";
-import EleProTable from "../ele-pro-table/index";
-import { isDisableRow } from "../ele-data-table/util";
+import { useFormValidate, isEmptyValue, SELECT_DATA_KEY, valueIsChanged } from "../ele-basic-select/util";
+import EleButtons from "../ele-buttons/index";
 import { tableSelectEmits, tableSelectProps } from "./props";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "EleTableSelect" },
@@ -11,198 +11,183 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: tableSelectProps,
   emits: tableSelectEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
+    const ownSlots = ["popperTopExtra", "popperBottomExtra"];
     const props = __props;
     const emit = __emit;
     const { validateChange } = useFormValidate();
     const isResponsive = useResponsive(props);
     const selectRef = ref(null);
-    const tableRef = ref(null);
+    const proTableRef = ref(null);
     const selectVisible = ref(false);
     const selectedItems = ref([]);
+    const tempSelectedItems = ref([]);
+    const tempSelectValue = ref();
+    const isModalType = computed(() => {
+      return props.popperType === "modal" || props.popperType === "drawer";
+    });
+    const selectPopperClass = computed(() => {
+      const classes = ["ele-table-select-popper"];
+      if (isResponsive.value && !isModalType.value) {
+        classes.push("is-responsive");
+      }
+      if (props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      return classes.join(" ");
+    });
     const selectedLabel = computed(() => {
       const selected = selectedItems.value;
       return !props.multiple && selected.length ? selected[0].label : "";
     });
-    const currentRowKey = computed(() => {
+    const tableCurrentRowKey = computed(() => {
+      if (isModalType.value) {
+        if (props.multiple || isEmptyValue(tempSelectValue.value)) {
+          return;
+        }
+        return tempSelectValue.value;
+      }
       if (props.multiple || isEmptyValue(props.modelValue)) {
         return;
       }
       return props.modelValue;
     });
-    const selectedRowKeys = computed(() => {
+    const tableSelectedRowKeys = computed(() => {
+      if (isModalType.value) {
+        if (!props.multiple || isEmptyValue(tempSelectValue.value)) {
+          return;
+        }
+        return tempSelectValue.value;
+      }
       if (!props.multiple || isEmptyValue(props.modelValue)) {
         return;
       }
       return props.modelValue;
     });
-    const selectPopperClass = computed(() => {
-      const classes = ["ele-table-select-popper"];
-      if (isResponsive.value) {
-        classes.push("is-responsive");
-      }
-      if (props.popperClass) {
-        classes.push(props.popperClass);
-      }
-      return classes.join(" ");
-    });
     const updatePopover = () => {
       selectRef.value && selectRef.value.updatePopper();
     };
-    const getItemByValue = (value) => {
-      if (isEmptyValue(value)) {
-        return;
-      }
-      if (props.cacheData != null) {
-        const temp = props.cacheData.find((d) => d[props.valueKey] === value);
-        if (temp != null) {
-          return temp;
-        }
-      }
-      if (!isEmptyValue(props.initValue)) {
-        if (!props.multiple) {
-          return props.initValue;
-        }
-        return props.initValue.find(
-          (d) => d[props.valueKey] === value
-        );
-      }
+    const focusSearchInput = () => {
+      selectRef.value && selectRef.value.focusSearchInput();
     };
-    const getCacheItemByValue = (value, cacheKeys, cacheData, tKeys, initValue) => {
-      if (cacheData != null) {
-        const index = cacheKeys.indexOf(value);
-        if (index !== -1) {
-          return cacheData[index];
-        }
-      }
-      if (initValue != null) {
-        const i = tKeys.indexOf(value);
-        if (i !== -1) {
-          return initValue[i];
+    const updateModelValue = (modelValue) => {
+      if (valueIsChanged(modelValue, props.modelValue, props.multiple)) {
+        emit("update:modelValue", modelValue);
+        if (props.validateEvent) {
+          validateChange();
         }
+        emit("change", modelValue);
       }
     };
-    const getMultipleItems = () => {
-      const modelValue = props.modelValue;
-      if (isEmptyValue(modelValue, true)) {
-        return [];
-      }
-      const selected = [];
-      const keys = [];
-      if (tableRef.value) {
-        const data = tableRef.value.getSelectionRows() || [];
-        data.forEach((item) => {
-          if (!item._isMock) {
-            const value = item[props.valueKey];
-            const index = modelValue.indexOf(value);
-            if (index !== -1) {
-              selected.push({ value, label: item[props.labelKey], index });
-              keys.push(value);
+    const updateVisible = (visible) => {
+      if (selectVisible.value !== visible) {
+        selectVisible.value = visible;
+        if (visible) {
+          if (isModalType.value) {
+            if (isEmptyValue(props.modelValue)) {
+              tempSelectedItems.value = [];
+              tempSelectValue.value = void 0;
+            } else {
+              tempSelectedItems.value = [...selectedItems.value];
+              tempSelectValue.value = props.multiple ? [...props.modelValue] : props.modelValue;
             }
           }
-        });
-      }
-      if (keys.length !== modelValue.length) {
-        const { valueKey, cacheData, initValue } = props;
-        const cacheKeys = cacheData ? cacheData.map((d) => d[valueKey]) : [];
-        const tKeys = initValue ? initValue.map((d) => d[valueKey]) : [];
-        modelValue.forEach((value) => {
-          if (!keys.includes(value)) {
-            const item = getCacheItemByValue(
-              value,
-              cacheKeys,
-              cacheData,
-              tKeys,
-              initValue
-            );
-            const label = item ? item[props.labelKey] : String(value);
-            const index = modelValue.indexOf(value);
-            selected.push({ value, label, index });
+          if (props.tableProps?.virtual && proTableRef.value) {
+            const virtualTableRef = proTableRef.value.getTableRef();
+            if (virtualTableRef && !virtualTableRef.wrapWidth) {
+              nextTick(() => {
+                virtualTableRef.updateWrapSize();
+                nextTick(() => {
+                  updatePopover();
+                });
+              });
+            }
           }
-        });
+        }
+        if (props.visible !== visible) {
+          emit("update:visible", visible);
+        }
+        emit("visibleChange", visible);
       }
-      selected.sort((a, b) => a.index - b.index);
-      return selected;
     };
-    const updateSelectedItems = (force) => {
+    const getChangedSelectedItems = (selectValue, selectedItems2, force) => {
+      const tableData = [
+        ...props.cacheData || [],
+        ...(props.multiple ? props.initValue : props.initValue ? [props.initValue] : void 0) || [],
+        // 已废弃属性兼容
+        ...(props.multiple && proTableRef.value ? proTableRef.value.getSelectionRows() : void 0) || []
+      ];
+      if (!props.multiple) {
+        const temp = proTableRef.value ? proTableRef.value.getCurrentRow() : null;
+        if (temp) {
+          tableData.push(temp);
+        }
+      }
       if (!props.multiple) {
-        const value = props.modelValue;
-        const d = selectedItems.value.length ? selectedItems.value[0] : null;
+        const value = selectValue;
+        const d = selectedItems2.length ? selectedItems2[0] : null;
         if (isEmptyValue(value)) {
           if (d != null) {
-            selectedItems.value = [];
+            return [];
           }
           return;
         }
         if (force || !d || d.value !== value) {
-          const temp = tableRef.value ? tableRef.value.getCurrentRow() : null;
-          const t = temp && temp[props.valueKey] === value ? temp : void 0;
-          const item = t || getItemByValue(value);
-          const label = item ? item[props.labelKey] : String(value);
-          selectedItems.value = [{ label, value }];
+          const item = tableData ? tableData.find((d2) => getValue(d2, props.valueKey) === value) : void 0;
+          let label = getValue(item, props.labelKey);
+          if (label == null && (!item || item._isMock)) {
+            label = String(value);
+          }
+          return [{ value, label, data: item }];
         }
         return;
       }
-      if (isEmptyValue(props.modelValue, true)) {
-        if (selectedItems.value.length) {
-          selectedItems.value = [];
-          nextTick(() => {
-            updatePopover();
-          });
+      if (isEmptyValue(selectValue, true)) {
+        if (selectedItems2.length) {
+          return [];
         }
         return;
       }
-      const keys = selectedItems.value.map((d) => d.value);
-      if (force || valueIsChanged(props.modelValue, keys, true)) {
-        selectedItems.value = getMultipleItems();
-        nextTick(() => {
-          updatePopover();
-        });
-      }
-    };
-    const focusSearchInput = () => {
-      selectRef.value && selectRef.value.focusSearchInput();
-    };
-    const handleInitValueChange = (initValue) => {
-      const valueKey = props.valueKey;
-      if (!props.multiple) {
-        const key = initValue[valueKey];
-        if (key === props.modelValue) {
-          updateSelectedItems();
-        } else {
-          updateModelValue(key);
-        }
+      if (!force && !valueIsChanged(
+        selectValue,
+        selectedItems2.map((d) => d.value),
+        true
+      )) {
         return;
       }
-      const keys = initValue.map((d) => d[valueKey]);
-      if (!valueIsChanged(props.modelValue, keys, true)) {
-        updateSelectedItems();
-      } else {
-        updateModelValue(keys);
-      }
+      const selected = [];
+      const dataKeys = tableData ? tableData.map((d) => getValue(d, props.valueKey)) : [];
+      selectValue.forEach((value, index) => {
+        const dataIndex = dataKeys.indexOf(value);
+        const item = dataIndex === -1 ? void 0 : tableData[dataIndex];
+        let label = getValue(item, props.labelKey);
+        if (label == null && (!item || item._isMock)) {
+          label = String(value);
+        }
+        selected.push({ value, label, index, data: item });
+      });
+      return selected;
     };
-    const updateModelValue = (modelValue) => {
-      if (valueIsChanged(modelValue, props.modelValue, props.multiple)) {
-        emit("update:modelValue", modelValue);
-        validateChange();
-        emit("change", modelValue);
+    const checkUpdateSelectedItems = (force) => {
+      const items = getChangedSelectedItems(
+        props.modelValue,
+        selectedItems.value,
+        force
+      );
+      if (items) {
+        selectedItems.value = items;
+        nextTick(() => {
+          updatePopover();
+        });
       }
     };
-    const updateVisible = (visible) => {
-      var _a;
-      if (selectVisible.value !== visible) {
-        selectVisible.value = visible;
-        if (visible && ((_a = props.tableProps) == null ? void 0 : _a.virtual) && tableRef.value) {
-          const virtualTableRef = tableRef.value.getTableRef();
-          if (virtualTableRef != null && !virtualTableRef.wrapWidth) {
-            nextTick(() => {
-              virtualTableRef.updateWrapSize();
-              nextTick(() => {
-                updatePopover();
-              });
-            });
-          }
-        }
-        emit("visibleChange", visible);
+    const checkUpdateTempSelectedItems = (force) => {
+      const items = getChangedSelectedItems(
+        tempSelectValue.value,
+        tempSelectedItems.value,
+        force
+      );
+      if (items) {
+        tempSelectedItems.value = items;
       }
     };
     const handleSelectRemove = (item) => {
@@ -224,62 +209,149 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleSelectFilter = (keywords) => {
       emit("filterChange", keywords);
     };
-    const updateSelectedRowKeys = (rowKeys) => {
-      if (props.multiple) {
-        updateModelValue(rowKeys);
+    const handleUpdateModelValue = (modelValue) => {
+      if (isModalType.value) {
+        tempSelectValue.value = modelValue;
+      } else {
+        updateModelValue(modelValue);
       }
     };
-    const updateCurrentRowKey = (rowKey) => {
-      if (!props.multiple) {
-        updateModelValue(rowKey);
+    const handleCheckUpdateSelectedItems = (force) => {
+      if (isModalType.value) {
+        checkUpdateTempSelectedItems(force);
+      } else {
+        checkUpdateSelectedItems(force);
       }
     };
-    const handleTableCurrentChange = (row) => {
-      if (!props.multiple && row != null) {
-        updateSelectedItems(true);
+    const handleDataSelect = (data) => {
+      if (!isModalType.value) {
+        if (!props.multiple) {
+          updateVisible(false);
+        }
+        emit("select", data);
+      }
+    };
+    const handleUpdateTableSelectedRowKeys = (rowKeys) => {
+      if (props.multiple) {
+        const oldValues = props.modelValue || [];
+        const values = [...rowKeys];
+        values.sort((a, b) => {
+          const aOldIndex = oldValues.indexOf(a);
+          const bOldIndex = oldValues.indexOf(b);
+          const aIndex = aOldIndex === -1 ? values.length : aOldIndex;
+          const bIndex = bOldIndex === -1 ? values.length : bOldIndex;
+          return aIndex - bIndex;
+        });
+        handleUpdateModelValue(values);
+      }
+    };
+    const handleUpdateTableCurrentRowKey = (rowKey) => {
+      if (!props.multiple) {
+        handleUpdateModelValue(rowKey);
       }
     };
     const handleTableSelectionChange = () => {
       if (props.multiple) {
-        updateSelectedItems(true);
+        handleCheckUpdateSelectedItems(true);
+      }
+    };
+    const handleTableCurrentChange = (row) => {
+      if (!props.multiple && row != null) {
+        handleCheckUpdateSelectedItems(true);
       }
     };
-    const handleTableRowClick = (row) => {
-      var _a;
+    const handleTableRowClick = (row, _column, _e, disabled, selection) => {
       if (!props.multiple) {
-        updateVisible(false);
-        emit("select", row);
-      } else if (((_a = props.tableProps) == null ? void 0 : _a.rowClickChecked) && tableRef.value && !isDisableRow(
-        row,
-        tableRef.value.getData().indexOf(row),
-        tableRef.value.tableProps.columns
-      )) {
-        emit("select", tableRef.value.getSelectionRows() || []);
+        handleDataSelect(row);
+      } else if (props.tableProps?.rowClickChecked && !disabled) {
+        handleDataSelect(selection || []);
       }
     };
     const handleTableSelect = (selection) => {
-      emit("select", selection);
+      handleDataSelect(selection);
     };
     const handleTableSelectAll = (selection) => {
-      emit("select", selection);
+      handleDataSelect(selection);
     };
     const handleTableDone = () => {
       nextTick(() => {
         updatePopover();
       });
     };
+    const handleConfirm = () => {
+      const selected = tempSelectedItems.value.map((item) => item.data);
+      const selectedData = props.multiple ? selected : selected[0];
+      if (props.beforeConfirm && props.beforeConfirm(selectedData) === false) {
+        return;
+      }
+      const values = tempSelectedItems.value.map((item) => item.value);
+      if (!props.multiple) {
+        updateModelValue(values[0]);
+        emit("select", selectedData);
+        updateVisible(false);
+        return;
+      }
+      updateModelValue(values);
+      emit("select", selectedData);
+      updateVisible(false);
+    };
+    const handleInitValueChange = (initValue) => {
+      if (!props.multiple) {
+        const value = getValue(initValue, props.valueKey);
+        if (value === props.modelValue) {
+          checkUpdateSelectedItems();
+        } else {
+          updateModelValue(value);
+        }
+        return;
+      }
+      const values = initValue.map(
+        (d) => getValue(d, props.valueKey)
+      );
+      if (!valueIsChanged(props.modelValue, values, true)) {
+        checkUpdateSelectedItems();
+      } else {
+        updateModelValue(values);
+      }
+    };
+    watch(
+      () => props.disabled,
+      (disabled) => {
+        if (disabled) {
+          updateVisible(false);
+        }
+      }
+    );
+    watch(
+      () => props.visible,
+      (visible) => {
+        updateVisible(visible);
+      }
+    );
+    watch(
+      () => props.cacheData,
+      () => {
+        checkUpdateSelectedItems(true);
+        if (isModalType.value && selectVisible.value) {
+          checkUpdateTempSelectedItems(true);
+        }
+      }
+    );
     watch(
       () => props.modelValue,
       () => {
-        updateSelectedItems();
+        checkUpdateSelectedItems();
       },
       { deep: true }
     );
     watch(
-      () => props.cacheData,
+      tempSelectValue,
       () => {
-        updateSelectedItems(true);
-      }
+        if (isModalType.value && selectVisible.value) {
+          checkUpdateTempSelectedItems();
+        }
+      },
+      { deep: true }
     );
     watch(
       () => props.initValue,
@@ -290,39 +362,64 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { deep: true }
     );
-    watch(
-      () => props.disabled,
-      (disabled) => {
-        if (disabled) {
-          updateVisible(false);
-        }
-      }
-    );
     onMounted(() => {
       if (!isEmptyValue(props.initValue, props.multiple)) {
         handleInitValueChange(props.initValue);
       } else if (!isEmptyValue(props.modelValue, props.multiple)) {
-        updateSelectedItems();
+        checkUpdateSelectedItems();
       }
     });
+    const provideMethods = {
+      clearSelectedItems: handleSelectClear,
+      removeSelectedItem: (item) => {
+        if (props.multiple) {
+          handleSelectRemove(item);
+        } else if (props.modelValue === item.value) {
+          handleSelectClear();
+        }
+      },
+      updateSelectedItems: (items) => {
+        const values = items.map((item) => item.value);
+        updateModelValue(props.multiple ? values : values[0]);
+      },
+      clearTempSelectedItems: () => {
+        tempSelectedItems.value = [];
+        tempSelectValue.value = null;
+      },
+      removeTempSelectedItem: (item) => {
+        const index = tempSelectedItems.value.indexOf(item);
+        tempSelectedItems.value.splice(index, 1);
+        const values = tempSelectedItems.value.map((item2) => item2.value);
+        tempSelectValue.value = props.multiple ? values : values[0];
+      },
+      updateTempSelectedItems: (items) => {
+        tempSelectedItems.value = items;
+        const values = tempSelectedItems.value.map((item) => item.value);
+        tempSelectValue.value = props.multiple ? values : values[0];
+      }
+    };
+    provide(SELECT_DATA_KEY, {
+      selectedItems,
+      tempSelectedItems,
+      ...provideMethods
+    });
     __expose({
       selectRef,
-      tableRef,
-      selectVisible,
-      selectedItems,
-      selectedLabel,
-      currentRowKey,
-      selectedRowKeys,
+      tableRef: proTableRef,
       updatePopover,
-      updateSelectedItems,
       updateVisible,
-      focusSearchInput
+      focusSearchInput,
+      ...provideMethods
     });
     return (_ctx, _cache) => {
+      const _component_EleProTable = resolveComponent("EleProTable");
       return openBlock(), createBlock(EleBasicSelect, {
         ref_key: "selectRef",
         ref: selectRef,
         value: _ctx.modelValue,
+        selectedLabel: selectedLabel.value,
+        selected: selectedItems.value,
+        visible: selectVisible.value,
         multiple: _ctx.multiple,
         disabled: _ctx.disabled,
         size: _ctx.size,
@@ -333,19 +430,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         tagType: _ctx.tagType,
         automaticDropdown: _ctx.automaticDropdown,
         filterable: _ctx.filterable,
+        selectClass: _ctx.selectClass,
+        selectStyle: _ctx.selectStyle,
+        inputStyle: _ctx.inputStyle,
+        selectTagsStyle: _ctx.selectTagsStyle,
+        popperClass: selectPopperClass.value,
+        popperWidth: _ctx.popperWidth,
+        popperHeight: _ctx.popperHeight,
+        popperType: _ctx.popperType,
+        popperProps: _ctx.popperProps,
+        popperSlots: { footer: "modalFooter", ..._ctx.popperSlots || {} },
+        popperTitle: _ctx.popperTitle,
         teleported: _ctx.teleported,
         persistent: _ctx.persistent,
         placement: _ctx.placement,
         transition: _ctx.transition,
-        popperWidth: _ctx.popperWidth,
         popperOptions: _ctx.popperOptions,
-        popperClass: selectPopperClass.value,
-        selectStyle: _ctx.selectStyle,
-        inputStyle: _ctx.inputStyle,
-        selectTagsStyle: _ctx.selectTagsStyle,
-        selectedLabel: selectedLabel.value,
-        selected: selectedItems.value,
-        visible: selectVisible.value,
         "onUpdate:visible": updateVisible,
         onFilterChange: handleSelectFilter,
         onRemoveTag: handleSelectRemove,
@@ -354,52 +454,108 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onBlur: handleSelectBlur
       }, createSlots({
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "popperTopExtra"),
-          createVNode(EleProTable, mergeProps({
-            "onUpdate:selectedRowKeys": updateSelectedRowKeys,
-            "onUpdate:currentRowKey": updateCurrentRowKey,
-            onSelectionChange: handleTableSelectionChange,
-            onCurrentChange: handleTableCurrentChange,
-            onRowClick: handleTableRowClick,
-            onSelect: handleTableSelect,
-            onSelectAll: handleTableSelectAll,
-            onDone: handleTableDone
-          }, _ctx.tableProps || {}, {
-            ref_key: "tableRef",
-            ref: tableRef,
-            rowKey: _ctx.valueKey,
-            reserveCurrent: true,
-            highlightCurrentRow: !_ctx.multiple,
-            currentRowKey: currentRowKey.value,
-            selectedRowKeys: selectedRowKeys.value
-          }), createSlots({ _: 2 }, [
-            renderList(Object.keys(_ctx.$slots).filter(
-              (k) => ![
-                "popperTopExtra",
-                "popperBottomExtra",
-                "maxTagPlaceholder"
-              ].includes(k)
-            ), (name) => {
-              return {
-                name,
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-                ])
-              };
-            })
-          ]), 1040, ["rowKey", "highlightCurrentRow", "currentRowKey", "selectedRowKeys"]),
-          renderSlot(_ctx.$slots, "popperBottomExtra")
+          _ctx.wrapperComponent ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.wrapperComponent), normalizeProps(mergeProps({ key: 0 }, _ctx.wrapperComponentProps || {})), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "popperTopExtra"),
+              createVNode(_component_EleProTable, mergeProps({
+                "onUpdate:selectedRowKeys": handleUpdateTableSelectedRowKeys,
+                "onUpdate:currentRowKey": handleUpdateTableCurrentRowKey,
+                onSelectionChange: handleTableSelectionChange,
+                onCurrentChange: handleTableCurrentChange,
+                onRowClick: handleTableRowClick,
+                onSelect: handleTableSelect,
+                onSelectAll: handleTableSelectAll,
+                onDone: handleTableDone
+              }, _ctx.tableProps || {}, {
+                ref_key: "proTableRef",
+                ref: proTableRef,
+                rowKey: _ctx.valueKey,
+                reserveCurrent: true,
+                highlightCurrentRow: !_ctx.multiple,
+                currentRowKey: tableCurrentRowKey.value,
+                selectedRowKeys: tableSelectedRowKeys.value
+              }), createSlots({ _: 2 }, [
+                renderList(unref(getSlotsMap)(
+                  _ctx.$slots,
+                  _ctx.tableSlots,
+                  [],
+                  ownSlots,
+                  !_ctx.tableSlots
+                ), (slotName, compSlotName) => {
+                  return {
+                    name: compSlotName,
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(slotProps || {})))
+                    ])
+                  };
+                })
+              ]), 1040, ["rowKey", "highlightCurrentRow", "currentRowKey", "selectedRowKeys"]),
+              renderSlot(_ctx.$slots, "popperBottomExtra")
+            ]),
+            _: 3
+          }, 16)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            renderSlot(_ctx.$slots, "popperTopExtra"),
+            createVNode(_component_EleProTable, mergeProps({
+              "onUpdate:selectedRowKeys": handleUpdateTableSelectedRowKeys,
+              "onUpdate:currentRowKey": handleUpdateTableCurrentRowKey,
+              onSelectionChange: handleTableSelectionChange,
+              onCurrentChange: handleTableCurrentChange,
+              onRowClick: handleTableRowClick,
+              onSelect: handleTableSelect,
+              onSelectAll: handleTableSelectAll,
+              onDone: handleTableDone
+            }, _ctx.tableProps || {}, {
+              ref_key: "proTableRef",
+              ref: proTableRef,
+              rowKey: _ctx.valueKey,
+              reserveCurrent: true,
+              highlightCurrentRow: !_ctx.multiple,
+              currentRowKey: tableCurrentRowKey.value,
+              selectedRowKeys: tableSelectedRowKeys.value
+            }), createSlots({ _: 2 }, [
+              renderList(unref(getSlotsMap)(
+                _ctx.$slots,
+                _ctx.tableSlots,
+                [],
+                ownSlots,
+                !_ctx.tableSlots
+              ), (slotName, compSlotName) => {
+                return {
+                  name: compSlotName,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1040, ["rowKey", "highlightCurrentRow", "currentRowKey", "selectedRowKeys"]),
+            renderSlot(_ctx.$slots, "popperBottomExtra")
+          ], 64))
         ]),
         _: 2
       }, [
-        _ctx.$slots.maxTagPlaceholder ? {
-          name: "maxTagPlaceholder",
-          fn: withCtx((slotProps) => [
-            renderSlot(_ctx.$slots, "maxTagPlaceholder", normalizeProps(guardReactiveProps(slotProps || {})))
+        renderList(Object.keys(_ctx.$slots).filter(
+          (k) => k !== "default" && !ownSlots.includes(k)
+        ), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
+          };
+        }),
+        isModalType.value && !_ctx.$slots.modalFooter ? {
+          name: "modalFooter",
+          fn: withCtx(() => [
+            createVNode(EleButtons, {
+              items: [
+                { preset: "cancel", onClick: () => updateVisible(false) },
+                { preset: "confirm", onClick: () => handleConfirm() }
+              ]
+            }, null, 8, ["items"])
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["value", "multiple", "disabled", "size", "clearable", "placeholder", "maxTagCount", "maxTagTextLength", "tagType", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectStyle", "inputStyle", "selectTagsStyle", "selectedLabel", "selected", "visible"]);
+      ]), 1032, ["value", "selectedLabel", "selected", "visible", "multiple", "disabled", "size", "clearable", "placeholder", "maxTagCount", "maxTagTextLength", "tagType", "automaticDropdown", "filterable", "selectClass", "selectStyle", "inputStyle", "selectTagsStyle", "popperClass", "popperWidth", "popperHeight", "popperType", "popperProps", "popperSlots", "popperTitle", "teleported", "persistent", "placement", "transition", "popperOptions"]);
     };
   }
 });