vxe-pc-ui 4.20.34 → 4.20.35

package/es/table-select/src/table-select.js

@@ -37,927 +37,930 @@ function createInternalData() {
     fullValMaps: {}
   };
 }
-var table_select_default = defineVxeComponent({
-  name: "VxeTableSelect",
-  props: {
-    modelValue: [String, Number, Array],
-    clearable: {
-      type: Boolean,
-      default: () => getConfig().tableSelect.clearable
-    },
-    placeholder: {
-      type: String,
-      default: () => XEUtils.eqNull(getConfig().tableSelect.placeholder) ? getI18n("vxe.base.pleaseSelect") : getConfig().tableSelect.placeholder
-    },
-    readonly: {
-      type: Boolean,
-      default: null
-    },
-    loading: Boolean,
-    disabled: {
-      type: Boolean,
-      default: null
-    },
-    multiple: Boolean,
-    className: [String, Function],
-    prefixIcon: String,
-    placement: String,
-    columns: Array,
-    options: Array,
-    optionProps: Object,
-    lazyOptions: Array,
-    filterable: {
-      type: Boolean,
-      default: () => getConfig().tableSelect.filterable
-    },
-    filterConfig: Object,
-    remote: Boolean,
-    remoteConfig: Object,
-    /**
-     * 已废弃，请使用 popupConfig.zIndex
-     * @deprecated
-     */
-    zIndex: Number,
-    size: {
-      type: String,
-      default: () => getConfig().tableSelect.size || getConfig().size
-    },
-    popupConfig: Object,
-    gridConfig: Object,
-    transfer: {
-      type: Boolean,
-      default: null
-    }
-  },
-  emits: [
-    "update:modelValue",
-    "change",
-    "clear",
-    "blur",
-    "focus",
-    "click",
-    "form-submit",
-    "form-reset",
-    "form-collapse",
-    "page-change"
-  ],
-  setup(props, context) {
-    const { emit, slots } = context;
-    const VxeTableGridComponent = VxeUI.getComponent("vxe-grid");
-    const $xeModal = inject("$xeModal", null);
-    const $xeDrawer = inject("$xeDrawer", null);
-    const $xeTable = inject("$xeTable", null);
-    const $xeForm = inject("$xeForm", null);
-    const formItemInfo = inject("xeFormItemInfo", null);
-    const xID = XEUtils.uniqueId();
-    const { computeSize } = useFns.useSize(props);
-    const refElem = ref();
-    const refInput = ref();
-    const refGridWrapper = ref();
-    const refOptionPanel = ref();
-    const refInpSearch = ref();
-    const refGrid = ref();
-    const reactData = reactive(createReactData());
-    const internalData = createInternalData();
-    const refMaps = {
-      refElem
-    };
-    const computeFormReadonly = computed(() => {
-      const { readonly } = props;
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly;
-        }
-        return false;
-      }
-      return readonly;
-    });
-    const computeIsDisabled = computed(() => {
-      const { disabled } = props;
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled;
-        }
-        return false;
+var table_select_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeTableSelect",
+    props: {
+      modelValue: [String, Number, Array],
+      clearable: {
+        type: Boolean,
+        default: () => getConfig().tableSelect.clearable
+      },
+      placeholder: {
+        type: String,
+        default: () => XEUtils.eqNull(getConfig().tableSelect.placeholder) ? getI18n("vxe.base.pleaseSelect") : getConfig().tableSelect.placeholder
+      },
+      readonly: {
+        type: Boolean,
+        default: null
+      },
+      loading: Boolean,
+      disabled: {
+        type: Boolean,
+        default: null
+      },
+      multiple: Boolean,
+      className: [String, Function],
+      prefixIcon: String,
+      placement: String,
+      columns: Array,
+      options: Array,
+      optionProps: Object,
+      lazyOptions: Array,
+      filterable: {
+        type: Boolean,
+        default: () => getConfig().tableSelect.filterable
+      },
+      filterConfig: Object,
+      remote: Boolean,
+      remoteConfig: Object,
+      /**
+       * 已废弃，请使用 popupConfig.zIndex
+       * @deprecated
+       */
+      zIndex: Number,
+      size: {
+        type: String,
+        default: () => getConfig().tableSelect.size || getConfig().size
+      },
+      popupConfig: Object,
+      gridConfig: Object,
+      transfer: {
+        type: Boolean,
+        default: null
       }
-      return disabled;
-    });
-    const computeBtnTransfer = computed(() => {
-      const { transfer } = props;
-      const popupOpts = computePopupOpts.value;
-      if (XEUtils.isBoolean(popupOpts.transfer)) {
-        return popupOpts.transfer;
-      }
-      if (transfer === null) {
-        const globalTransfer = getConfig().tableSelect.transfer;
-        if (XEUtils.isBoolean(globalTransfer)) {
-          return globalTransfer;
-        }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-          return true;
+    },
+    emits: [
+      "update:modelValue",
+      "change",
+      "clear",
+      "blur",
+      "focus",
+      "click",
+      "form-submit",
+      "form-reset",
+      "form-collapse",
+      "page-change"
+    ],
+    setup(props, context) {
+      const { emit, slots } = context;
+      const VxeTableGridComponent = VxeUI.getComponent("vxe-grid");
+      const $xeModal = inject("$xeModal", null);
+      const $xeDrawer = inject("$xeDrawer", null);
+      const $xeTable = inject("$xeTable", null);
+      const $xeForm = inject("$xeForm", null);
+      const formItemInfo = inject("xeFormItemInfo", null);
+      const xID = XEUtils.uniqueId();
+      const { computeSize } = useFns.useSize(props);
+      const refElem = ref();
+      const refInput = ref();
+      const refGridWrapper = ref();
+      const refOptionPanel = ref();
+      const refInpSearch = ref();
+      const refGrid = ref();
+      const reactData = reactive(createReactData());
+      const internalData = createInternalData();
+      const refMaps = {
+        refElem
+      };
+      const computeFormReadonly = computed(() => {
+        const { readonly } = props;
+        if (readonly === null) {
+          if ($xeForm) {
+            return $xeForm.props.readonly;
+          }
+          return false;
         }
-      }
-      return transfer;
-    });
-    const computePropsOpts = computed(() => {
-      return props.optionProps || {};
-    });
-    const computeCheckboxOpts = computed(() => {
-      const { multiple } = props;
-      const gridOpts = computeGridOpts.value;
-      return Object.assign(
-        {
-          reserve: multiple,
-          showReserveStatus: multiple
-        },
-        getConfig().table.checkboxConfig,
-        gridOpts.checkboxConfig
-      );
-    });
-    const computeRowOpts = computed(() => {
-      const { multiple } = props;
-      const gridOpts = computeGridOpts.value;
-      const valueField = computeValueField.value;
-      return Object.assign(
-        {
-          isCurrent: true
-        },
-        multiple ? { keyField: valueField } : {},
-        getConfig().table.rowConfig,
-        gridOpts.rowConfig
-      );
-    });
-    const computeRowKeyField = computed(() => {
-      const rowOpts = computeRowOpts.value;
-      return rowOpts.keyField || "_X_ROW_KEY";
-    });
-    const computeLabelField = computed(() => {
-      const propsOpts = computePropsOpts.value;
-      return propsOpts.label || "label";
-    });
-    const computeValueField = computed(() => {
-      const propsOpts = computePropsOpts.value;
-      return propsOpts.value || "value";
-    });
-    const computePopupOpts = computed(() => {
-      return Object.assign({}, getConfig().tableSelect.popupConfig, props.popupConfig);
-    });
-    const computeGridOpts = computed(() => {
-      return Object.assign({}, getConfig().tableSelect.gridConfig, props.gridConfig, {
-        data: void 0
+        return readonly;
       });
-    });
-    const computeRemoteOpts = computed(() => {
-      return Object.assign({}, getConfig().tableSelect.remoteConfig, props.remoteConfig);
-    });
-    const computeFilterOpts = computed(() => {
-      return Object.assign({}, getConfig().tableSelect.filterConfig, props.filterConfig);
-    });
-    const computeSelectGridOpts = computed(() => {
-      const gridOpts = computeGridOpts.value;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const { pagerConfig, proxyConfig } = gridOpts;
-      if (proxyConfig) {
-        const proxyAjax = proxyConfig.ajax;
-        if (proxyAjax && proxyAjax.query) {
-          const newProxyConfig = XEUtils.clone(proxyConfig, true);
-          const ajaxMethods = proxyAjax.query;
-          if (ajaxMethods) {
-            const resConfigs = proxyConfig.response || proxyConfig.props || {};
-            Object.assign(newProxyConfig.ajax, {
-              query(params, ...args) {
-                return Promise.resolve(ajaxMethods(params, ...args)).then((rest) => {
-                  let currData = [];
-                  if (pagerConfig) {
-                    const resultProp = resConfigs.result;
-                    currData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, resultProp || "result")) || [];
-                  } else {
-                    const listProp = resConfigs.list;
-                    currData = (listProp ? XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, listProp) : rest) || [];
-                  }
-                  cacheDataMap(currData || []);
-                  return rest;
-                });
-              }
-            });
+      const computeIsDisabled = computed(() => {
+        const { disabled } = props;
+        if (disabled === null) {
+          if ($xeForm) {
+            return $xeForm.props.disabled;
           }
-          return Object.assign({}, gridOpts, { checkboxConfig: checkboxOpts, proxyConfig: newProxyConfig });
+          return false;
         }
-      }
-      return Object.assign({}, gridOpts, { checkboxConfig: checkboxOpts });
-    });
-    const computeSelectLabel = computed(() => {
-      const { modelValue, lazyOptions } = props;
-      const { fullValMaps, fullData } = internalData;
-      const valueField = computeValueField.value;
-      const labelField = computeLabelField.value;
-      if (!fullData) {
-        return "";
-      }
-      return (XEUtils.isArray(modelValue) ? modelValue : [modelValue]).map((val) => {
-        const cacheItem = fullValMaps[val];
-        if (cacheItem) {
-          return cacheItem.item[labelField];
-        }
-        if (lazyOptions) {
-          const lazyItem = lazyOptions.find((item) => item[valueField] === val);
-          if (lazyItem) {
-            return lazyItem[labelField];
+        return disabled;
+      });
+      const computeBtnTransfer = computed(() => {
+        const { transfer } = props;
+        const popupOpts = computePopupOpts.value;
+        if (XEUtils.isBoolean(popupOpts.transfer)) {
+          return popupOpts.transfer;
+        }
+        if (transfer === null) {
+          const globalTransfer = getConfig().tableSelect.transfer;
+          if (XEUtils.isBoolean(globalTransfer)) {
+            return globalTransfer;
+          }
+          if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+            return true;
           }
         }
-        return val;
-      }).join(", ");
-    });
-    const computePopupWrapperStyle = computed(() => {
-      const popupOpts = computePopupOpts.value;
-      const { height, width } = popupOpts;
-      const stys = {};
-      if (width) {
-        stys.width = toCssUnit(width);
-      }
-      if (height) {
-        stys.height = toCssUnit(height);
-      }
-      return stys;
-    });
-    const computeMaps = {};
-    const $xeTableSelect = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const gridEventKeys = ["form-submit", "form-reset", "form-collapse", "page-change"];
-    const gridEvents = {};
-    gridEventKeys.forEach((name) => {
-      gridEvents[getOnName(XEUtils.camelCase(name))] = (params) => {
-        dispatchEvent(name, params, params.$event);
-      };
-    });
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $tableSelect: $xeTableSelect }, params));
-    };
-    const emitModel = (value) => {
-      emit("update:modelValue", value);
-    };
-    const tableSelectMethods = {
-      dispatchEvent
-    };
-    const tableSelectPrivateMethods = {};
-    const getRowid = (option) => {
-      const rowKeyField = computeRowKeyField.value;
-      const rowid = option[rowKeyField];
-      return rowid ? encodeURIComponent(rowid) : "";
-    };
-    const getRowsByValue = (modelValue) => {
-      const { fullValMaps } = internalData;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const rowKeyField = computeRowKeyField.value;
-      const valueField = computeValueField.value;
-      const labelField = computeLabelField.value;
-      const rows = [];
-      const vals = XEUtils.eqNull(modelValue) ? [] : XEUtils.isArray(modelValue) ? modelValue : [modelValue];
-      if (checkboxOpts.reserve) {
-        vals.forEach((val) => {
-          const cacheItem = fullValMaps[val];
-          rows.push(
-            cacheItem ? cacheItem.item : {
-              [rowKeyField]: val,
-              [valueField]: val,
-              [labelField]: val
-            }
-          );
+        return transfer;
+      });
+      const computePropsOpts = computed(() => {
+        return props.optionProps || {};
+      });
+      const computeCheckboxOpts = computed(() => {
+        const { multiple } = props;
+        const gridOpts = computeGridOpts.value;
+        return Object.assign(
+          {
+            reserve: multiple,
+            showReserveStatus: multiple
+          },
+          getConfig().table.checkboxConfig,
+          gridOpts.checkboxConfig
+        );
+      });
+      const computeRowOpts = computed(() => {
+        const { multiple } = props;
+        const gridOpts = computeGridOpts.value;
+        const valueField = computeValueField.value;
+        return Object.assign(
+          {
+            isCurrent: true
+          },
+          multiple ? { keyField: valueField } : {},
+          getConfig().table.rowConfig,
+          gridOpts.rowConfig
+        );
+      });
+      const computeRowKeyField = computed(() => {
+        const rowOpts = computeRowOpts.value;
+        return rowOpts.keyField || "_X_ROW_KEY";
+      });
+      const computeLabelField = computed(() => {
+        const propsOpts = computePropsOpts.value;
+        return propsOpts.label || "label";
+      });
+      const computeValueField = computed(() => {
+        const propsOpts = computePropsOpts.value;
+        return propsOpts.value || "value";
+      });
+      const computePopupOpts = computed(() => {
+        return Object.assign({}, getConfig().tableSelect.popupConfig, props.popupConfig);
+      });
+      const computeGridOpts = computed(() => {
+        return Object.assign({}, getConfig().tableSelect.gridConfig, props.gridConfig, {
+          data: void 0
         });
-      } else {
-        vals.forEach((val) => {
+      });
+      const computeRemoteOpts = computed(() => {
+        return Object.assign({}, getConfig().tableSelect.remoteConfig, props.remoteConfig);
+      });
+      const computeFilterOpts = computed(() => {
+        return Object.assign({}, getConfig().tableSelect.filterConfig, props.filterConfig);
+      });
+      const computeSelectGridOpts = computed(() => {
+        const gridOpts = computeGridOpts.value;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const { pagerConfig, proxyConfig } = gridOpts;
+        if (proxyConfig) {
+          const proxyAjax = proxyConfig.ajax;
+          if (proxyAjax && proxyAjax.query) {
+            const newProxyConfig = XEUtils.clone(proxyConfig, true);
+            const ajaxMethods = proxyAjax.query;
+            if (ajaxMethods) {
+              const resConfigs = proxyConfig.response || proxyConfig.props || {};
+              Object.assign(newProxyConfig.ajax, {
+                query(params, ...args) {
+                  return Promise.resolve(ajaxMethods(params, ...args)).then((rest) => {
+                    let currData = [];
+                    if (pagerConfig) {
+                      const resultProp = resConfigs.result;
+                      currData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, resultProp || "result")) || [];
+                    } else {
+                      const listProp = resConfigs.list;
+                      currData = (listProp ? XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, listProp) : rest) || [];
+                    }
+                    cacheDataMap(currData || []);
+                    return rest;
+                  });
+                }
+              });
+            }
+            return Object.assign({}, gridOpts, { checkboxConfig: checkboxOpts, proxyConfig: newProxyConfig });
+          }
+        }
+        return Object.assign({}, gridOpts, { checkboxConfig: checkboxOpts });
+      });
+      const computeSelectLabel = computed(() => {
+        const { modelValue, lazyOptions } = props;
+        const { fullValMaps, fullData } = internalData;
+        const valueField = computeValueField.value;
+        const labelField = computeLabelField.value;
+        if (!fullData) {
+          return "";
+        }
+        return (XEUtils.isArray(modelValue) ? modelValue : [modelValue]).map((val) => {
           const cacheItem = fullValMaps[val];
           if (cacheItem) {
-            rows.push(cacheItem.item);
+            return cacheItem.item[labelField];
           }
-        });
-      }
-      return rows;
-    };
-    const updateModel = (modelValue) => {
-      const { multiple } = props;
-      nextTick(() => {
-        const $grid = refGrid.value;
-        if ($grid) {
-          const selectList = getRowsByValue(modelValue);
-          if (selectList.length) {
-            if (multiple) {
-              $grid.setCheckboxRow(selectList, true);
-            } else {
-              $grid.setRadioRow(selectList[0]);
+          if (lazyOptions) {
+            const lazyItem = lazyOptions.find((item) => item[valueField] === val);
+            if (lazyItem) {
+              return lazyItem[labelField];
             }
           }
+          return val;
+        }).join(", ");
+      });
+      const computePopupWrapperStyle = computed(() => {
+        const popupOpts = computePopupOpts.value;
+        const { height, width } = popupOpts;
+        const stys = {};
+        if (width) {
+          stys.width = toCssUnit(width);
         }
+        if (height) {
+          stys.height = toCssUnit(height);
+        }
+        return stys;
       });
-    };
-    const loadData = (data) => {
-      cacheDataMap(data);
-      handleData();
-    };
-    const loadColumn = (columns) => {
-      if (!columns || !columns.length) {
-        return;
-      }
-      const { multiple } = props;
-      const tableCols = [];
-      let hasRadioCol = false;
-      let hasCheckboxCol = false;
-      columns.forEach((column) => {
-        if (!hasRadioCol && column.type === "radio") {
-          hasRadioCol = true;
-        } else if (!hasCheckboxCol && column.type === "checkbox") {
-          hasCheckboxCol = true;
-        }
-        tableCols.push(column);
+      const computeMaps = {};
+      const $xeTableSelect = {
+        xID,
+        props,
+        context,
+        reactData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const gridEventKeys = ["form-submit", "form-reset", "form-collapse", "page-change"];
+      const gridEvents = {};
+      gridEventKeys.forEach((name) => {
+        gridEvents[getOnName(XEUtils.camelCase(name))] = (params) => {
+          dispatchEvent(name, params, params.$event);
+        };
       });
-      if (multiple) {
-        if (!hasCheckboxCol) {
-          tableCols.unshift({
-            type: "checkbox",
-            width: 70
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $tableSelect: $xeTableSelect }, params));
+      };
+      const emitModel = (value) => {
+        emit("update:modelValue", value);
+      };
+      const tableSelectMethods = {
+        dispatchEvent
+      };
+      const tableSelectPrivateMethods = {};
+      const getRowid = (option) => {
+        const rowKeyField = computeRowKeyField.value;
+        const rowid = option[rowKeyField];
+        return rowid ? encodeURIComponent(rowid) : "";
+      };
+      const getRowsByValue = (modelValue) => {
+        const { fullValMaps } = internalData;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const rowKeyField = computeRowKeyField.value;
+        const valueField = computeValueField.value;
+        const labelField = computeLabelField.value;
+        const rows = [];
+        const vals = XEUtils.eqNull(modelValue) ? [] : XEUtils.isArray(modelValue) ? modelValue : [modelValue];
+        if (checkboxOpts.reserve) {
+          vals.forEach((val) => {
+            const cacheItem = fullValMaps[val];
+            rows.push(
+              cacheItem ? cacheItem.item : {
+                [rowKeyField]: val,
+                [valueField]: val,
+                [labelField]: val
+              }
+            );
           });
-        }
-      } else {
-        if (!hasRadioCol) {
-          tableCols.unshift({
-            type: "radio",
-            width: 70
+        } else {
+          vals.forEach((val) => {
+            const cacheItem = fullValMaps[val];
+            if (cacheItem) {
+              rows.push(cacheItem.item);
+            }
           });
         }
-      }
-      reactData.tableColumns = tableCols;
-    };
-    const cacheDataMap = (dataList) => {
-      const { options } = props;
-      const rowKeyField = computeRowKeyField.value;
-      const valueField = computeValueField.value;
-      const gridOpts = computeGridOpts.value;
-      const { treeConfig, pagerConfig } = gridOpts;
-      const rowMaps = {};
-      const keyMaps = {};
-      if (treeConfig) {
-      } else {
-        XEUtils.arrayEach(dataList || options || [], (item, index, items) => {
-          let rowid = getRowid(item);
-          if (!rowid) {
-            rowid = getRowUniqueId();
-          }
-          if (keyMaps[rowid]) {
-            errLog("vxe.error.repeatKey", [rowKeyField, rowid]);
+        return rows;
+      };
+      const updateModel = (modelValue) => {
+        const { multiple } = props;
+        nextTick(() => {
+          const $grid = refGrid.value;
+          if ($grid) {
+            const selectList = getRowsByValue(modelValue);
+            if (selectList.length) {
+              if (multiple) {
+                $grid.setCheckboxRow(selectList, true);
+              } else {
+                $grid.setRadioRow(selectList[0]);
+              }
+            }
           }
-          keyMaps[rowid] = true;
-          const value = item[valueField];
-          if (rowMaps[value]) {
-            errLog("vxe.error.repeatKey", [valueField, value]);
+        });
+      };
+      const loadData = (data) => {
+        cacheDataMap(data);
+        handleData();
+      };
+      const loadColumn = (columns) => {
+        if (!columns || !columns.length) {
+          return;
+        }
+        const { multiple } = props;
+        const tableCols = [];
+        let hasRadioCol = false;
+        let hasCheckboxCol = false;
+        columns.forEach((column) => {
+          if (!hasRadioCol && column.type === "radio") {
+            hasRadioCol = true;
+          } else if (!hasCheckboxCol && column.type === "checkbox") {
+            hasCheckboxCol = true;
           }
-          rowMaps[value] = { item, index, _index: index, items, parent: null, nodes: [] };
+          tableCols.push(column);
         });
-      }
-      internalData.fullData = dataList || options || [];
-      internalData.fullValMaps = pagerConfig ? Object.assign({}, internalData.fullValMaps, rowMaps) : rowMaps;
-      handleOptList();
-      updateModel(props.modelValue);
-    };
-    const handleOptList = () => {
-      const { remote, modelValue, filterable } = props;
-      const { searchValue } = reactData;
-      const { fullData, fullValMaps } = internalData;
-      const valueField = computeValueField.value;
-      const labelField = computeLabelField.value;
-      const filterOpts = computeFilterOpts.value;
-      const frMethod = filterOpts.filterMethod;
-      const searchStr = `${searchValue || ""}`.toLowerCase();
-      let avList = [];
-      if (remote) {
-        avList = fullData;
-      } else {
-        if (filterable && frMethod) {
-          avList = searchStr ? fullData.filter(
-            (row) => frMethod({
-              $tableSelect: $xeTableSelect,
-              row,
-              filterValue: searchValue,
-              value: modelValue
-            })
-          ) : fullData;
-        } else if (filterable) {
-          avList = searchStr ? fullData.filter((row) => `${row[labelField] || row[valueField]}`.toLowerCase().indexOf(searchStr) > -1) : fullData;
+        if (multiple) {
+          if (!hasCheckboxCol) {
+            tableCols.unshift({
+              type: "checkbox",
+              width: 70
+            });
+          }
         } else {
-          avList = fullData;
+          if (!hasRadioCol) {
+            tableCols.unshift({
+              type: "radio",
+              width: 70
+            });
+          }
         }
-      }
-      avList.forEach((item, index) => {
-        const cacheItem = fullValMaps[item[valueField]];
-        if (cacheItem) {
-          cacheItem._index = index;
+        reactData.tableColumns = tableCols;
+      };
+      const cacheDataMap = (dataList) => {
+        const { options } = props;
+        const rowKeyField = computeRowKeyField.value;
+        const valueField = computeValueField.value;
+        const gridOpts = computeGridOpts.value;
+        const { treeConfig, pagerConfig } = gridOpts;
+        const rowMaps = {};
+        const keyMaps = {};
+        if (treeConfig) {
+        } else {
+          XEUtils.arrayEach(dataList || options || [], (item, index, items) => {
+            let rowid = getRowid(item);
+            if (!rowid) {
+              rowid = getRowUniqueId();
+            }
+            if (keyMaps[rowid]) {
+              errLog("vxe.error.repeatKey", [rowKeyField, rowid]);
+            }
+            keyMaps[rowid] = true;
+            const value = item[valueField];
+            if (rowMaps[value]) {
+              errLog("vxe.error.repeatKey", [valueField, value]);
+            }
+            rowMaps[value] = { item, index, _index: index, items, parent: null, nodes: [] };
+          });
         }
-      });
-      internalData.afterVisibleList = avList;
-      return nextTick();
-    };
-    const updateZindex = () => {
-      const popupOpts = computePopupOpts.value;
-      const customZIndex = popupOpts.zIndex || props.zIndex;
-      if (customZIndex) {
-        reactData.panelIndex = XEUtils.toNumber(customZIndex);
-      } else if (reactData.panelIndex < getLastZIndex()) {
-        reactData.panelIndex = nextZIndex();
-      }
-    };
-    const updatePlacement = () => {
-      const { placement } = props;
-      const { panelIndex } = reactData;
-      const targetElem = refElem.value;
-      const panelElem = refOptionPanel.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const popupOpts = computePopupOpts.value;
-      const handleStyle = () => {
-        const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement: popupOpts.placement || placement,
-          defaultPlacement: popupOpts.defaultPlacement,
-          appendTo: popupOpts.appendTo,
-          teleportTo: btnTransfer
-        });
-        const panelStyle = Object.assign(ppObj.style, {
-          zIndex: panelIndex
+        internalData.fullData = dataList || options || [];
+        internalData.fullValMaps = pagerConfig ? Object.assign({}, internalData.fullValMaps, rowMaps) : rowMaps;
+        handleOptList();
+        updateModel(props.modelValue);
+      };
+      const handleOptList = () => {
+        const { remote, modelValue, filterable } = props;
+        const { searchValue } = reactData;
+        const { fullData, fullValMaps } = internalData;
+        const valueField = computeValueField.value;
+        const labelField = computeLabelField.value;
+        const filterOpts = computeFilterOpts.value;
+        const frMethod = filterOpts.filterMethod;
+        const searchStr = `${searchValue || ""}`.toLowerCase();
+        let avList = [];
+        if (remote) {
+          avList = fullData;
+        } else {
+          if (filterable && frMethod) {
+            avList = searchStr ? fullData.filter(
+              (row) => frMethod({
+                $tableSelect: $xeTableSelect,
+                row,
+                filterValue: searchValue,
+                value: modelValue
+              })
+            ) : fullData;
+          } else if (filterable) {
+            avList = searchStr ? fullData.filter((row) => `${row[labelField] || row[valueField]}`.toLowerCase().indexOf(searchStr) > -1) : fullData;
+          } else {
+            avList = fullData;
+          }
+        }
+        avList.forEach((item, index) => {
+          const cacheItem = fullValMaps[item[valueField]];
+          if (cacheItem) {
+            cacheItem._index = index;
+          }
         });
-        reactData.panelStyle = panelStyle;
-        reactData.panelPlacement = ppObj.placement;
-      };
-      handleStyle();
-      return nextTick().then(handleStyle);
-    };
-    const showOptionPanel = () => {
-      const { loading, remote, filterable } = props;
-      const { fullData } = internalData;
-      const isDisabled = computeIsDisabled.value;
-      const remoteOpts = computeRemoteOpts.value;
-      if (!loading && !isDisabled) {
+        internalData.afterVisibleList = avList;
+        return nextTick();
+      };
+      const updateZindex = () => {
+        const popupOpts = computePopupOpts.value;
+        const customZIndex = popupOpts.zIndex || props.zIndex;
+        if (customZIndex) {
+          reactData.panelIndex = XEUtils.toNumber(customZIndex);
+        } else if (reactData.panelIndex < getLastZIndex()) {
+          reactData.panelIndex = nextZIndex();
+        }
+      };
+      const updatePlacement = () => {
+        const { placement } = props;
+        const { panelIndex } = reactData;
+        const targetElem = refElem.value;
+        const panelElem = refOptionPanel.value;
+        const btnTransfer = computeBtnTransfer.value;
+        const popupOpts = computePopupOpts.value;
+        const handleStyle = () => {
+          const ppObj = updatePanelPlacement(targetElem, panelElem, {
+            placement: popupOpts.placement || placement,
+            defaultPlacement: popupOpts.defaultPlacement,
+            appendTo: popupOpts.appendTo,
+            teleportTo: btnTransfer
+          });
+          const panelStyle = Object.assign(ppObj.style, {
+            zIndex: panelIndex
+          });
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = ppObj.placement;
+        };
+        handleStyle();
+        return nextTick().then(handleStyle);
+      };
+      const showOptionPanel = () => {
+        const { loading, remote, filterable } = props;
+        const { fullData } = internalData;
+        const isDisabled = computeIsDisabled.value;
+        const remoteOpts = computeRemoteOpts.value;
+        if (!loading && !isDisabled) {
+          if (internalData.vpTimeout) {
+            clearTimeout(internalData.vpTimeout);
+          }
+          if (internalData.hpTimeout) {
+            clearTimeout(internalData.hpTimeout);
+          }
+          if (!reactData.initialized) {
+            reactData.initialized = true;
+          }
+          if (filterable) {
+            if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullData.length) {
+              handleSearchEvent();
+            }
+          }
+          reactData.isActivated = true;
+          reactData.isAniVisible = true;
+          internalData.vpTimeout = setTimeout(() => {
+            reactData.visiblePanel = true;
+            updateModel(props.modelValue);
+            internalData.vpTimeout = void 0;
+            handleFocusSearch();
+            updatePlacement();
+          }, 10);
+          updateZindex();
+          updatePlacement();
+        }
+      };
+      const hideOptionPanel = () => {
+        const { filterable } = props;
+        const filterOpts = computeFilterOpts.value;
+        reactData.visiblePanel = false;
+        if (filterable) {
+          if (filterOpts.clearOnClose) {
+            reactData.searchValue = "";
+          }
+        }
         if (internalData.vpTimeout) {
           clearTimeout(internalData.vpTimeout);
         }
         if (internalData.hpTimeout) {
           clearTimeout(internalData.hpTimeout);
         }
-        if (!reactData.initialized) {
-          reactData.initialized = true;
+        internalData.hpTimeout = setTimeout(() => {
+          reactData.isAniVisible = false;
+          internalData.hpTimeout = void 0;
+        }, 350);
+      };
+      const handleData = () => {
+        const { afterVisibleList } = internalData;
+        reactData.tableData = afterVisibleList;
+        return nextTick();
+      };
+      const modelSearchEvent = (value) => {
+        reactData.searchValue = value;
+      };
+      const focusSearchEvent = () => {
+        reactData.isActivated = true;
+      };
+      const handleSearchEvent = () => {
+        const { modelValue, remote } = props;
+        const { searchValue } = reactData;
+        const remoteOpts = computeRemoteOpts.value;
+        const queryMethod = remoteOpts.queryMethod;
+        if (remote && queryMethod && remoteOpts.enabled) {
+          reactData.searchLoading = true;
+          Promise.resolve(queryMethod({ $tableSelect: $xeTableSelect, searchValue, value: modelValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
+            reactData.searchLoading = false;
+          });
+        } else {
+          handleOptList();
+          handleData();
         }
-        if (filterable) {
-          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullData.length) {
-            handleSearchEvent();
+      };
+      const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true });
+      const changeEvent = (evnt, selectValue, row) => {
+        emitModel(selectValue);
+        if (selectValue !== props.modelValue) {
+          dispatchEvent("change", { value: selectValue, row, option: row }, evnt);
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
           }
         }
-        reactData.isActivated = true;
-        reactData.isAniVisible = true;
-        internalData.vpTimeout = setTimeout(() => {
-          reactData.visiblePanel = true;
-          updateModel(props.modelValue);
-          internalData.vpTimeout = void 0;
-          handleFocusSearch();
-          updatePlacement();
-        }, 10);
-        updateZindex();
-        updatePlacement();
-      }
-    };
-    const hideOptionPanel = () => {
-      const { filterable } = props;
-      const filterOpts = computeFilterOpts.value;
-      reactData.visiblePanel = false;
-      if (filterable) {
-        if (filterOpts.clearOnClose) {
-          reactData.searchValue = "";
+      };
+      const clearValueEvent = (evnt, selectValue) => {
+        changeEvent(evnt, selectValue, null);
+        dispatchEvent("clear", { value: selectValue }, evnt);
+      };
+      const clearEvent = (params, evnt) => {
+        const $grid = refGrid.value;
+        if ($grid) {
+          $grid.clearRadioRow();
+          $grid.clearCheckboxRow();
         }
-      }
-      if (internalData.vpTimeout) {
-        clearTimeout(internalData.vpTimeout);
-      }
-      if (internalData.hpTimeout) {
-        clearTimeout(internalData.hpTimeout);
-      }
-      internalData.hpTimeout = setTimeout(() => {
-        reactData.isAniVisible = false;
-        internalData.hpTimeout = void 0;
-      }, 350);
-    };
-    const handleData = () => {
-      const { afterVisibleList } = internalData;
-      reactData.tableData = afterVisibleList;
-      return nextTick();
-    };
-    const modelSearchEvent = (value) => {
-      reactData.searchValue = value;
-    };
-    const focusSearchEvent = () => {
-      reactData.isActivated = true;
-    };
-    const handleSearchEvent = () => {
-      const { modelValue, remote } = props;
-      const { searchValue } = reactData;
-      const remoteOpts = computeRemoteOpts.value;
-      const queryMethod = remoteOpts.queryMethod;
-      if (remote && queryMethod && remoteOpts.enabled) {
-        reactData.searchLoading = true;
-        Promise.resolve(queryMethod({ $tableSelect: $xeTableSelect, searchValue, value: modelValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
-          reactData.searchLoading = false;
-        });
-      } else {
-        handleOptList();
-        handleData();
-      }
-    };
-    const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true });
-    const changeEvent = (evnt, selectValue, row) => {
-      emitModel(selectValue);
-      if (selectValue !== props.modelValue) {
-        dispatchEvent("change", { value: selectValue, row, option: row }, evnt);
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
+        clearValueEvent(evnt, null);
+        hideOptionPanel();
+      };
+      const handleGlobalMousedownEvent = (evnt) => {
+        const { visiblePanel } = reactData;
+        const isDisabled = computeIsDisabled.value;
+        if (!isDisabled) {
+          const el = refElem.value;
+          const panelElem = refOptionPanel.value;
+          reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
+          if (visiblePanel && !reactData.isActivated) {
+            hideOptionPanel();
+          }
         }
-      }
-    };
-    const clearValueEvent = (evnt, selectValue) => {
-      changeEvent(evnt, selectValue, null);
-      dispatchEvent("clear", { value: selectValue }, evnt);
-    };
-    const clearEvent = (params, evnt) => {
-      const $grid = refGrid.value;
-      if ($grid) {
-        $grid.clearRadioRow();
-        $grid.clearCheckboxRow();
-      }
-      clearValueEvent(evnt, null);
-      hideOptionPanel();
-    };
-    const handleGlobalMousedownEvent = (evnt) => {
-      const { visiblePanel } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        const el = refElem.value;
-        const panelElem = refOptionPanel.value;
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
-        if (visiblePanel && !reactData.isActivated) {
+      };
+      const handleGlobalBlurEvent = () => {
+        const { visiblePanel, isActivated } = reactData;
+        if (visiblePanel) {
           hideOptionPanel();
         }
-      }
-    };
-    const handleGlobalBlurEvent = () => {
-      const { visiblePanel, isActivated } = reactData;
-      if (visiblePanel) {
-        hideOptionPanel();
-      }
-      if (isActivated) {
-        reactData.isActivated = false;
-      }
-      if (visiblePanel || isActivated) {
-        const $input = refInput.value;
-        if ($input) {
-          $input.blur();
+        if (isActivated) {
+          reactData.isActivated = false;
         }
-      }
-    };
-    const handleGlobalResizeEvent = () => {
-      const { visiblePanel } = reactData;
-      if (visiblePanel) {
-        updatePlacement();
-      }
-    };
-    const handleGlobalScrollEvent = () => {
-      const { visiblePanel } = reactData;
-      if (visiblePanel) {
-        updatePlacement();
-      }
-    };
-    const handleFocusSearch = () => {
-      if (props.filterable) {
-        nextTick(() => {
-          const inpSearch = refInpSearch.value;
-          if (inpSearch) {
-            inpSearch.focus();
+        if (visiblePanel || isActivated) {
+          const $input = refInput.value;
+          if ($input) {
+            $input.blur();
           }
-        });
-      }
-    };
-    const focusEvent = (evnt) => {
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        if (!reactData.visiblePanel) {
-          reactData.triggerFocusPanel = true;
-          showOptionPanel();
-          setTimeout(() => {
-            reactData.triggerFocusPanel = false;
-          }, 150);
         }
-      }
-      dispatchEvent("focus", {}, evnt);
-    };
-    const clickEvent = (evnt) => {
-      togglePanelEvent(evnt);
-      dispatchEvent("click", {}, evnt);
-    };
-    const blurEvent = (evnt) => {
-      reactData.isActivated = false;
-      dispatchEvent("blur", {}, evnt);
-    };
-    const togglePanelEvent = (params) => {
-      const { $event } = params;
-      $event.preventDefault();
-      if (reactData.triggerFocusPanel) {
-        reactData.triggerFocusPanel = false;
-      } else {
-        if (reactData.visiblePanel) {
-          hideOptionPanel();
-        } else {
-          showOptionPanel();
+      };
+      const handleGlobalResizeEvent = () => {
+        const { visiblePanel } = reactData;
+        if (visiblePanel) {
+          updatePlacement();
         }
-      }
-    };
-    const radioChangeEvent = (params) => {
-      const { $event, row } = params;
-      const valueField = computeValueField.value;
-      const value = row[valueField];
-      changeEvent($event, value, row);
-      hideOptionPanel();
-    };
-    const checkboxChangeEvent = (params) => {
-      const { $grid, $event, row } = params;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const valueField = computeValueField.value;
-      if ($grid) {
-        const checkboxRecords = $grid.getCheckboxRecords();
-        if (checkboxOpts.reserve) {
-          checkboxRecords.push(...$grid.getCheckboxReserveRecords());
+      };
+      const handleGlobalScrollEvent = () => {
+        const { visiblePanel } = reactData;
+        if (visiblePanel) {
+          updatePlacement();
         }
-        const value = checkboxRecords.map((row2) => {
-          return row2[valueField];
-        });
+      };
+      const handleFocusSearch = () => {
+        if (props.filterable) {
+          nextTick(() => {
+            const inpSearch = refInpSearch.value;
+            if (inpSearch) {
+              inpSearch.focus();
+            }
+          });
+        }
+      };
+      const focusEvent = (evnt) => {
+        const isDisabled = computeIsDisabled.value;
+        if (!isDisabled) {
+          if (!reactData.visiblePanel) {
+            reactData.triggerFocusPanel = true;
+            showOptionPanel();
+            setTimeout(() => {
+              reactData.triggerFocusPanel = false;
+            }, 150);
+          }
+        }
+        dispatchEvent("focus", {}, evnt);
+      };
+      const clickEvent = (evnt) => {
+        togglePanelEvent(evnt);
+        dispatchEvent("click", {}, evnt);
+      };
+      const blurEvent = (evnt) => {
+        reactData.isActivated = false;
+        dispatchEvent("blur", {}, evnt);
+      };
+      const togglePanelEvent = (params) => {
+        const { $event } = params;
+        $event.preventDefault();
+        if (reactData.triggerFocusPanel) {
+          reactData.triggerFocusPanel = false;
+        } else {
+          if (reactData.visiblePanel) {
+            hideOptionPanel();
+          } else {
+            showOptionPanel();
+          }
+        }
+      };
+      const radioChangeEvent = (params) => {
+        const { $event, row } = params;
+        const valueField = computeValueField.value;
+        const value = row[valueField];
         changeEvent($event, value, row);
-      }
-    };
-    const checkboxAllEvent = (params) => {
-      checkboxChangeEvent(params);
-    };
-    Object.assign($xeTableSelect, tableSelectMethods, tableSelectPrivateMethods);
-    const renderVN = () => {
-      const { className, loading, filterable, remote } = props;
-      const { initialized, isActivated, isAniVisible, visiblePanel, tableColumns, searchValue, tableData, searchLoading } = reactData;
-      const vSize = computeSize.value;
-      const isDisabled = computeIsDisabled.value;
-      const selectLabel = computeSelectLabel.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const formReadonly = computeFormReadonly.value;
-      const popupOpts = computePopupOpts.value;
-      const selectGridOpts = computeSelectGridOpts.value;
-      const rowOpts = computeRowOpts.value;
-      const filterOpts = computeFilterOpts.value;
-      const popupWrapperStyle = computePopupWrapperStyle.value;
-      const { appendTo } = popupOpts;
-      const headerSlot = slots.header;
-      const footerSlot = slots.footer;
-      const prefixSlot = slots.prefix;
-      const ppClassName = popupOpts.className;
-      if (formReadonly) {
+        hideOptionPanel();
+      };
+      const checkboxChangeEvent = (params) => {
+        const { $grid, $event, row } = params;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const valueField = computeValueField.value;
+        if ($grid) {
+          const checkboxRecords = $grid.getCheckboxRecords();
+          if (checkboxOpts.reserve) {
+            checkboxRecords.push(...$grid.getCheckboxReserveRecords());
+          }
+          const value = checkboxRecords.map((row2) => {
+            return row2[valueField];
+          });
+          changeEvent($event, value, row);
+        }
+      };
+      const checkboxAllEvent = (params) => {
+        checkboxChangeEvent(params);
+      };
+      Object.assign($xeTableSelect, tableSelectMethods, tableSelectPrivateMethods);
+      const renderVN = () => {
+        const { className, loading, filterable, remote } = props;
+        const { initialized, isActivated, isAniVisible, visiblePanel, tableColumns, searchValue, tableData, searchLoading } = reactData;
+        const vSize = computeSize.value;
+        const isDisabled = computeIsDisabled.value;
+        const selectLabel = computeSelectLabel.value;
+        const btnTransfer = computeBtnTransfer.value;
+        const formReadonly = computeFormReadonly.value;
+        const popupOpts = computePopupOpts.value;
+        const selectGridOpts = computeSelectGridOpts.value;
+        const rowOpts = computeRowOpts.value;
+        const filterOpts = computeFilterOpts.value;
+        const popupWrapperStyle = computePopupWrapperStyle.value;
+        const { appendTo } = popupOpts;
+        const headerSlot = slots.header;
+        const footerSlot = slots.footer;
+        const prefixSlot = slots.prefix;
+        const ppClassName = popupOpts.className;
+        if (formReadonly) {
+          return h(
+            "div",
+            {
+              ref: refElem,
+              class: ["vxe-table-select--readonly", className]
+            },
+            [
+              h(
+                "span",
+                {
+                  class: "vxe-table-select-label"
+                },
+                selectLabel
+              )
+            ]
+          );
+        }
         return h(
           "div",
           {
             ref: refElem,
-            class: ["vxe-table-select--readonly", className]
+            class: [
+              "vxe-table-select",
+              className ? XEUtils.isFunction(className) ? className({ $tableSelect: $xeTableSelect }) : className : "",
+              {
+                [`size--${vSize}`]: vSize,
+                "is--filterable": filterable,
+                "is--visible": visiblePanel,
+                "is--disabled": isDisabled,
+                "is--loading": loading,
+                "is--active": isActivated
+              }
+            ]
           },
           [
             h(
-              "span",
+              VxeInputComponent,
               {
-                class: "vxe-table-select-label"
+                ref: refInput,
+                clearable: props.clearable,
+                placeholder: loading ? getI18n("vxe.select.loadingText") : props.placeholder,
+                editable: false,
+                disabled: isDisabled,
+                type: "text",
+                prefixIcon: props.prefixIcon,
+                suffixIcon: loading ? getIcon().TABLE_SELECT_LOADED : visiblePanel ? getIcon().TABLE_SELECT_OPEN : getIcon().TABLE_SELECT_CLOSE,
+                modelValue: loading ? "" : selectLabel,
+                onClear: clearEvent,
+                onClick: clickEvent,
+                onFocus: focusEvent,
+                onBlur: blurEvent,
+                onSuffixClick: togglePanelEvent
               },
-              selectLabel
+              prefixSlot ? {
+                prefix: () => prefixSlot({})
+              } : {}
+            ),
+            h(
+              Teleport,
+              {
+                to: getPopupContainer(appendTo),
+                disabled: btnTransfer ? !initialized : true
+              },
+              [
+                h(
+                  "div",
+                  {
+                    ref: refOptionPanel,
+                    class: [
+                      "vxe-table--ignore-clear vxe-table-select--panel",
+                      ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $tableSelect: $xeTableSelect }) : ppClassName : "",
+                      {
+                        [`size--${vSize}`]: vSize,
+                        "is--transfer": btnTransfer,
+                        "ani--leave": !loading && isAniVisible,
+                        "ani--enter": !loading && visiblePanel
+                      }
+                    ],
+                    placement: reactData.panelPlacement,
+                    style: reactData.panelStyle
+                  },
+                  initialized ? [
+                    h(
+                      "div",
+                      {
+                        class: "vxe-table-select--panel-wrapper"
+                      },
+                      [
+                        filterable ? h(
+                          "div",
+                          {
+                            class: "vxe-table-select--panel-search"
+                          },
+                          [
+                            h(VxeInputComponent, {
+                              ref: refInpSearch,
+                              class: "vxe-table-select-search--input",
+                              modelValue: searchValue,
+                              clearable: true,
+                              disabled: false,
+                              readonly: false,
+                              placeholder: getI18n("vxe.treeSelect.search"),
+                              prefixIcon: getIcon().INPUT_SEARCH,
+                              "onUpdate:modelValue": modelSearchEvent,
+                              onFocus: focusSearchEvent,
+                              onChange: triggerSearchEvent,
+                              onSearch: triggerSearchEvent
+                            })
+                          ]
+                        ) : renderEmptyElement($xeTableSelect),
+                        headerSlot ? h(
+                          "div",
+                          {
+                            class: "vxe-table-select--panel-header"
+                          },
+                          headerSlot({})
+                        ) : renderEmptyElement($xeTableSelect),
+                        h(
+                          "div",
+                          {
+                            class: "vxe-table-select--panel-body"
+                          },
+                          [
+                            h(
+                              "div",
+                              {
+                                ref: refGridWrapper,
+                                class: "vxe-table-select-grid--wrapper",
+                                style: popupWrapperStyle
+                              },
+                              [
+                                VxeTableGridComponent ? h(
+                                  VxeTableGridComponent,
+                                  {
+                                    ...selectGridOpts,
+                                    ...gridEvents,
+                                    class: "vxe-table-select--grid",
+                                    ref: refGrid,
+                                    loading: remote && searchLoading,
+                                    rowConfig: rowOpts,
+                                    data: tableData,
+                                    columns: tableColumns.length ? tableColumns : selectGridOpts.columns,
+                                    height: "100%",
+                                    autoResize: true,
+                                    onRadioChange: radioChangeEvent,
+                                    onCheckboxChange: checkboxChangeEvent,
+                                    onCheckboxAll: checkboxAllEvent
+                                  },
+                                  Object.assign({}, slots, {
+                                    header: void 0,
+                                    footer: void 0,
+                                    prefixSlot: void 0
+                                  })
+                                ) : renderEmptyElement($xeTableSelect)
+                              ]
+                            )
+                          ]
+                        ),
+                        footerSlot || filterable && searchValue && !remote && filterOpts.showResultCount ? h(
+                          "div",
+                          {
+                            class: "vxe-table-select--panel-footer"
+                          },
+                          footerSlot ? footerSlot({}) : [
+                            h(
+                              "div",
+                              {
+                                class: "vxe-table-select--search-count"
+                              },
+                              searchLoading ? "" : getI18n("vxe.tableSelect.filterCount", [tableData.length])
+                            )
+                          ]
+                        ) : renderEmptyElement($xeTableSelect)
+                      ]
+                    )
+                  ] : []
+                )
+              ]
             )
           ]
         );
-      }
-      return h(
-        "div",
-        {
-          ref: refElem,
-          class: [
-            "vxe-table-select",
-            className ? XEUtils.isFunction(className) ? className({ $tableSelect: $xeTableSelect }) : className : "",
-            {
-              [`size--${vSize}`]: vSize,
-              "is--filterable": filterable,
-              "is--visible": visiblePanel,
-              "is--disabled": isDisabled,
-              "is--loading": loading,
-              "is--active": isActivated
-            }
-          ]
-        },
-        [
-          h(
-            VxeInputComponent,
-            {
-              ref: refInput,
-              clearable: props.clearable,
-              placeholder: loading ? getI18n("vxe.select.loadingText") : props.placeholder,
-              editable: false,
-              disabled: isDisabled,
-              type: "text",
-              prefixIcon: props.prefixIcon,
-              suffixIcon: loading ? getIcon().TABLE_SELECT_LOADED : visiblePanel ? getIcon().TABLE_SELECT_OPEN : getIcon().TABLE_SELECT_CLOSE,
-              modelValue: loading ? "" : selectLabel,
-              onClear: clearEvent,
-              onClick: clickEvent,
-              onFocus: focusEvent,
-              onBlur: blurEvent,
-              onSuffixClick: togglePanelEvent
-            },
-            prefixSlot ? {
-              prefix: () => prefixSlot({})
-            } : {}
-          ),
-          h(
-            Teleport,
-            {
-              to: getPopupContainer(appendTo),
-              disabled: btnTransfer ? !initialized : true
-            },
-            [
-              h(
-                "div",
-                {
-                  ref: refOptionPanel,
-                  class: [
-                    "vxe-table--ignore-clear vxe-table-select--panel",
-                    ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $tableSelect: $xeTableSelect }) : ppClassName : "",
-                    {
-                      [`size--${vSize}`]: vSize,
-                      "is--transfer": btnTransfer,
-                      "ani--leave": !loading && isAniVisible,
-                      "ani--enter": !loading && visiblePanel
-                    }
-                  ],
-                  placement: reactData.panelPlacement,
-                  style: reactData.panelStyle
-                },
-                initialized ? [
-                  h(
-                    "div",
-                    {
-                      class: "vxe-table-select--panel-wrapper"
-                    },
-                    [
-                      filterable ? h(
-                        "div",
-                        {
-                          class: "vxe-table-select--panel-search"
-                        },
-                        [
-                          h(VxeInputComponent, {
-                            ref: refInpSearch,
-                            class: "vxe-table-select-search--input",
-                            modelValue: searchValue,
-                            clearable: true,
-                            disabled: false,
-                            readonly: false,
-                            placeholder: getI18n("vxe.treeSelect.search"),
-                            prefixIcon: getIcon().INPUT_SEARCH,
-                            "onUpdate:modelValue": modelSearchEvent,
-                            onFocus: focusSearchEvent,
-                            onChange: triggerSearchEvent,
-                            onSearch: triggerSearchEvent
-                          })
-                        ]
-                      ) : renderEmptyElement($xeTableSelect),
-                      headerSlot ? h(
-                        "div",
-                        {
-                          class: "vxe-table-select--panel-header"
-                        },
-                        headerSlot({})
-                      ) : renderEmptyElement($xeTableSelect),
-                      h(
-                        "div",
-                        {
-                          class: "vxe-table-select--panel-body"
-                        },
-                        [
-                          h(
-                            "div",
-                            {
-                              ref: refGridWrapper,
-                              class: "vxe-table-select-grid--wrapper",
-                              style: popupWrapperStyle
-                            },
-                            [
-                              VxeTableGridComponent ? h(
-                                VxeTableGridComponent,
-                                {
-                                  ...selectGridOpts,
-                                  ...gridEvents,
-                                  class: "vxe-table-select--grid",
-                                  ref: refGrid,
-                                  loading: remote && searchLoading,
-                                  rowConfig: rowOpts,
-                                  data: tableData,
-                                  columns: tableColumns.length ? tableColumns : selectGridOpts.columns,
-                                  height: "100%",
-                                  autoResize: true,
-                                  onRadioChange: radioChangeEvent,
-                                  onCheckboxChange: checkboxChangeEvent,
-                                  onCheckboxAll: checkboxAllEvent
-                                },
-                                Object.assign({}, slots, {
-                                  header: void 0,
-                                  footer: void 0,
-                                  prefixSlot: void 0
-                                })
-                              ) : renderEmptyElement($xeTableSelect)
-                            ]
-                          )
-                        ]
-                      ),
-                      footerSlot || filterable && searchValue && !remote && filterOpts.showResultCount ? h(
-                        "div",
-                        {
-                          class: "vxe-table-select--panel-footer"
-                        },
-                        footerSlot ? footerSlot({}) : [
-                          h(
-                            "div",
-                            {
-                              class: "vxe-table-select--search-count"
-                            },
-                            searchLoading ? "" : getI18n("vxe.tableSelect.filterCount", [tableData.length])
-                          )
-                        ]
-                      ) : renderEmptyElement($xeTableSelect)
-                    ]
-                  )
-                ] : []
-              )
-            ]
-          )
-        ]
+      };
+      watch(
+        () => props.options,
+        (val) => {
+          loadData(val || []);
+        }
       );
-    };
-    watch(
-      () => props.options,
-      (val) => {
-        loadData(val || []);
-      }
-    );
-    watch(
-      () => props.columns,
-      (val) => {
-        loadColumn(val);
-      }
-    );
-    watch(
-      () => props.modelValue,
-      (val) => {
-        updateModel(val);
-      }
-    );
-    loadColumn(props.columns);
-    loadData(props.options || []);
-    onMounted(() => {
-      const { gridConfig } = props;
-      if (gridConfig && gridConfig.proxyConfig) {
-        if (gridConfig.proxyConfig.autoLoad !== false) {
-          reactData.initialized = true;
+      watch(
+        () => props.columns,
+        (val) => {
+          loadColumn(val);
         }
-      }
-      globalEvents.on($xeTableSelect, "mousedown", handleGlobalMousedownEvent);
-      globalEvents.on($xeTableSelect, "blur", handleGlobalBlurEvent);
-      globalEvents.on($xeTableSelect, "resize", handleGlobalResizeEvent);
-      globalEvents.on($xeTableSelect, "scroll", handleGlobalScrollEvent);
-    });
-    onUnmounted(() => {
-      globalEvents.off($xeTableSelect, "mousedown");
-      globalEvents.off($xeTableSelect, "blur");
-      globalEvents.off($xeTableSelect, "resize");
-      globalEvents.off($xeTableSelect, "scroll");
-      XEUtils.assign(reactData, createReactData());
-      XEUtils.assign(internalData, createInternalData());
-    });
-    nextTick(() => {
-      if (!VxeTableGridComponent) {
-        errLog("vxe.error.reqComp", ["vxe-grid"]);
-      }
-    });
-    provide("$xeTableSelect", $xeTableSelect);
-    $xeTableSelect.renderVN = renderVN;
-    return $xeTableSelect;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      );
+      watch(
+        () => props.modelValue,
+        (val) => {
+          updateModel(val);
+        }
+      );
+      loadColumn(props.columns);
+      loadData(props.options || []);
+      onMounted(() => {
+        const { gridConfig } = props;
+        if (gridConfig && gridConfig.proxyConfig) {
+          if (gridConfig.proxyConfig.autoLoad !== false) {
+            reactData.initialized = true;
+          }
+        }
+        globalEvents.on($xeTableSelect, "mousedown", handleGlobalMousedownEvent);
+        globalEvents.on($xeTableSelect, "blur", handleGlobalBlurEvent);
+        globalEvents.on($xeTableSelect, "resize", handleGlobalResizeEvent);
+        globalEvents.on($xeTableSelect, "scroll", handleGlobalScrollEvent);
+      });
+      onUnmounted(() => {
+        globalEvents.off($xeTableSelect, "mousedown");
+        globalEvents.off($xeTableSelect, "blur");
+        globalEvents.off($xeTableSelect, "resize");
+        globalEvents.off($xeTableSelect, "scroll");
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+      });
+      nextTick(() => {
+        if (!VxeTableGridComponent) {
+          errLog("vxe.error.reqComp", ["vxe-grid"]);
+        }
+      });
+      provide("$xeTableSelect", $xeTableSelect);
+      $xeTableSelect.renderVN = renderVN;
+      return $xeTableSelect;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   table_select_default as default,
   getRowUniqueId