feat(projects): 添加表格页面示例

src/views/component/index.ts

@@ -1,4 +1,5 @@
 import ComponentButton from './button/index.vue';
 import ComponentCard from './card/index.vue';
+import ComponentTable from './table/index.vue';
 
-export { ComponentButton, ComponentCard };
+export { ComponentButton, ComponentCard, ComponentTable };

src/views/component/table/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <n-card title="表格" class="h-full shadow-sm rounded-16px">
+      <n-space :vertical="true">
+        <n-space>
+          <n-button @click="getDataSource">有数据</n-button>
+          <n-button @click="getEmptyDataSource">空数据</n-button>
+        </n-space>
+        <loading-empty-wrapper class="h-480px" :loading="loading" :empty="empty">
+          <n-data-table :columns="columns" :data="dataSource" :flex-height="true" class="h-480px" />
+        </loading-empty-wrapper>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { NCard, NSpace, NButton, NDataTable } from 'naive-ui';
+import type { DataTableColumn } from 'naive-ui';
+import { LoadingEmptyWrapper } from '@/components';
+import { useLoadingEmpty } from '@/hooks';
+import { getRandomInterger } from '@/utils';
+
+interface DataSource {
+  name: string;
+  age: number;
+  address: string;
+}
+
+const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
+
+const columns: DataTableColumn[] = [
+  {
+    title: 'Name',
+    key: 'name',
+    align: 'center'
+  },
+  {
+    title: 'Age',
+    key: 'age'
+  },
+  {
+    title: 'Address',
+    key: 'address'
+  }
+];
+
+const dataSource = ref<DataSource[]>([]);
+
+function createDataSource(): DataSource[] {
+  return Array(100)
+    .fill(1)
+    .map((item, index) => {
+      return {
+        name: `Name${index}`,
+        age: getRandomInterger(30, 20),
+        address: '中国'
+      };
+    });
+}
+
+function getDataSource() {
+  startLoading();
+  setTimeout(() => {
+    dataSource.value = createDataSource();
+    endLoading();
+    setEmpty(!dataSource.value.length);
+  }, 1000);
+}
+
+function getEmptyDataSource() {
+  startLoading();
+  setTimeout(() => {
+    dataSource.value = [];
+    endLoading();
+    setEmpty(!dataSource.value.length);
+  }, 1000);
+}
+
+onMounted(() => {
+  getDataSource();
+});
+</script>
+<style scoped></style>