全局添加导出表格配置

src/components/table/defaultAttribute.ts

@@ -13,5 +13,6 @@ export const defaultAttribute: VxeTableProps = {
     treeConfig: {
         reserve: true
     },
+
     showOverflow: true
 }

src/components/table/header/index.vue

@@ -21,6 +21,9 @@
                     :icon="Search">查询</el-button>
                 <el-button @click="onResetForm" v-if="showSearch  && showReset" :loading="tableStore.table.loading"
                     :icon="RefreshLeft">重置</el-button>
+                    <el-button @click="onExport" v-if="showExport" :loading="tableStore.table.loading" type="primary"
+                    icon="el-icon-Download">导出</el-button>
+               
             </template>
             <slot name="operation"></slot>
         </div>
@@ -55,6 +58,8 @@ interface Props {
     nextFlag?: boolean //控制时间是否可以往后推
     theCurrentTime?: boolean //控制时间前3天展示上个月时间
     showReset?: boolean //控制时间前3天展示上个月时间
+    showExport?: boolean //导出控制
+
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -63,7 +68,8 @@ const props = withDefaults(defineProps<Props>(), {
     showSearch: true,
     nextFlag: false,
     theCurrentTime: false,
-    showReset: true
+    showReset: true,
+    showExport:false
 })
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
@@ -169,6 +175,10 @@ const onResetForm = () => {
 const setTheDate = (val: any) => {
     datePickerRef.value.setTheDate(val)
 }
+// 导出
+const onExport = () => {
+    tableStore.onTableAction('export', {showAllFlag:true})
+}
 
 defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange })
 </script>

src/components/table/index.vue

@@ -1,41 +1,23 @@
 <template>
     <div :style="{ height: tableStore.table.height }">
-        <vxe-table
-            ref="tableRef"
-            height="auto"
-            :data="tableStore.table.data"
-            v-loading="tableStore.table.loading"
-            v-bind="Object.assign({}, defaultAttribute, $attrs)"
-            @checkbox-all="selectChangeEvent"
-            @checkbox-change="selectChangeEvent"
-            :showOverflow="showOverflow"
-        >
+        <vxe-table ref="tableRef" height="auto" :data="tableStore.table.data" v-loading="tableStore.table.loading"
+            v-bind="Object.assign({}, defaultAttribute, $attrs)" @checkbox-all="selectChangeEvent"
+            @checkbox-change="selectChangeEvent" :showOverflow="showOverflow">
             <!-- Column 组件内部是 el-table-column -->
             <template v-if="isGroup">
                 <GroupColumn :column="tableStore.table.column" />
             </template>
             <template v-else>
-                <Column
-                    :attr="item"
-                    :key="key + '-column'"
-                    v-for="(item, key) in tableStore.table.column"
-                    :tree-node="item.treeNode"
-                >
+                <Column :attr="item" :key="key + '-column'" v-for="(item, key) in tableStore.table.column"
+                    :tree-node="item.treeNode">
                     <!-- tableStore 预设的列 render 方案 -->
                     <template v-if="item.render" #default="scope">
-                        <FieldRender
-                            :field="item"
-                            :row="scope.row"
-                            :column="scope.column"
-                            :index="scope.rowIndex"
-                            :key="
-                                key +
-                                '-' +
-                                item.render +
-                                '-' +
-                                (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
-                            "
-                        />
+                        <FieldRender :field="item" :row="scope.row" :column="scope.column" :index="scope.rowIndex" :key="key +
+                            '-' +
+                            item.render +
+                            '-' +
+                            (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
+                            " />
                     </template>
                 </Column>
             </template>
@@ -44,16 +26,11 @@
     </div>
 
     <div v-if="tableStore.showPage" class="table-pagination">
-        <el-pagination
-            :currentPage="tableStore.table.params!.pageNum"
-            :page-size="tableStore.table.params!.pageSize"
-            :page-sizes="pageSizes"
-            background
+        <el-pagination :currentPage="tableStore.table.params!.pageNum" :page-size="tableStore.table.params!.pageSize"
+            :page-sizes="pageSizes" background
             :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
-            :total="tableStore.table.total"
-            @size-change="onTableSizeChange"
-            @current-change="onTableCurrentChange"
-        ></el-pagination>
+            :total="tableStore.table.total" @size-change="onTableSizeChange"
+            @current-change="onTableCurrentChange"></el-pagination>
     </div>
     <slot name="footer"></slot>
 </template>
@@ -67,12 +44,13 @@ import Column from '@/components/table/column/index.vue'
 import GroupColumn from '@/components/table/column/groupColumn.vue'
 import { useConfig } from '@/stores/config'
 import type TableStoreClass from '@/utils/tableStore'
-
+import { useRouter } from 'vue-router'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 
 const config = useConfig()
 const tableRef = ref<VxeTableInstance>()
 const tableStore = inject('tableStore') as TableStoreClass
+const router = useRouter()
 
 interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
     isGroup?: boolean
@@ -116,12 +94,38 @@ const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
 const getRef = () => {
     return tableRef.value
 }
+watch(
+    () => tableStore.table.allFlag,
+    newVal => {
+
+
+        if (tableStore.table.allFlag) {
+
+            tableRef.value?.exportData({
+                filename: document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
+                sheetName: 'Sheet1',
+                type: 'xlsx', //导出文件类型 xlsx 和 csv
+                useStyle: true,
+                data: tableStore.table.allData, // 数据源 // 过滤那个字段导出
+                columnFilterMethod: function (column: any) {
+
+                    return !(column.column.title === undefined || column.column.title === '序号' || column.column.title === '操作')
+                }
+            })
+            tableStore.table.allFlag = false
+
+        }
+
+
+    }
+)
 watch(
     () => tableStore.table.data,
     newVal => {
         tableStore.onTableAction('selection-change', [])
     }
 )
+
 defineExpose({
     getRef
 })