Vue插件vue-json-excel数据表的导出（vue-json-excel）

导出EXCEl

• 安装

   	npm install vue-json-excel
  

• main.js全局引入

  import JsonExcel from 'vue-json-excel'
  
  Vue.component('downloadExcel', JsonExcel)
  

• 项目中使用

  	<download-excel
        class="export-excel-wrapper btn"
        :data="json_data"
        :fields="json_fields"
        name="医院统计数据表.xls"
      >
        <el-button type="primary" plain class="export iconfont icon-daochu">&nbsp;导出</el-button>
      </download-excel>
  
  <el-table
      :data="tableData"
      border
      fit
      max-height="960px"
      show-summary
      :summary-method="getSummaries"
      :header-cell-style="{height:'60px',lineHeight:'60px',padding:'0'}"
      :row-style="{height:'60px', lineHeight:'60px',padding:'0'}"
      :row-class-name="tableRowClassName"
      style="width: 100%">
      <el-table-column
        prop="organizationName"
        align="center"
        label="医院名称"
        >
      </el-table-column>
      <el-table-column
        prop="organizationGradeName"
        align="center"
        label="医院等级"
        >
      </el-table-column>
      <el-table-column
        prop="remoteNum"
        align="center"
        label="远程会诊数量">
      </el-table-column>
      <el-table-column
        prop="towayNum"
        align="center"
        label="双向会诊数量">
      </el-table-column>
      <el-table-column
        prop="ultrasonicNum"
        align="center"
        label="远程超声会诊数量">
      </el-table-column>
    </el-table>
  

  解释

  		json_data数据项等于el-table中的:data对应的tableData列表项
  		json_fields导出的项：定义需要导出的数据字段
  		name：导出EXCEL的文件名
  		
  

  例如：
  		json_fields:{
  	        医院名称: 'organizationName', // 对应的是table里面列表的属性名
  	        医院等级: 'organizationGradeName',
  	        远程会诊数量: 'remoteNum',
  	        双向会诊数量: 'towayNum',
  	        远程超声会诊数量: 'ultrasonicNum'
  	      },
  导出后如下图
  

  

导入exl表格渲染列表项

暂定