feat: 增加表格导出功能

package.json

@@ -25,7 +25,8 @@
     "pinia": "^2.0.33",
     "vite": "^4.2.1",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.4",

src/components/table/CrudTable.vue

@@ -17,6 +17,8 @@
 </template>
 
 <script setup>
+import { utils, writeFile } from 'xlsx'
+
 const props = defineProps({
   /**
    * @remote true: 后端分页  false： 前端分页
@@ -73,7 +75,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:queryItems', 'onChecked'])
+const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
 const loading = ref(false)
 const initQuery = { ...props.queryItems }
 const tableData = ref([])
@@ -94,6 +96,7 @@ async function handleQuery() {
     tableData.value = []
     pagination.itemCount = 0
   } finally {
+    emit('onDataChange', tableData.value)
     loading.value = false
   }
 }
@@ -122,9 +125,21 @@ function onChecked(rowKeys) {
     emit('onChecked', rowKeys)
   }
 }
+function handleExport(columns = props.columns, data = tableData.value) {
+  if (!data?.length) return $message.warning('没有数据')
+  const columnsData = columns.filter((item) => !!item.title && !item.hideInExcel)
+  const thKeys = columnsData.map((item) => item.key)
+  const thData = columnsData.map((item) => item.title)
+  const trData = data.map((item) => thKeys.map((key) => item[key]))
+  const sheet = utils.aoa_to_sheet([thData, ...trData])
+  const workBook = utils.book_new()
+  utils.book_append_sheet(workBook, sheet, '数据报表')
+  writeFile(workBook, '数据报表.xlsx')
+}
 
 defineExpose({
   handleSearch,
   handleReset,
+  handleExport,
 })
 </script>

src/views/demo/table/index.vue

@@ -1,9 +1,14 @@
 <template>
   <CommonPage show-footer title="文章">
     <template #action>
-      <n-button type="primary" @click="handleAdd">
-        <TheIcon icon="material-symbols:add" :size="18" class="mr-5" /> 新建文章
-      </n-button>
+      <div>
+        <n-button type="primary" secondary @click="$table?.handleExport()">
+          <TheIcon icon="mdi:download" :size="18" class="mr-5" /> 导出
+        </n-button>
+        <n-button type="primary" class="ml-16" @click="handleAdd">
+          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" /> 新建文章
+        </n-button>
+      </div>
     </template>
 
     <CrudTable
@@ -14,6 +19,7 @@
       :columns="columns"
       :get-data="api.getPosts"
       @on-checked="onChecked"
+      @on-data-change="(data) => (tableData = data)"
     >
       <template #queryBar>
         <QueryBarItem label="标题" :label-width="50">
@@ -89,6 +95,8 @@ import api from './api'
 defineOptions({ name: 'Crud' })
 
 const $table = ref(null)
+/** 表格数据，触发搜索的时候会更新这个值 */
+const tableData = ref([])
 /** QueryBar筛选参数（可选） */
 const queryItems = ref({})
 /** 补充参数（可选） */
@@ -141,6 +149,7 @@ const columns = [
     width: 240,
     align: 'center',
     fixed: 'right',
+    hideInExcel: true,
     render(row) {
       return [
         h(