vue + element-ui einfache Import- und Export-Funktion

Einleitung

Es ist bekannt, dass ElementUI eine relativ vollständige UI-Bibliothek ist, aber für ihre Verwendung ist ein gewisses Wissen über Vue erforderlich. Bevor wir in den Hauptteil des Artikels eintauchen, schauen wir uns zunächst die Installationsmethoden an.

ElementUI-Modul installieren

cnpm install element-ui -S

in main.js einführen

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

Global installation

Vue.use(ElementUI)

Remember to restart after installation, run cnpm run dev, now you can use elementUI directly.

vue + element-UI import/export feature

1. In the front-end back-end management system, data display is usually done with tables, which involve import and export;

2. Import uses element-UI Upload upload component;

<el-upload class="upload-demo"
  :action="importUrl"//Upload path
  :name ="name"//Uploaded file field name
  :headers="importHeaders"//Request header format
  :on-preview="handlePreview"//Kann die Daten, die vom Server zurückgegeben werden, über file.response erhalten
  :on-remove="handleRemove"//Datei entfernen
  :before-upload="beforeUpload"//Konfiguration vor dem Upload
  :on-error="uploadFail"//Uploadfehler
  :on-success="uploadSuccess"//Upload erfolgreich
  :file-list="fileList"//Uploaded file list
  :with-credentials="withCredentials">//Whether to support sending cookie information
</el-upload>

3. Export uses a file object blob; obtain data from the back-end interface, then instantiate blob with data, and link to blob object via the href attribute of the a tag

 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   ,
   responseType: 'arraybuffer'
  }).then((response) => {
   //Erstellen Sie ein blob-Objekt, eine Art von file
   let blob = new Blob([response.data], { type: 'application/x-xls' })
   let link = document.createElement('a')
   link.href = window.URL.createObjectURL(blob)
   //Configure the download file name
   link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'
   link.click()
  }
 }

4. Paste the complete code of the entire small demo, it can be directly used in back-end development (vue file)

<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="Date"
  width="120">
  <template slot-scope="scope">{{ scope.row.date }}</template>
 </el-table-column>
 <el-table-column
  prop="name"
  label="Name"
  width="120">
 </el-table-column>
 <el-table-column
  prop="address"
  label="Address"
  show-overflow-tooltip>
 </el-table-column>
 </el-table>
 <div style="margin-top: 20px">
 <el-button @click="toggleSelection([tableData3[1], tableData3[2])">Toggle selection status of the second and third rows</el-button>
 <el-button @click="toggleSelection()">Deselect</el-button>
 <el-button type="primary" @click="importData">Import</el-button>
 <el-button type="primary" @click="outportData">Export</el-button>
 </div>
 <!-- Importieren -->
 <el-dialog title="[1#]" :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}} line, error: {{error.column}}, {{error.value}}, {{error.errorInfo}}</li>
   </ul>
  </div>
  </div>
 </el-dialog>
 <!-- Export -->
</div>
</template>
<script>
import * as scheduleApi from '@/api/schedule'
export default {
 data() {
 return {
  tableData3: [
  {
   date: "2016-05-03"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinsha River Road" 1518 弄
  ,
  {
   date: "2016-05-02"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinsha River Road" 1518 弄
  ,
  {
   date: "2016-05-04"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinsha River Road" 1518 弄
  ,
  {
   date: "2016-05-01"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinsha River Road" 1518 弄
  ,
  {
   date: "2016-05-08"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinsha River Road" 1518 弄
  ,
  {
   date: "2016-05-06"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinsha River Road" 1518 弄
  ,
  {
   date: "2016-05-07"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinsha River Road" 1518 弄
  }
  ],
  multipleSelection: [],
  importUrl: 'www.baidu.com',//backend interface config.admin_url+rest/schedule/import/
  importHeaders: {
  enctype: 'multipart/form-data
  cityCode: ''
  ,
  name: 'import',
  fileList: [],
  withCredentials: true,
  processing: false,
  uploadTip: 'Click to upload',
  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) {
  //Checkbox selection fill-in function, val returns a row of data
  this.multipleSelection = val;
 ,
 importData() {
  this.importFlag = 1
  this.fileList = []
  this.uploadTip = 'Klicken Sie zum Hochladen'
  this.processing = false
  this.dialogImportVisible = true
 ,
 outportData() {
  scheduleApi.downloadTemplate()
 ,
 handlePreview(file) {
  //Kann die Daten, die vom Server zurückgegeben werden, über file.response erhalten
 ,
 handleRemove(file, fileList) {
  //Datei entfernen
 ,
 beforeUpload(file){
  //Konfiguration vor dem Upload
  this.importHeaders.cityCode='Shanghai'//Kann Request-Header konfiguriert werden
  let excelfileExtend = ".xls,.xlsx"//Dateiformat einstellen
  let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
  if (excelfileExtend.indexOf(fileExtend) <= -1) {
   this.$message.error('Dateiformatfehler')
   return false
  }
  this.uploadTip = 'Wird bearbeitet...'
  this.processing = true
 ,
 //Uploadfehler
 uploadFail(err, file, fileList) {
  this.uploadTip = 'Klicken Sie zum Hochladen'
  this.processing = false
  this.$message.error(err)
 ,
 //Upload erfolgreich
 uploadSuccess(response, file, fileList) {
  this.uploadTip = 'Klicken Sie zum Hochladen'
  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('Einführung erfolgreich')
  this.doSearch()
  }
 ,
 //Muster herunterladen
 download() {
  //Aufruf der Backend-Templatormethode, ähnlich wie Export
  scheduleApi.downloadTemplate()
 ,
 }
};
</script>
<style scoped>
.hide-dialog{
 display:none;
}
</style>

5.js Datei, Anfrageaufruf

import axios from 'axios'
// Muster herunterladen
 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   ,
   responseType: 'arraybuffer'
  }).then((response) => {
   //Erstellen Sie ein blob-Objekt, eine Art von 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()
  }
 }

Zusammenfassung

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass dieser Artikel für Ihre Lern- oder Arbeitsaktivitäten einen gewissen Referenzwert hat. Wenn Sie Fragen haben, können Sie gerne Kommentare hinterlassen. Vielen Dank für Ihre Unterstützung der Anleitung.

Erklärung: Der Inhalt dieses Artikels stammt aus dem Internet und ist Eigentum der jeweiligen Urheber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt keine Haftung für rechtliche Fragen. Wenn Sie verdächtige urheberrechtliche Inhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail zur Meldung von Verstößen und fügen Sie relevante Beweise bei. Bei nachgewiesener Täuschung wird diese Website die beanstandeten inhalte sofort löschen.)