cnpm install element-ui -S

import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

<el-upload class="upload-demo"  :action="importUrl"http://上傳的路徑  :name ="name"http://上傳的文件字段名  :headers="importHeaders"http://請求頭格式  :on-preview="handlePreview"http://可以通過 file.response 拿到服務端返回數據  :on-remove="handleRemove"http://文件移除  :before-upload="beforeUpload"http://上傳前配置  :on-error="uploadFail"http://上傳錯誤  :on-success="uploadSuccess"http://上傳成功  :file-list="fileList"http://上傳的文件列表  :with-credentials="withCredentials">//是否支持cookie信息發送</el-upload>

 export const downloadTemplate = function (scheduleType) {  axios.get('/rest/schedule/template', {   params: {    "scheduleType": scheduleType   },   responseType: 'arraybuffer'  }).then((response) => {   //創建一個blob對象,file的一種   let blob = new Blob([response.data], { type: 'application/x-xls' })   let link = document.createElement('a')   link.href = window.URL.createObjectURL(blob)   //配置下載的文件名   link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'   link.click()  }) }

<template><div> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" border style="width: 80%" @selection-change="handleSelectionChange"> <el-table-column  type="selection"  width="55"> </el-table-column> <el-table-column  label="日期"  width="120">  <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column  prop="name"  label="姓名"  width="120"> </el-table-column> <el-table-column  prop="address"  label="地址"  show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切換第二、第三行的選中狀態</el-button> <el-button @click="toggleSelection()">取消選擇</el-button> <el-button type="primary" @click="importData">導入</el-button> <el-button type="primary" @click="outportData">導出</el-button> </div> <!-- 導入 --> <el-dialog title="導入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">  <div :class="{'import-content': importFlag === 1, 'hide-dialog': importFlag !== 1}">  <el-upload class="upload-demo"  :action="importUrl"  :name ="name"  :headers="importHeaders"  :on-preview="handlePreview"  :on-remove="handleRemove"  :before-upload="beforeUpload"  :on-error="uploadFail"  :on-success="uploadSuccess"  :file-list="fileList"  :with-credentials="withCredentials">  <!-- 是否支持發送cookie信息 -->   <el-button size="small" type="primary" :disabled="processing">{{uploadTip}}</el-button>   <div slot="tip" class="el-upload__tip">只能上傳excel文件</div>  </el-upload>  <div class="download-template">   <a class="btn-download" @click="download">   <i class="icon-download"></i>下載模板</a>  </div>  </div>  <div :class="{'import-failure': importFlag === 2, 'hide-dialog': importFlag !== 2}" >  <div class="failure-tips">   <i class="el-icon-warning"></i>導入失敗</div>  <div class="failure-reason">   <h4>失敗原因</h4>   <ul>   <li v-for="(error,index) in errorResults" :key="index">第{{error.rowIdx + 1}}行，錯誤：{{error.column}},{{error.value}},{{error.errorInfo}}</li>   </ul>  </div>  </div> </el-dialog> <!-- 導出 --></div></template><script>import * as scheduleApi from '@/api/schedule'export default { data() { return {  tableData3: [  {   date: "2016-05-03",   name: "王小虎",   address: "上海市普陀區金沙江路 1518 弄"  },  {   date: "2016-05-02",   name: "王小虎",   address: "上海市普陀區金沙江路 1518 弄"  },  {   date: "2016-05-04",   name: "王小虎",   address: "上海市普陀區金沙江路 1518 弄"  },  {   date: "2016-05-01",   name: "王小虎",   address: "上海市普陀區金沙江路 1518 弄"  },  {   date: "2016-05-08",   name: "王小虎",   address: "上海市普陀區金沙江路 1518 弄"  },  {   date: "2016-05-06",   name: "王小虎",   address: "上海市普陀區金沙江路 1518 弄"  },  {   date: "2016-05-07",   name: "王小虎",   address: "上海市普陀區金沙江路 1518 弄"  }  ],  multipleSelection: [],  importUrl:'www.baidu.com',//后臺接口config.admin_url+'rest/schedule/import/'  importHeaders:{  enctype:'multipart/form-data',  cityCode:''  },  name: 'import',  fileList: [],  withCredentials: true,  processing: false,  uploadTip:'點擊上傳',  importFlag:1,  dialogImportVisible:false,  errorResults:[] }; }, methods: { toggleSelection(rows) {  if (rows) {  rows.forEach(row => {   this.$refs.multipleTable.toggleRowSelection(row);  });  } else {  this.$refs.multipleTable.clearSelection();  } }, handleSelectionChange(val) {  //復選框選擇回填函數,val返回一整行的數據  this.multipleSelection = val; }, importData() {  this.importFlag = 1  this.fileList = []  this.uploadTip = '點擊上傳'  this.processing = false  this.dialogImportVisible = true }, outportData() {  scheduleApi.downloadTemplate() }, handlePreview(file) {  //可以通過 file.response 拿到服務端返回數據 }, handleRemove(file, fileList) {  //文件移除 }, beforeUpload(file){  //上傳前配置  this.importHeaders.cityCode='上海'//可以配置請求頭  let excelfileExtend = ".xls,.xlsx"http://設置文件格式  let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();  if (excelfileExtend.indexOf(fileExtend) <= -1) {   this.$message.error('文件格式錯誤')   return false  }  this.uploadTip = '正在處理中...'  this.processing = true }, //上傳錯誤 uploadFail(err, file, fileList) {  this.uploadTip = '點擊上傳'  this.processing = false  this.$message.error(err) }, //上傳成功 uploadSuccess(response, file, fileList) {  this.uploadTip = '點擊上傳'  this.processing = false  if (response.status === -1) {  this.errorResults = response.data  if (this.errorResults) {   this.importFlag = 2  } else {   this.dialogImportVisible = false   this.$message.error(response.errorMsg)  }  } else {  this.importFlag = 3  this.dialogImportVisible = false  this.$message.info('導入成功')  this.doSearch()  } }, //下載模板 download() {  //調用后臺模板方法,和導出類似  scheduleApi.downloadTemplate() }, }};</script><style scoped>.hide-dialog{ display:none;}</style>

import axios from 'axios'// 下載模板 export const downloadTemplate = function (scheduleType) {  axios.get('/rest/schedule/template', {   params: {    "scheduleType": scheduleType   },   responseType: 'arraybuffer'  }).then((response) => {   //創建一個blob對象,file的一種   let blob = new Blob([response.data], { type: 'application/x-xls' })   let link = document.createElement('a')   link.href = window.URL.createObjectURL(blob)   link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'   link.click()  }) }