Excel

CuiExcel Excel 导入组件

CuiExcel

CuiExcel 负责把上传、模板下载和结果反馈整合到统一流程里，适合数据导入场景。

导入对话框

演示 CuiExcel 导入弹层的 UI 交互（uploadUrl 为 mock 地址）

Live Demo

Preview

Code

先看效果，再决定是否展开代码细节。

<script setup lang="ts">
import { ref } from "vue";
import { CuiExcel } from "@eams-monorepo/vue-element-cui";

const showDialog = ref(false);

const handleSuccess = (response: any, file: any) => {
  console.log("上传成功", file.name);
  showDialog.value = false;
};
</script>

<template>
  <el-button type="primary" @click="showDialog = true">打开导入</el-button>
  <CuiExcel
    v-model="showDialog"
    upload-url="/api/assets/import"
    template-url="/api/assets/template"
    title="导入资产台账"
    @success="handleSuccess"
  />
</template>

模板与字段说明配套

导入链路必须配套模板下载与字段说明，避免用户凭猜测上传。

导入结果必须可追溯

上传成功、失败和异常原因要清晰返回到业务页，而不是留在隐式状态里。

上传链路显式配置

上传地址、请求头和额外参数都应由业务侧显式配置。