💄(component): 整理 table.vue 代码

package/component/src/component/dropdown/TeleportWrapper.vue

@@ -4,7 +4,7 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref } from "vue";
 
 export interface TeleportWrapperProps {
   to?: string;
@@ -12,19 +12,19 @@ export interface TeleportWrapperProps {
 }
 
 const props = withDefaults(defineProps<TeleportWrapperProps>(), {
-  to: '',
+  to: "",
   disabled: false,
-})
+});
 
-const target = ref<Element | null>(null)
+const target = ref<Element | null>(null);
 
 onMounted(() => {
   if (!props.to) return;
-  const el = document.querySelector(props.to)
+  const el = document.querySelector(props.to);
   if (el) {
-    target.value = el
+    target.value = el;
   }
-})
+});
 </script>
 <template>
   <Teleport :to="target" :disabled="!target || disabled">

package/component/src/component/dropdown/index.vue

@@ -30,7 +30,7 @@ import {
   ElementScrollRect,
   DropdownContext,
 } from "./interface";
-import TeleportWrapper  from './TeleportWrapper.vue';
+import TeleportWrapper from "./TeleportWrapper.vue";
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
 
@@ -78,7 +78,10 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
 });
 
 const childrenRefs = new Set<Ref<HTMLElement>>();
-const dropdownCtx = inject<DropdownContext | undefined>(dropdownInjectionKey, undefined);
+const dropdownCtx = inject<DropdownContext | undefined>(
+  dropdownInjectionKey,
+  undefined
+);
 const dropdownRef = shallowRef<HTMLElement | undefined>();
 const contentRef = shallowRef<HTMLElement | undefined>();
 const contentStyle = ref<CSSProperties>({});

package/component/src/component/table/TablePage.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-    name: "TablePage"
+  name: "TablePage",
-}
+};
 </script>
 
 <script lang="ts" setup>
@@ -9,54 +9,54 @@ import { LayIcon } from "@layui/icons-vue";
 import LayPage from "../page/index.vue";
 
 export interface LayTablePageProps {
-    showPage?: boolean;
+  showPage?: boolean;
-    showSkip?: boolean;
+  showSkip?: boolean;
-    showLimit?: boolean;
+  showLimit?: boolean;
-    showCount?: boolean;
+  showCount?: boolean;
-    showRefresh?: boolean;
+  showRefresh?: boolean;
-    modelValue: number;
+  modelValue: number;
-    limits?: number[];
+  limits?: number[];
-    pages?: number;
+  pages?: number;
-    total: number;
+  total: number;
-    limit?: number;
+  limit?: number;
-    theme?: string;
+  theme?: string;
 }
 
 const props = withDefaults(defineProps<LayTablePageProps>(), {
-    showPage: true,
+  showPage: true,
-    showLimit: true,
+  showLimit: true,
-    showSkip: true,
+  showSkip: true,
 });
 
 const emit = defineEmits(["update:modelValue", "update:limit", "change"]);
 
 const change = (pageData: any) => {
-    emit('change', pageData)
+  emit("change", pageData);
-    emit('update:modelValue', pageData.current);
+  emit("update:modelValue", pageData.current);
-    emit('update:limit', pageData.limit);
+  emit("update:limit", pageData.limit);
-}
+};
 </script>
 
 <template>
-    <lay-page 
+  <lay-page
-        :total="total"
+    :total="total"
-        :show-page="showPage" 
+    :show-page="showPage"
-        :show-skip="showSkip" 
+    :show-skip="showSkip"
-        :show-limit="showLimit"
+    :show-limit="showLimit"
-        :show-count="showCount"
+    :show-count="showCount"
-        :show-refresh="showRefresh"
+    :show-refresh="showRefresh"
-        :limits="limits"
+    :limits="limits"
-        :theme="theme"
+    :theme="theme"
-        :pages="pages"
+    :pages="pages"
-        v-model:modelValue="modelValue"  
+    v-model:modelValue="modelValue"
-        v-model:limit="limit"
+    v-model:limit="limit"
-        @change="change">
+    @change="change"
-        <template #prev>
+  >
-            <lay-icon type="layui-icon-left" />
+    <template #prev>
-        </template>
+      <lay-icon type="layui-icon-left" />
-        <template #next>
+    </template>
-            <lay-icon type="layui-icon-right" />
+    <template #next>
-        </template>
+      <lay-icon type="layui-icon-right" />
-    </lay-page>
+    </template>
-
+  </lay-page>
 </template>

package/component/src/component/table/index.vue

@@ -22,7 +22,6 @@ import { Recordable } from "../../types";
 import { LayIcon } from "@layui/icons-vue";
 import LayCheckbox from "../checkbox/index.vue";
 import LayDropdown from "../dropdown/index.vue";
-import LayPage from "../page/index.vue";
 import LayEmpty from "../empty/index.vue";
 import TableRow from "./TableRow.vue";
 import TablePage from "./TablePage.vue";
@@ -619,7 +618,6 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
- {{ page }}
   <div :id="tableId">
     <table class="layui-hide" lay-filter="test"></table>
     <div class="layui-form layui-border-box layui-table-view" :class="classes">