Importer & Exporter 导入导出

表格查询页通用的导入和导出组件，提供统一的上传下载交互体验。

基础用法

暂无数据

共 0 条

• 1

前往

页

<template>
  <div class="demo-importer-exporter">
    <!-- 工具栏 -->
        
        <!-- :template-url="'/api/import/template'" -->
    <div class="demo-toolbar">
      <hx-importer
        ref="importerRef"
        :upload-action="'/api/import/upload'"
        :template-url="'/api/import/template'"
        :accept="'.xlsx,.xls'"
        button-text="导入"
        :max-size="10"
        @on-success="handleImportSuccess"t
      />
      <hx-exporter
        ref="exporterRef"
        :export-action="'/api/export'"
        :get-search-params="getSearchParams"
        :total-count="totalCount"
        :current-page="pagination.page"
        :page-size="pagination.pageSize"
        :selected-rows="selectedRows"
        :max-export-count="100"
				:exportOptions="['page','all','selected','count']"
        button-text="导出"
        @on-success="handleExportSuccess"
      />
    </div>

    <el-table
      ref="tableRef"
      v-loading="loading"
      :data="tableData"
      border
      stripe
      style="width: 100%; margin-top: 16px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="60" label="#" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" min-width="120" />
      <el-table-column prop="age" label="年龄" width="100" />
      <el-table-column prop="department" label="部门" min-width="120" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'info'">
            {{ row.status === "active" ? "在职" : "离职" }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.pageSize"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 16px"
      @size-change="handlePageChange"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import type { TableInstance } from "element-plus";

interface TableRow {
  id: number;
  name: string;
  age: number;
  department: string;
  status: string;
}

// 模拟全部数据
const allData: TableRow[] = [
  { id: 1, name: "张三", age: 28, department: "研发部", status: "active" },
  { id: 2, name: "李四", age: 32, department: "产品部", status: "active" },
  { id: 3, name: "王五", age: 25, department: "设计部", status: "inactive" },
  { id: 4, name: "赵六", age: 30, department: "市场部", status: "active" },
  { id: 5, name: "钱七", age: 27, department: "运营部", status: "active" },
  { id: 6, name: "孙八", age: 35, department: "人事部", status: "inactive" },
  { id: 7, name: "周九", age: 29, department: "财务部", status: "active" },
  { id: 8, name: "吴十", age: 31, department: "研发部", status: "active" },
  { id: 9, name: "郑一", age: 26, department: "产品部", status: "inactive" },
  { id: 10, name: "王二", age: 33, department: "设计部", status: "active" },
  { id: 11, name: "冯三", age: 24, department: "市场部", status: "active" },
  { id: 12, name: "陈四", age: 28, department: "运营部", status: "inactive" },
  { id: 13, name: "褚五", age: 36, department: "人事部", status: "active" },
  { id: 14, name: "卫六", age: 30, department: "财务部", status: "active" },
  { id: 15, name: "蒋七", age: 27, department: "研发部", status: "inactive" },
  { id: 16, name: "沈八", age: 32, department: "产品部", status: "active" },
  { id: 17, name: "韩九", age: 25, department: "设计部", status: "active" },
  { id: 18, name: "杨十", age: 29, department: "市场部", status: "inactive" },
  { id: 19, name: "朱一", age: 34, department: "运营部", status: "active" },
  { id: 20, name: "秦二", age: 28, department: "人事部", status: "active" },
  { id: 21, name: "许三", age: 31, department: "研发部", status: "active" },
  { id: 22, name: "何四", age: 26, department: "产品部", status: "inactive" },
  { id: 23, name: "吕五", age: 33, department: "设计部", status: "active" },
  { id: 24, name: "施六", age: 29, department: "市场部", status: "active" },
  { id: 25, name: "张七", age: 27, department: "运营部", status: "inactive" },
  { id: 26, name: "孔八", age: 35, department: "人事部", status: "active" },
  { id: 27, name: "曹九", age: 30, department: "财务部", status: "active" },
  { id: 28, name: "严十", age: 25, department: "研发部", status: "active" },
  { id: 29, name: "华一", age: 32, department: "产品部", status: "inactive" },
  { id: 30, name: "金二", age: 28, department: "设计部", status: "active" },
];

const loading = ref(false);
const tableRef = ref<TableInstance>();
const selectedRows = ref<TableRow[]>([]);

const tableData = ref<TableRow[]>([]);
const totalCount = ref(0);
const pagination = reactive({
  page: 1,
  pageSize: 10,
});

// 模拟搜索参数
const searchParams = reactive({
  name: "",
  department: "",
});

function getSearchParams() {
  return { ...searchParams };
}

function handleSelectionChange(selection: TableRow[]) {
  selectedRows.value = selection;
}

function handlePageChange() {
  loadData();
}

async function loadData() {
  loading.value = true;
  try {
    // 模拟分页
    const start = (pagination.page - 1) * pagination.pageSize;
    const end = start + pagination.pageSize;
    tableData.value = allData.slice(start, end);
    totalCount.value = allData.length;
  } catch (e) {
    ElMessage.error("加载数据失败");
  } finally {
    loading.value = false;
  }
}

function handleImportSuccess(response: any) {
  // ElMessage.success('导入成功')
  console.log("导入结果:", response);
}

function handleExportSuccess() {
  ElMessage.success("导出成功");
}

onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.demo-importer-exporter {
  .demo-toolbar {
    display: flex;
    gap: 12px;
  }
}
</style>

Importer 导入组件

用于表格数据的批量导入，提供模板下载和文件上传功能。

基础示例

点击导入按钮，打开导入弹窗，可下载模板后上传文件。

<hx-importer
  :upload-action="'/api/import/upload'"
  :template-url="'/api/import/template'"
  :accept="'.xlsx,.xls'"
  :max-size="10"
  @success="handleImportSuccess"
/>

Exporter 导出组件

用于表格数据的批量导出，支持按页、全部、选中三种导出方式。

基础示例

点击导出按钮，选择导出方式后确认导出。

<hx-exporter
  :export-action="'/api/export'"
  :get-search-params="getSearchParams"
  :total-count="totalCount"
  :current-page="currentPage"
  :page-size="pageSize"
  :selected-rows="selectedRows"
  :max-export-count="10000"
  @success="handleExportSuccess"
/>

导出方式

• 按页导出：导出当前页数据
• 全部导出：导出符合筛选条件的所有数据
• 选中导出：导出表格中已选中的行数据（需配合 el-table 的 selection）

API

Importer Props

参数名	说明	类型	默认值
template-url	模板下载地址（有值则显示模板下载）	string	-
template-file-name	模板文件名（用于下载显示）	string	-
upload-action	上传接口地址	string	-
upload-params	上传附带参数	Record<string, string | Blob>	-
accept	接受文件类型	string	.xlsx,.xls
max-size	最大文件大小(MB)	number	10
button-text	按钮文本	string	导入
dialog-title	弹窗标题	string	导入数据

Importer Events

事件名	说明	参数
success	上传成功回调	(response: any) => void
error	上传失败回调	(error: any) => void

Importer Expose

方法名	说明
open	打开导入弹窗
close	关闭导入弹窗

Exporter Props

参数名	说明	类型	默认值
export-action	导出接口地址	string	-
max-export-count	最大导出数量限制	number	10000
selected-rows	选中行数据（用于选中导出）	any[]	[]
row-id-field	选中行 ID 字段名	string	id
get-search-params	获取当前检索条件的函数	() => Record<string, any>	-
total-count	当前总数据量	number	0
current-page	当前页码	number	1
page-size	每页数量	number	10
button-text	按钮文本	string	导出
dialog-title	弹窗标题	string	导出数据
extra-params	导出参数额外补充	Record<string, any>	{}
file-name-prefix	导出文件名前缀	string	export

Exporter Events

事件名	说明	参数
success	导出成功回调	() => void
error	导出失败回调	(error: any) => void

Exporter Expose

方法名	说明
open	打开导出弹窗
close	关闭导出弹窗