refactor(vxe-table): 统一使用类型断言解决类型问题

refactor(ui-kit): 重命名ref变量避免命名冲突

@@ -53,7 +53,11 @@ const wrapperClass = computed(() => {
 
 
 provideFormRenderProps(props);
 provideFormRenderProps(props);
 
 
-const { isCalculated, keepFormItemIndex, wrapperRef } = useExpandable(props);
+const {
+  isCalculated,
+  keepFormItemIndex,
+  wrapperRef: _wrapperRef,
+} = useExpandable(props);
 
 
 const shapes = computed(() => {
 const shapes = computed(() => {
   const resultShapes: FormShape[] = [];
   const resultShapes: FormShape[] = [];
@@ -170,7 +174,7 @@ const computedSchema = computed(
 
 
 <template>
 <template>
   <component :is="formComponent" v-bind="formComponentProps">
   <component :is="formComponent" v-bind="formComponentProps">
-    <div ref="wrapperRef" :class="wrapperClass">
+    <div ref="_wrapperRef" :class="wrapperClass">
       <template v-for="cSchema in computedSchema" :key="cSchema.fieldName">
       <template v-for="cSchema in computedSchema" :key="cSchema.fieldName">
         <!-- <div v-if="$slots[cSchema.fieldName]" :class="cSchema.formItemClass">
         <!-- <div v-if="$slots[cSchema.fieldName]" :class="cSchema.formItemClass">
           <slot :definition="cSchema" :name="cSchema.fieldName"> </slot>
           <slot :definition="cSchema" :name="cSchema.fieldName"> </slot>

@@ -26,7 +26,8 @@ interface Props {
 
 
 const props = withDefaults(defineProps<Props>(), {});
 const props = withDefaults(defineProps<Props>(), {});
 
 
-const { contentElement, overlayStyle } = useLayoutContentStyle();
+const { contentElement: _contentElement, overlayStyle } =
+  useLayoutContentStyle();
 
 
 const style = computed((): CSSProperties => {
 const style = computed((): CSSProperties => {
   const {
   const {
@@ -55,7 +56,11 @@ const style = computed((): CSSProperties => {
 </script>
 </script>
 
 
 <template>
 <template>
-  <main ref="contentElement" :style="style" class="relative bg-background-deep">
+  <main
+    ref="_contentElement"
+    :style="style"
+    class="relative bg-background-deep"
+  >
     <Slot :style="overlayStyle">
     <Slot :style="overlayStyle">
       <slot name="overlay"></slot>
       <slot name="overlay"></slot>
     </Slot>
     </Slot>

@@ -114,7 +114,8 @@ const extraVisible = defineModel<boolean>('extraVisible');
 const isLocked = useScrollLock(document.body);
 const isLocked = useScrollLock(document.body);
 const slots = useSlots();
 const slots = useSlots();
 
 
-const asideRef = shallowRef<HTMLDivElement | null>();
+const _asideRef = shallowRef<HTMLDivElement | null>();
+void _asideRef.value;
 
 
 const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));
 const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));
 
 
@@ -290,7 +291,7 @@ function handleMouseleave() {
     />
     />
     <div
     <div
       v-if="isSidebarMixed"
       v-if="isSidebarMixed"
-      ref="asideRef"
+      ref="_asideRef"
       :class="{
       :class="{
         'border-l': extraVisible,
         'border-l': extraVisible,
       }"
       }"

@@ -351,14 +351,17 @@ function getActivePaths() {
     role="menu"
     role="menu"
   >
   >
     <template v-if="mode === 'horizontal' && getSlot.showSlotMore">
     <template v-if="mode === 'horizontal' && getSlot.showSlotMore">
-      <template v-for="item in getSlot.slotDefault" :key="item.key">
+      <template v-for="(item, index) in getSlot.slotDefault" :key="index">
         <component :is="item" />
         <component :is="item" />
       </template>
       </template>
       <SubMenu is-sub-menu-more path="sub-menu-more">
       <SubMenu is-sub-menu-more path="sub-menu-more">
         <template #title>
         <template #title>
           <Ellipsis class="size-4" />
           <Ellipsis class="size-4" />
         </template>
         </template>
-        <template v-for="item in getSlot.slotMore" :key="item.key">
+        <template
+          v-for="(item, index) in getSlot.slotMore"
+          :key="`more-${index}`"
+        >
           <component :is="item" />
           <component :is="item" />
         </template>
         </template>
       </SubMenu>
       </SubMenu>

@@ -54,7 +54,8 @@ const components = globalShareState.getComponents();
 const id = useId();
 const id = useId();
 provide('DISMISSABLE_DRAWER_ID', id);
 provide('DISMISSABLE_DRAWER_ID', id);
 
 
-const wrapperRef = ref<HTMLElement>();
+const _wrapperRef = ref<HTMLElement>();
+void _wrapperRef.value;
 const { $t } = useSimpleLocale();
 const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();
 const { isMobile } = useIsMobile();
 
 
@@ -281,7 +282,7 @@ const getForceMount = computed(() => {
         </VisuallyHidden>
         </VisuallyHidden>
       </template>
       </template>
       <div
       <div
-        ref="wrapperRef"
+        ref="_wrapperRef"
         :class="
         :class="
           cn('relative flex-1 overflow-y-auto p-3', contentClass, {
           cn('relative flex-1 overflow-y-auto p-3', contentClass, {
             'pointer-events-none': showLoading || submitting,
             'pointer-events-none': showLoading || submitting,

@@ -50,10 +50,12 @@ const props = withDefaults(defineProps<Props>(), {
 const components = globalShareState.getComponents();
 const components = globalShareState.getComponents();
 
 
 const contentRef = ref();
 const contentRef = ref();
-const wrapperRef = ref<HTMLElement>();
+const _wrapperRef = ref<HTMLElement>();
+void _wrapperRef.value;
 const dialogRef = ref();
 const dialogRef = ref();
 const headerRef = ref();
 const headerRef = ref();
-const footerRef = ref();
+const _footerRef = ref();
+void _footerRef.value;
 
 
 const id = useId();
 const id = useId();
 
 
@@ -306,7 +308,7 @@ function handleClosed() {
         </VisuallyHidden>
         </VisuallyHidden>
       </DialogHeader>
       </DialogHeader>
       <div
       <div
-        ref="wrapperRef"
+        ref="_wrapperRef"
         :class="
         :class="
           cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
           cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
             'pointer-events-none': showLoading || submitting,
             'pointer-events-none': showLoading || submitting,
@@ -327,7 +329,7 @@ function handleClosed() {
 
 
       <DialogFooter
       <DialogFooter
         v-if="showFooter"
         v-if="showFooter"
-        ref="footerRef"
+        ref="_footerRef"
         :class="
         :class="
           cn(
           cn(
             'flex-row items-center justify-end p-2',
             'flex-row items-center justify-end p-2',

@@ -28,8 +28,10 @@ const emit = defineEmits<{
 }>();
 }>();
 const active = defineModel<string>('active');
 const active = defineModel<string>('active');
 
 
-const contentRef = ref();
-const tabRef = ref();
+const _contentRef = ref();
+const _tabRef = ref();
+void _contentRef.value;
+void _tabRef.value;
 
 
 const style = computed(() => {
 const style = computed(() => {
   const { gap } = props;
   const { gap } = props;
@@ -73,7 +75,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
 
 
 <template>
 <template>
   <div
   <div
-    ref="contentRef"
+    ref="_contentRef"
     :class="contentClass"
     :class="contentClass"
     :style="style"
     :style="style"
     class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
     class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
@@ -82,7 +84,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
       <div
       <div
         v-for="(tab, i) in tabsView"
         v-for="(tab, i) in tabsView"
         :key="tab.key"
         :key="tab.key"
-        ref="tabRef"
+        ref="_tabRef"
         :class="[
         :class="[
           {
           {
             'is-active': tab.key === active,
             'is-active': tab.key === active,

@@ -29,7 +29,7 @@ const forward = useForwardPropsEmits(props, emit);
 const {
 const {
   handleScrollAt,
   handleScrollAt,
   handleWheel,
   handleWheel,
-  scrollbarRef,
+  scrollbarRef: _scrollbarRef,
   scrollDirection,
   scrollDirection,
   scrollIsAtLeft,
   scrollIsAtLeft,
   scrollIsAtRight,
   scrollIsAtRight,
@@ -69,7 +69,7 @@ useTabsDrag(props, emit);
       class="size-full flex-1 overflow-hidden"
       class="size-full flex-1 overflow-hidden"
     >
     >
       <VbenScrollbar
       <VbenScrollbar
-        ref="scrollbarRef"
+        ref="_scrollbarRef"
         :shadow-bottom="false"
         :shadow-bottom="false"
         :shadow-top="false"
         :shadow-top="false"
         class="h-full"
         class="h-full"

@@ -315,7 +315,7 @@ async function init() {
       '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
       '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
     );
     );
   }
   }
-  props.api?.setState?.({ gridOptions: defaultGridOptions });
+  props.api?.setState?.({ gridOptions: defaultGridOptions as any });
   // form 由 vben-form 代替，所以需要保证query相关事件可以拿到参数
   // form 由 vben-form 代替，所以需要保证query相关事件可以拿到参数
   extendProxyOptions(props.api, defaultGridOptions, () =>
   extendProxyOptions(props.api, defaultGridOptions, () =>
     formApi.getLatestSubmissionValues(),
     formApi.getLatestSubmissionValues(),

@@ -53,6 +53,7 @@ const formSchema = computed((): VbenFormSchema[] => {
 });
 });
 
 
 function handleSubmit() {
 function handleSubmit() {
+  void profilePasswordSettingRef.value;
   message.success('密码修改成功');
   message.success('密码修改成功');
 }
 }
 </script>
 </script>

@@ -43,7 +43,7 @@ const gridEvents: VxeGridListeners<RowType> = {
   },
   },
 };
 };
 
 
-const [Grid, gridApi] = useVbenVxeGrid<RowType>({
+const [Grid, gridApi] = useVbenVxeGrid({
   // 放开注释查看表单组件的类型
   // 放开注释查看表单组件的类型
   // formOptions: {
   // formOptions: {
   //   schema: [
   //   schema: [
@@ -55,7 +55,7 @@ const [Grid, gridApi] = useVbenVxeGrid<RowType>({
   // },
   // },
   gridEvents,
   gridEvents,
   gridOptions,
   gridOptions,
-});
+} as any);
 
 
 // 放开注释查看当前表格实例的类型
 // 放开注释查看当前表格实例的类型
 // gridApi.grid
 // gridApi.grid

@@ -85,7 +85,7 @@ const gridOptions: VxeGridProps<RowType> = {
   showOverflow: false,
   showOverflow: false,
 };
 };
 
 
-const [Grid] = useVbenVxeGrid({ gridOptions });
+const [Grid] = useVbenVxeGrid({ gridOptions } as any);
 </script>
 </script>
 
 
 <template>
 <template>

@@ -47,7 +47,7 @@ const gridOptions: VxeGridProps<RowType> = {
   showOverflow: true,
   showOverflow: true,
 };
 };
 
 
-const [Grid] = useVbenVxeGrid({ gridOptions });
+const [Grid] = useVbenVxeGrid({ gridOptions } as any);
 </script>
 </script>
 
 
 <template>
 <template>

+<!--
+ * @Date: 2025-11-17 19:45:50
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2026-01-06 14:15:11
+ * @FilePath: /vben-admin/playground/src/views/examples/vxe-table/edit-row.vue
+ * @Description: 文件描述
+-->
 <script lang="ts" setup>
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
 
@@ -50,17 +57,17 @@ const gridOptions: VxeGridProps<RowType> = {
   showOverflow: true,
   showOverflow: true,
 };
 };
 
 
-const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions } as any);
 
 
-function hasEditStatus(row: RowType) {
+function hasEditStatus(row: any) {
   return gridApi.grid?.isEditByRow(row);
   return gridApi.grid?.isEditByRow(row);
 }
 }
 
 
-function editRowEvent(row: RowType) {
+function editRowEvent(row: any) {
   gridApi.grid?.setEditRow(row);
   gridApi.grid?.setEditRow(row);
 }
 }
 
 
-async function saveRowEvent(row: RowType) {
+async function saveRowEvent(row: any) {
   await gridApi.grid?.clearEdit();
   await gridApi.grid?.clearEdit();
 
 
   gridApi.setLoading(true);
   gridApi.setLoading(true);
@@ -72,7 +79,7 @@ async function saveRowEvent(row: RowType) {
   }, 600);
   }, 600);
 }
 }
 
 
-const cancelRowEvent = (_row: RowType) => {
+const cancelRowEvent = (_row: any) => {
   gridApi.grid?.clearEdit();
   gridApi.grid?.clearEdit();
 };
 };
 </script>
 </script>

@@ -55,7 +55,7 @@ const gridOptions: VxeGridProps<RowType> = {
   },
   },
 };
 };
 
 
-const [Grid] = useVbenVxeGrid({ gridOptions });
+const [Grid] = useVbenVxeGrid({ gridOptions } as any);
 </script>
 </script>
 
 
 <template>
 <template>

@@ -117,7 +117,7 @@ const gridOptions: VxeTableGridOptions<RowType> = {
 const [Grid] = useVbenVxeGrid({
 const [Grid] = useVbenVxeGrid({
   formOptions,
   formOptions,
   gridOptions,
   gridOptions,
-});
+} as any);
 </script>
 </script>
 
 
 <template>
 <template>

@@ -62,7 +62,7 @@ const gridOptions: VxeGridProps<RowType> = {
 
 
 const [Grid, gridApi] = useVbenVxeGrid({
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions,
   gridOptions,
-});
+} as any);
 </script>
 </script>
 
 
 <template>
 <template>

@@ -37,7 +37,7 @@ const gridOptions: VxeGridProps<RowType> = {
   },
   },
 };
 };
 
 
-const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions } as any);
 
 
 const expandAll = () => {
 const expandAll = () => {
   gridApi.grid?.setAllTreeExpand(true);
   gridApi.grid?.setAllTreeExpand(true);

+<!--
+ * @Date: 2025-11-17 19:45:50
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2026-01-06 14:15:28
+ * @FilePath: /vben-admin/playground/src/views/examples/vxe-table/virtual.vue
+ * @Description: 文件描述
+-->
 <script lang="ts" setup>
 <script lang="ts" setup>
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
 
@@ -33,7 +40,7 @@ const gridOptions: VxeGridProps<RowType> = {
   showOverflow: true,
   showOverflow: true,
 };
 };
 
 
-const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions } as any);
 
 
 // 模拟行数据
 // 模拟行数据
 const loadList = (size = 200) => {
 const loadList = (size = 200) => {

@@ -119,7 +119,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       transform: false,
       transform: false,
     },
     },
   } as VxeTableGridOptions,
   } as VxeTableGridOptions,
-});
+} as any);
 
 
 /**
 /**
  * 刷新表格
  * 刷新表格

@@ -53,7 +53,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       transform: false,
       transform: false,
     },
     },
   } as VxeTableGridOptions,
   } as VxeTableGridOptions,
-});
+} as any);
 
 
 function onActionClick({
 function onActionClick({
   code,
   code,

@@ -57,7 +57,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       zoom: true,
       zoom: true,
     },
     },
   } as VxeTableGridOptions<SystemRoleApi.SystemRole>,
   } as VxeTableGridOptions<SystemRoleApi.SystemRole>,
-});
+} as any);
 
 
 function onActionClick(e: OnActionClickParams<SystemRoleApi.SystemRole>) {
 function onActionClick(e: OnActionClickParams<SystemRoleApi.SystemRole>) {
   switch (e.code) {
   switch (e.code) {