美文网首页
复杂表头的导出excel

复杂表头的导出excel

作者: 哑巴湖大水怪吖 | 来源:发表于2022-07-23 16:16 被阅读0次
<template>
  <el-card>
      <el-table 
        id=".el-table__fixed"
        ref="complexHeaderExport"
        :data="tableList"
        border
        :header-cell-style='{"text-align":"center"}'
        :cell-style="{'text-align':'center'}"
        > 
        <!-- header-cell-style='{"text-align":"center"}' -->
          <el-table-column :label="header1"> <!-- 表格头1 -->
              <el-table-column :label="header2"> <!-- 表格头2 -->
                <el-table-column label="巡查信息"> <!-- 表格头3 -->
                    <el-table-column label="病床号" prop="name"></el-table-column>
                    <el-table-column label="患者姓名" prop="name"></el-table-column>
                    <el-table-column label="签到时间" prop="name"></el-table-column>
                    <el-table-column label="护理员" prop="name"></el-table-column>

                </el-table-column>
                <el-table-column label="检查内容(正常/异常)"> <!-- 表格头3 -->
                    <el-table-column label="仪容仪表">
                        <el-table-column :label="content1" prop="name"></el-table-column>

                    </el-table-column>
                    <el-table-column label="卫生清洁">
                        <el-table-column :label="content1" prop="name"></el-table-column>
                    </el-table-column>
                    <el-table-column label="服务质量">
                        <el-table-column :label="content1" prop="name"></el-table-column>
                    </el-table-column>
                    <el-table-column label="劳动纪律">
                        <el-table-column :label="content1" prop="name"></el-table-column>
                    </el-table-column>
                </el-table-column>
                
                <el-table-column label="特殊备注">
                    <el-table-column label="异常内容" prop="name"></el-table-column>
                    <el-table-column label="其他异常" prop="name"></el-table-column>
                    <el-table-column label="奖惩记录" prop="name"></el-table-column>
                    <el-table-column label="奖惩说明" prop="name"></el-table-column>
                </el-table-column> <!-- 表格头3 -->

              </el-table-column>
          </el-table-column>
      </el-table>
      <br/>
      <el-button @click="$router.back()" >返回</el-button>
      <el-button @click="exportExcel(123)" >导出</el-button>

  </el-card>
</template>

<script>
import FileSaver from 'file-saver'
import xlsx from 'xlsx'
export default {
    name:'complexHeaderExport',
    data(){
        return{
            tableList:[{name:'张三'}],
            header1:'XX医院巡查记录清单  (2022年7月16日)',
            header2:'科室签到时间:9:00:00   巡查人:张敏英',
            content1:'1.工装不整洁、身上有异味 2.未佩戴工牌 3.穿拖鞋4.留长指甲/留胡须/披发 '
        }
    },
    methods:{
        // 表头行不同的样式
        headerCellStyle({row,column,rowIndex,columnIndex}){
            if(rowIndex === 1){
                return ''
            }else{
                return {"text-align":"center"}
            }
        },
        // 导出excel
        exportExcel(exceName){
           try {
            const $e = this.$refs['complexHeaderExport'].$el
            let $table = $e.querySelector('.el-table__fixed')
            if(!$table) {
                $table = $e
            }
            const wb = xlsx.utils.table_to_book($table, {raw:true})
            console.log(wb)
            const wbout = xlsx.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
            console.log(wbout)
            FileSaver.saveAs(
            new Blob([wbout],{type: 'application/octet-stream'}),
            `${exceName}.xlsx`,
            )
        } catch (e) {
            if (typeof console !== 'undefined') console.error(e)
        }
        }
    }
}
</script>

<style>

</style>

相关文章

网友评论

      本文标题:复杂表头的导出excel

      本文链接:https://www.haomeiwen.com/subject/xvebirtx.html