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');
    },