首页 > 其他 > 详细

表格的导入、导出

时间:2020-03-17 16:35:35      阅读:57      评论:0      收藏:0      [点我收藏+]

导入excel表格

 

<!-- 导入 -->
<el-dialog 
  width="35%" 
  :visible.sync="importVisible" 
  class="importVisible">
  <h3 slot="title" class=dialogTitle>导入</h3>
  <el-input type="text" name="fileinput" style="width:40%;" ></el-input>
  <p class="fileBox">
    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://192.168.100.105:8080/sdrs/uploadExcel/importBacInfo.action"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success=handleSuccess
      :with-credentials = true
      :limit = 1
      :auto-upload="false">
      <!-- <el-input type="file" name="fileadd" class="file"></el-input> -->
      <el-button slot="trigger" type="primary" class="file">选取文件</el-button>
    </el-upload>
  </p>
  <span style="display:block;color:red;">请先下载模板,将数据按模板规范进行整理后导入</span>
  <span slot="footer" class="dialog-footer">
    <el-button class="dialogfooterbutton" type="success" @click="submitUpload">确认</el-button>
    <el-button class="dialogfooterbutton" type="primary" @click="resetimport">取消</el-button>
  </span>
</el-dialog>

 

//导入
handlePreview(file) {
  console.log(file);
},
handleRemove(file, fileList) {
  console.log(file, fileList);
},
handleSuccess(response,file,fileList){
  if(response.code == 1){
    this.tableData1 = response.data.kcList;
    this.totalnumber=response.data.total;
    this.importmodel = false;
    this.muchtraslate = true;
    console.log(this.tableData1)
    console.log(this.totalnumber)
  }
},
submitUpload() {
  this.$refs.upload.submit(); 
  this.Transbutton=true;
  this.tabledata1ok=true; 
  this.writebutton=true;
  this.exportbutton=true;
  this.importVisible=false;
  this.getList();
},
resetimport(){
  this.importVisible=false;
},

导出excel表格

 

<el-button type="primary" @click=outExe><i class="el-icon-upload2"></i>导出</el-button>

 

//导出
outExe: function(){
  axios.get(this.$yezi+tSdrsHtTranslateManagerController.do?queryBacInfo, {
  params: {
    bacChiName: this.roleData.bacChiName,
    bacEngName: this.roleData.bacEngName,
  }  
}).then(rs=>{
  if(rs.data.code == 1){
    this.allData = rs.data.data.bacRecordInfo;
    this.handleExport();
  }
})
},
handleExport: function(){
  this.downloadLoading = true
  require.ensure([], () => {
    const { export_json_to_excel } = require(@/vendor/Export2Excel)
    const tHeader = [中文名称,英文名称]
    const filterVal = [bacChiName,bacEngName]
    const list = this.allData //导入数据
    const data = this.formatJson(filterVal, list)
    export_json_to_excel(tHeader, data, 本科生学位基本信息, 压缩文本)
  this.downloadLoading = false
  })
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
},

 

表格的导入、导出

原文:https://www.cnblogs.com/gwkzb/p/12511508.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!