vue + element-Implémentation d'une fonction d'importation et d'exportation simples en UI

Préambule

Il est bien connu que ElementUI, c'est une bibliothèque UI assez complète, mais pour l'utiliser, il est nécessaire d'avoir un peu de base en Vue. Avant de commencer le corps de l'article, regardons d'abord la méthode d'installation.

安装ElementUI模块

cnpm install element-ui -S

引入于main.js中

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

Installation globale

Vue.use(ElementUI)

N'oubliez pas de redémarrer après l'installation, exécutez cnpm run dev, vous pouvez utiliser directement elementUI maintenant.

vue + element-Fonctionnalité d'importation/exportation d'UI

1.Dans la gestion des systèmes de backend frontend, la présentation des données généralement utilise des tableaux, les tableaux impliquent généralement l'importation et l'exportation;

2.L'importation utilise element-Composant de téléchargement Upload de l'UI;

<el-upload class="upload-demo"
  :action="importUrl"//Chemin de téléchargement
  :name ="name"//Nom du champ de fichier téléchargé
  :headers="importHeaders"//Format de l'en-tête de la requête
  :on-preview="handlePreview"//You can get the server response data through file.response
  :on-remove="handleRemove"//File removal
  :before-upload="beforeUpload"//Configure before upload
  :on-error="uploadFail"//Upload error
  :on-success="uploadSuccess"//Upload successful
  :file-list="fileList"//Liste des fichiers téléchargés
  :with-credentials="withCredentials">//Est-ce que le cookie est pris en charge pour l'envoi des informations
</el-upload>

3.L'exportation utilise un objet blob de file; après avoir appelé l'interface backend pour obtenir les données, utiliser les données pour instancier blob, utiliser l'attribut href de l'élément a pour lier à l'objet blob

 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   },
   responseType: 'arraybuffer'
  }).then((response) => {
   //Créer un objet blob, une variante de file
   let blob = new Blob([response.data], { type: 'application/x-xls' })
   let link = document.createElement('a')
   link.href = window.URL.createObjectURL(blob)
   //Configurer le nom du fichier téléchargé
   link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'
   link.click()
  }
 }

4.Appuyez sur le bouton "Ajouter le code complet du petit demo" pour obtenir le code complet, que vous pouvez utiliser directement en développement backend (fichier Vue)

<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 the selection state 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>
 <!-- Importer -->
 <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">
  <!-- Supporte-t-il l'envoi des informations de cookie -->
   <el-button size="small" type="primary" :disabled="processing">{{uploadTip}}</el-button>
   <div slot="tip" class="el-upload__tip">Seulement les fichiers Excel peuvent être téléversés</<div>
  </el-upload>
  <div class="download-template">
   <a class="btn-download" @click="download">
   <i class="icon-download"></i>Télécharger le modèle</a>
  </<div>
  </<div>
  <div :class="{'import-failure': importFlag === 2, 'hide-dialog': importFlag !== 2") >
  <div class="failure-tips">
   <i class="el-icon-warning"></i>Échec d'importation</<div>
  <div class="failure-reason">
   <h4>原因 de défaillance</h4>
   <ul>
   <li v-for="(error,index) in errorResults" :key="index">第{{error.rowIdx + 1}}ligne, erreur : {{error.column}},{{error.value}},{{error.errorInfo}}<}}/li>
   </ul>
  </<div>
  </<div>
 </el-dialog>
 <!-- exporter -->
