使用cool-admin版本。vue3 和 node 版本。

excel导入导出

导出

<!-- 导出 -->
<cl-export-btn :columns="Table?.columns" />

导入

// -----------------vue3---------------------------------------<!-- 导入   /用户导入模版.xlsx  在public文件夹中，有其他的导入模板放在里边就可以-->
<cl-import-btn template="/用户导入模版.xlsx" :on-submit="onSubmit" />import { ref } from "vue";
import { ElMessage } from "element-plus";
const { service, refs, setRefs } = useCool();function onSubmit(data: any, { done, close }) {let { file, filename, list } = data;const formattedData = mapExcelData(list);service.base.user.importData({"plats": formattedData},{headers: {'Content-Type': 'application/json'}}).then(() => {ElMessage.success("导入成功");close();Crud.value?.refresh();}).catch((err) => {ElMessage.error(err.message);done();})}
// 定义字段映射关系const fieldMap = {'平台名称': 'name','备注': 'mark'};// 创建一个函数来转换 Excel 数据function mapExcelData(data) {return data.map(item => {const mappedItem = {};for (const key in item) {// 使用映射关系替换 keyconst mappedKey = fieldMap[key];if (mappedKey) {mappedItem[mappedKey] = item[key];}}return mappedItem;});}// -----------------node---------------------------------------//  service 自己导入
@Post('/importData', { summary: '批量导入' })async importData(@Body('users') users: any[]) {const resultStr = await this.*****Service.addUsers(plats);return this.ok(resultStr);}async addUsers(plats: any[]){var totalNum = plats.length;var successNum = 0;var failNum = 0;const results = await Promise.all(plats.map(async (element) => {const addResult = await this.BaseEntity.save(element);if (addResult.id) {successNum++;} else {failNum++;}}))return `导入数据共${totalNum}条数据，成功${successNum}条，失败${failNum}条`;}

表格中图片展示不全

{prop: "platImg",label: "LOGO",// 格子宽度width: 300,component: {name: "cl-image",props: {//图片展示  value值可参考 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fitfit: "contain",lazy: true}}
}