Auto Commit

package.json

@@ -7,8 +7,10 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "element-plus": "^2.7.4",
     "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+    <H3>表单导入导出</H3>
+    <div>
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="date" label="时间" width="180" />
+            <el-table-column prop="name" label="姓名" width="180" />
+            <el-table-column prop="address" label="地址" />
+        </el-table>
+    </div>
+    <div class="upload">
+        <el-button type="primary" @click="exportFile">导出</el-button>
+        <el-upload class="upload-demo" action :before-upload="beforeUpload" :show-file-list="false">
+            <el-button type="primary">导入</el-button>
+        </el-upload>
+        <el-dialog v-model="dialogTableVisible" :title="title" width="800" destroy-on-close>
+            <el-table :data="gridData">
+                <el-table-column v-for="(item, index) in tableHeaders" :key="index" :property="item" :label="item"
+                    width="150" />
+            </el-table>
+        </el-dialog>
     </div>
-  </header>
 
-  <main>
-    <TheWelcome />
-  </main>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
+<script setup>
+import { ref } from 'vue'
+import * as XLSX from 'xlsx';
+const dialogTableVisible = ref(false)
+const tableData = ref(
+    [
+        {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+        },
+        {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+        },
+        {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+        },
+        {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+        },
+    ]
+)
+const gridData = ref([])
+const tableHeaders = ref([])
+const title = ref()
+// 导出
+const tableHeader = '客户表'
+const exportFile = () => {
+    const wb = XLSX.utils.book_new(); // 创建新的工作簿
+    const ws = XLSX.utils.json_to_sheet(tableData.value); // 将表格数据转换为工作表
+    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作表添加到工作簿
+    XLSX.writeFile(wb, `${tableHeader}.${'xlsx'}`); // 写入文件并触发下载
 }
+// 导入
+// beforeUpload 文件上传前触发的事件
+const beforeUpload = (file) => {
+    console.log(file);
+    const fileName = file.name
+    // 截取文件名
+    title.value = fileName.substring(0, fileName.lastIndexOf("."))
+    const reader = new FileReader()
+    // 读取 Blob或 File 的内容，并触发 onload事件
+    reader.readAsArrayBuffer(file)
+    // 读取成功完成时调用
+    reader.onload = e => {
+        // 读取的结果
+        const data = e.target.result
+        // 读取表格对象
+        const workbook = XLSX.read(data, { type: 'binary' })
+        // 找到第一张表
+        const firstSheetName = workbook.SheetNames[0]
+        // 读取内容
+        const worksheet = workbook.Sheets[firstSheetName]
+        // 将读取的内容转换为数组
+        const jsonData = XLSX.utils.sheet_to_json(worksheet)
+        tableHeaders.value = Object.keys(jsonData[0])
+        gridData.value = jsonData
+    }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+    dialogTableVisible.value = true
 }
+</script>
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
+<style scoped>
+.upload{
     display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+    width: 150px;
+    margin-top: 20px;
+    justify-content: space-between;
 }
-</style>
+</style>
\ No newline at end of file

src/main.js

@@ -2,5 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import './assets/main.css'
-
-createApp(App).mount('#app')
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+createApp(App).use(ElementPlus).mount('#app')