</<div>
</<template>
<script>
import * en tant que programmeApi de '@/api/programme'
export default {
 data() {
 return {
  tableData3: [
  {
   date: "2016-05-03"
   nom: "Wang Xiaohu",
   adresse: "Shanghai, Putuo District, Jinshajiang Road" 1518 manque"
  },
  {
   date: "2016-05-02"
   nom: "Wang Xiaohu",
   adresse: "Shanghai, Putuo District, Jinshajiang Road" 1518 manque"
  },
  {
   date: "2016-05-04"
   nom: "Wang Xiaohu",
   adresse: "Shanghai, Putuo District, Jinshajiang Road" 1518 manque"
  },
  {
   date: "2016-05-01"
   nom: "Wang Xiaohu",
   adresse: "Shanghai, Putuo District, Jinshajiang Road" 1518 manque"
  },
  {
   date: "2016-05-08"
   nom: "Wang Xiaohu",
   adresse: "Shanghai, Putuo District, Jinshajiang Road" 1518 manque"
  },
  {
   date: "2016-05-06"
   nom: "Wang Xiaohu",
   adresse: "Shanghai, Putuo District, Jinshajiang Road" 1518 manque"
  },
  {
   date: "2016-05-07"
   nom: "Wang Xiaohu",
   adresse: "Shanghai, Putuo District, Jinshajiang Road" 1518 manque"
  }
  ],
  multipleSelection: [],
  importUrl:'www.baidu.com',//config.admin_url interface d'arrière-plan+'rest/schedule/import/'
  importHeaders:{
  enctype:'multipart/formulaire-data',
  cityCode: ''
  },
  name: 'import',
  fileList: [],
  withCredentials: true,
  processing: false,
  uploadTip: 'Cliquez pour télécharger',
  importFlag:1,
  dialogImportVisible: false,
  errorResults:[]
 };
 },
 méthodes: {
 toggleSelection(rows) {
  if (rows) {
  rows.forEach(row => {
   this.$refs.multipleTable.toggleRowSelection(row);
  });
  } else {
  this.$refs.multipleTable.clearSelection();
  }
 },
 handleSelectionChange(val) {
  //fonction de remplacement de sélection de case à cocher, val renvoie une ligne de données complète
  this.multipleSelection = val;
 },
 importData() {
  this.importFlag = 1
  this.fileList = []
  this.uploadTip = 'Click to upload'
  this.processing = false
  this.dialogImportVisible = true
 },
 outportData() {
  scheduleApi.downloadTemplate()
 },
 handlePreview(file) {
  //You can get the server response data through file.response
 },
 handleRemove(file, fileList) {
  //File removal
 },
 beforeUpload(file){
  //Configure before upload
  this.importHeaders.cityCode='Shanghai'//Can configure request headers
  let excelfileExtend = ".xls,.xlsx"//Set file format
  let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
  if (excelfileExtend.indexOf(fileExtend) <= -1) {
   this.$message.error('File format error')
   return false
  }
  this.uploadTip = 'Processing...'
  this.processing = true
 },
 //Upload error
 uploadFail(err, file, fileList) {
  this.uploadTip = 'Click to upload'
  this.processing = false
  this.$message.error(err)
 },
 //Upload successful
 uploadSuccess(response, file, fileList) {
  this.uploadTip = 'Click to upload'
  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('Import successful')
  this.doSearch()
  }
 },
 //Télécharger le modèle
 download() {
  //Call the background template method, similar to export
  scheduleApi.downloadTemplate()
 },
 }
};
</script>
<style scoped>
.hide-dialog{
 display:none;
}
</style>

5.js file, call interface

import axios from 'axios'
// Télécharger le modèle
 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   },
   responseType: 'arraybuffer'
  }).then((response) => {
   //Créer un objet blob, une variante de 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()
  }
 }

Résumé

C'est tout le contenu de cet article. J'espère que le contenu de cet article a une certaine valeur de référence pour votre apprentissage ou votre travail. Si vous avez des questions, vous pouvez laisser des messages pour échanger, merci de votre soutien au tutoriel d'urais.

Déclaration : le contenu de cet article est partagé sur Internet, la propriété intellectuelle appartient à l'auteur original, le contenu est apporté par les utilisateurs d'Internet spontanément et téléchargé, ce site Web ne possède pas de propriété, n'a pas été traité par l'éditeur humain et ne porte pas de responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, vous pouvez envoyer un e-mail à : notice#w3Déclaration : le contenu de cet article est tiré du réseau, la propriété intellectuelle appartient à l'auteur original, le contenu est apporté par les utilisateurs d'Internet spontanément et téléchargé, ce site Web ne possède pas de propriété, n'a pas été traité par l'éditeur humain et ne porte pas de responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, vous pouvez envoyer un e-mail à : notice#w