Comment implémenter l'importation et l'exportation dans vue + element-ui

Element-UI est un framework d'interface utilisateur de bureau basé sur Vue.js 2.0 lancé par l'équipe front-end d'Ele.me. Le framework correspondant pour les téléphones mobiles est Mint UI. L'article suivant vous présente principalement l'utilisation de vue +. element -Informations connexes sur la façon d'implémenter des fonctions d'importation et d'exportation concises dans l'interface utilisateur, les amis dans le besoin peuvent s'y référer.

Préface

Comme nous le savons tous, ElementUI est une bibliothèque d'interface utilisateur relativement complète, mais son utilisation nécessite un peu de base Vue. Avant de commencer le texte principal de cet article, examinons d'abord la méthode d'installation.

Installer le module ElementUI

cnpm install element-ui -S

Introduit dans main.js

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

Installation globale

Vue.use(ElementUI)

Quand nous terminons l'installation, n'oubliez pas de la réexécuter, cnpm run dev , et vous pouvez maintenant utiliser directement elementUI.

Fonction d'importation et d'exportation vue + element-ui

1 L'affichage des données dans les systèmes de gestion front-end et back-end utilise généralement des tableaux. , ce qui impliquera d'importer et d'exporter ;

2. L'importation utilise le composant Upload d'element-ui

<el-upload class="upload-demo"
  :action="importUrl"//上传的路径
  :name ="name"//上传的文件字段名
  :headers="importHeaders"//请求头格式
  :on-preview="handlePreview"//可以通过 file.response 拿到服务端返回数据
  :on-remove="handleRemove"//文件移除
  :before-upload="beforeUpload"//上传前配置
  :on-error="uploadFail"//上传错误
  :on-success="uploadSuccess"//上传成功
  :file-list="fileList"//上传的文件列表
  :with-credentials="withCredentials">//是否支持cookie信息发送
</el-upload>

3. obtenu en appelant l'interface d'arrière-plan Data, puis utilisez les données pour instancier le blob, utilisez l'attribut href de la balise a pour créer un lien vers l'objet blob

 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()
  })
 }

4. Collez le code complet de l'intégralité petite démo, qui peut être utilisée directement en développement en arrière-plan (vue File)

<template>
<p>
 <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>
 <p 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>
 </p>
 <!-- 导入 -->
 <el-dialog title="导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">
  <p :class="{&#39;import-content&#39;: importFlag === 1, &#39;hide-dialog&#39;: 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>
   <p slot="tip" class="el-upload__tip">只能上传excel文件</p>
  </el-upload>
  <p class="download-template">
   <a class="btn-download" @click="download">
   <i class="icon-download"></i>下载模板</a>
  </p>
  </p>
  <p :class="{&#39;import-failure&#39;: importFlag === 2, &#39;hide-dialog&#39;: importFlag !== 2}" >
  <p class="failure-tips">
   <i class="el-icon-warning"></i>导入失败</p>
  <p 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>
  </p>
  </p>
 </el-dialog>

 <!-- 导出 -->
</p>
</template>
<script>
import * as scheduleApi from &#39;@/api/schedule&#39;
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:&#39;www.baidu.com&#39;,//后台接口config.admin_url+&#39;rest/schedule/import/&#39;
  importHeaders:{
  enctype:&#39;multipart/form-data&#39;,
  cityCode:&#39;&#39;
  },
  name: &#39;import&#39;,
  fileList: [],
  withCredentials: true,
  processing: false,
  uploadTip:&#39;点击上传&#39;,
  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 = &#39;点击上传&#39;
  this.processing = false
  this.dialogImportVisible = true
 },
 outportData() {
  scheduleApi.downloadTemplate()
 },
 handlePreview(file) {
  //可以通过 file.response 拿到服务端返回数据
 },
 handleRemove(file, fileList) {
  //文件移除
 },
 beforeUpload(file){
  //上传前配置
  this.importHeaders.cityCode=&#39;上海&#39;//可以配置请求头
  let excelfileExtend = ".xls,.xlsx"//设置文件格式
  let fileExtend = file.name.substring(file.name.lastIndexOf(&#39;.&#39;)).toLowerCase();
  if (excelfileExtend.indexOf(fileExtend) <= -1) {
   this.$message.error(&#39;文件格式错误&#39;)
   return false
  }
  this.uploadTip = &#39;正在处理中...&#39;
  this.processing = true
 },
 //上传错误
 uploadFail(err, file, fileList) {
  this.uploadTip = &#39;点击上传&#39;
  this.processing = false
  this.$message.error(err)
 },
 //上传成功
 uploadSuccess(response, file, fileList) {
  this.uploadTip = &#39;点击上传&#39;
  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(&#39;导入成功&#39;)
  this.doSearch()
  }
 },
 //下载模板
 download() {
  //调用后台模板方法,和导出类似
  scheduleApi.downloadTemplate()
 },
 }
};
</script>
<style scoped>
.hide-dialog{
 display:none;
}
</style>

Fichier 5.js, appelant l'interface

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()
  })
 }

Ce qui précède est ce que j'ai compilé pour tout le monde. j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter la pagination de table dans vue + element

Comment implémenter l'enregistrement et la lecture de l'enregistrement dans l'applet WeChat Fonction

Framework Nuxt.js (tutoriel détaillé)

Comment implémenter une horloge numérique roulante en JS+CSS

Comment obtenir l'effet flottant centré des images dans JS

Comment utiliser le plug-in de date laydate.js dans Angular4.0

Comment implémenter la fonction de service client en ligne dans jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!