first commit

src/components/wyg-table/index.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author: 田鑫
+ * @Date: 2023-02-16 14:40:38
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-02-16 16:37:52
+ * @Description: table公用封装
+-->
+
+<template>
+  <div>
+    <a-table
+      :loading="loading"
+      :size="size"
+      :data="tableData"
+      :bordered="{ cell: borderCell }"
+      :pagination="setPagination"
+      page-position="br"
+      v-bind="propsRes"
+      v-on="propsEvent"
+    >
+      <template #columns>
+        <slot></slot>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PaginationProps, TableData } from '@arco-design/web-vue';
+import type { PropType } from 'vue-demi';
+import Components from 'unplugin-vue-components/vite';
+
+type Size = 'mini' | 'small' | 'medium' | 'large';
+
+const props = defineProps({
+  size: {
+    type: String as PropType<Size>,
+    default: 'large',
+  },
+  tableData: {
+    type: Array as PropType<TableData[]>,
+    default: () => [],
+  },
+  borderCell: {
+    type: Boolean,
+    default: true,
+  },
+  pagination: {
+    type: Object as PropType<PaginationProps>,
+    default: () => {},
+  },
+});
+const loading = ref(false);
+
+const setPagination = computed(() => {
+  const defaultPagination: PaginationProps = {
+    showPageSize: true,
+    showTotal: true,
+    showMore: true,
+    size: 'large',
+  };
+  return Object.assign(defaultPagination, props.pagination);
+});
+
+watchEffect(() => {
+  if (props.tableData.length === 0) {
+    loading.value = true;
+  } else {
+    loading.value = false;
+  }
+});
+</script>
+<style lang="less" scoped></style>