Ement-Plus框架的列表table导出excel数据表
1.页面预览
2.搜索条件区域
code
<!-- 查询 -->
<div class="table-container">
<el-form :inline="true" :model="queryForm" class="query-form" ref="queryFormRef">
<el-form-item label="科室">
<el-select v-model="queryForm.dscgcatyHosp" placeholder="请选择" clearable>
<!-- 这里填充科室选项的数据 -->
<el-option v-for="item in departmentinfoList" :label="item.label" :value="item.value" :key="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="出院时间">
<el-date-picker v-model="queryForm.dscgTimestart" type="date" placeholder="选择日期" clearable>
</el-date-picker>
</el-form-item>
<el-form-item label="结算时间">
<el-date-picker v-model="queryForm.setlEndDatestart" type="date" placeholder="选择日期" clearable>
</el-date-picker>
</el-form-item>
<el-form-item label="质控规则">
<el-select v-model="queryForm.qcRuleName" placeholder="请选择" clearable>
<el-option v-for="item in medicalRecordList" :label="item.label" :value="item.value" :key="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="DIP名称">
<el-input v-model="queryForm.groupResult" placeholder="请输入DIP名称" clearable>
</el-input>
</el-form-item>
<el-form-item label="患者编号">
<el-input v-model="queryForm.setllistsn" placeholder="请输入患者编号" clearable>
</el-input>
</el-form-item>
<el-form-item label="主治医师">
<el-select v-model="queryForm.chfpdrCode" placeholder="请选择" clearable>
<el-option v-for="item in listByDepartmentCodeList" :label="item.label" :value="item.value"
:key="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="患者姓名">
<el-input v-model="queryForm.psnName" placeholder="请输入患者姓名" clearable>
</el-input>
</el-form-item>
<el-form-item label="合格状态">
<el-select v-model="queryForm.qualifiedstatus" placeholder="请选择" clearable>
<el-option label="合格" value="1"></el-option>
<el-option label="不合格" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="主要诊断">
<el-select v-model="queryForm.mainDiagCode" placeholder="请输入主要诊断" clearable>
<el-option v-for="item in findDiseaseList" :label="item.label" :value="item.value" :key="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="主要手术及操作">
<el-select v-model="queryForm.operationName" placeholder="请输入主要诊断" clearable>
<el-option v-for="item in findOperationList" :label="item.label" :value="item.value" :key="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitQuery">查询</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>3.列表部分
code
<!-- 列表 -->
<div class="table-container">
<el-button type="primary" @click="derivedData" style="float: right;margin-bottom: 10px;">导出数据</el-button>
<el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="Loading"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.7)" ref="multipleTable"
border>
<el-table-column type="index" label="序号" align="center" width="80" fixed> </el-table-column>
<!-- <el-table-column prop="mark" label="标记" align="center"> </el-table-column> -->
<el-table-column prop="mark" label="标记" align="center">
<template v-slot="{ row }">
<UserFilled style="width: 1em; height: 1em; margin-right: 8px" v-if="row.mark === 'success'" />
<Delete style="width: 1em; height: 1em; margin-right: 8px" v-else-if="row.mark === 'delete'" />
<UserFilled style="width: 1em; height: 1em; margin-right: 8px" v-else />
</template>
</el-table-column>
<el-table-column prop="psnName" label="患者姓名" align="center"> </el-table-column>
<el-table-column prop="dscgCatyHospName" label="科室" align="center"> </el-table-column>
<el-table-column prop="chfpdrName" label="科室主诊医师" align="center" width="120"> </el-table-column>
<el-table-column prop="setllistsn" label="清单流水号" align="center" width="100"> </el-table-column>
<el-table-column prop="bah" label="病案号" align="center"> </el-table-column>
<el-table-column prop="groupResult" label="DIP编号" align="center" width="120"> </el-table-column>
<el-table-column prop="groupResultName" label="DIP名称" align="center" width="140"> </el-table-column>
<el-table-column prop="mainDiagmc" label="主要诊断" align="center"> </el-table-column>
<el-table-column prop="mainoprnoprtmc" label="主要手术以及操作" align="center" width="160"> </el-table-column>
<el-table-column prop="kzt" label="合格状态" align="center"> </el-table-column>
<el-table-column prop="isInGroup" label="入组状态" align="center"> </el-table-column>
<el-table-column prop="reasonF1ag" label="分组异常状态" align="center" width="120"> </el-table-column>
<el-table-column prop="dscgTime" label="出院时间" align="center"> </el-table-column>
<el-table-column prop="setlEndDate" label="结算时间" align="center"> </el-table-column>
<el-table-column label="操作" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small"
@click="openDrawer('1', '2', '2', '医疗保障基金结算清单', row.setllistsn)">
查看
</el-button>
</template>
</el-table-column>
<template>
</template>
</el-table>
<!-- 分页 -->
<div class="demo-pagination-block">
<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
:page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div>
</div>4.导出Excel数据表
4.1 XLSX插件的使用
npm install xlsx --save
或
yarn add xlsx --save
import * as XLSX from 'xlsx';4.2 简单的导出功能
// 导出数据
derivedData() {
console.log('导出数据');
const worksheet = XLSX.utils.json_to_sheet(this.tableData);
const workBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workBook, worksheet, 'Sheet1');
XLSX.writeFile(workBook, '医保清单数据.xlsx');
},上面的方法可以导出数据表但是表头表头部分是直接拿到列表参数名称来导出，没做二次翻译，不太建议
4.3完整的导出功能
derivedData() {
console.log('导出数据');
const formattedData = this.tableData.map(item => ({
'标记': item.mark,
'患者姓名': item.psnName,
'科室': item.dscgCatyHospName,
'科室主诊医师': item.chfpdrName,
'清单流水号': item.setllistsn,
'病案号': item.bah,
'DIP编号': item.groupResult,
'DIP名称': item.groupResultName,
'主要诊断': item.mainDiagmc,
'合格状态': item.kzt,
'入组状态': item.isInGroup,
'分组异常状态': item.reasonF1ag,
'出院时间': item.dscgTime,
'结算时间': item.setlEndDate,
}));
const worksheet = XLSX.utils.json_to_sheet(formattedData);
const workBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workBook, worksheet, 'Sheet1');
XLSX.writeFile(workBook, '医保清单数据.xlsx');
},
