So implementieren Sie Import und Export in Vue + Element-UI-js-Tutorial-php.cn

Element-UI ist ein Desktop-UI-Framework, das auf Vue.js 2.0 basiert. Das entsprechende Framework für Mobiltelefone ist Mint UI. Der folgende Artikel führt Sie hauptsächlich in die Verwendung von vue + ein Element - Verwandte Informationen zur Implementierung prägnanter Import- und Exportfunktionen in der Benutzeroberfläche, Freunde in Not können darauf verweisen.

Vorwort

Wie wir alle wissen, ist ElementUI eine relativ vollständige UI-Bibliothek, aber ihre Verwendung erfordert ein wenig Vue-Grundlage. Bevor wir mit dem Haupttext dieses Artikels beginnen, werfen wir einen Blick auf die Installationsmethode.

ElementUI-Modul installieren

cnpm install element-ui -S

Nach dem Login kopieren

Einführen

import ElementUI from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-default/index.css&#39;

Nach dem Login kopieren

Global in main.js installieren

Vue.use(ElementUI)

Nach dem Login kopieren

Denken Sie daran, es nach der Installation erneut zu installieren Führen Sie cnpm run dev aus, und Sie können elementUI jetzt direkt verwenden.

Vue + Element-UI-Import- und Exportfunktion

1. Die Datenanzeige in Front-End- und Back-End-Verwaltungssystemen verwendet im Allgemeinen Tabellen , was den Import und Export beinhaltet;

2. Der Import erfolgt über die Upload-Komponente von element-ui; durch Aufrufen der Hintergrundschnittstelle. Verwenden Sie dann Daten, um den Blob zu instanziieren, und verwenden Sie das href-Attribut des a-Tags, um eine Verknüpfung zum Blob-Objekt herzustellen.

<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>

Nach dem Login kopieren

4 Fügen Sie den vollständigen Code der gesamten kleinen Demo ein direkt in der Hintergrundentwicklung verwendet werden (vue-Datei)

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

Nach dem Login kopieren

5.js-Datei, Aufrufschnittstelle

<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>

Nach dem Login kopieren

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, es wird für alle hilfreich sein Zukunft.

Verwandte Artikel:

So implementieren Sie Tabellenpaging in Vue + Element

So implementieren Sie die Aufzeichnung und Wiedergabe der Aufzeichnung im WeChat-Applet Funktion

Nuxt.js-Framework (ausführliches Tutorial)

So implementieren Sie eine rollende Digitaluhr in JS+CSS

So erzielen Sie den zentrierten Floating-Effekt von Bildern in JS

So verwenden Sie das Datums-Plug-in „laydate.js“ in Angular4.0

So implementieren Sie die Online-Kundendienstfunktion in jQuery

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Import und Export in Vue + Element-UI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!