vue + element-Implementing simple import and export functions in UI

Preface

As is well known, ElementUI is a relatively complete UI library, but some basic knowledge of Vue is required to use it. Before we dive into the main content of this article, let's take a look at the installation method first.

install the ElementUI module

cnpm install element-ui -S

introduce it in main.js

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

Global installation

Vue.use(ElementUI)

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

vue + element-ui import and export features

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

2.Import uses element-ui's Upload upload component;

<el-upload class="upload-demo"
  :action="importUrl"//Upload path
  :name ="name"//Upload file field name
  :headers="importHeaders"//Request header format
  :on-preview="handlePreview"//You can get the server-side returned data through file.response
  :on-remove="handleRemove"//File removal
  :before-upload="beforeUpload"//Configuration before upload
  :on-error="uploadFail"//Upload error
  :on-success="uploadSuccess"//Upload successful
  :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 use the href attribute of the a tag to link to the blob object

 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   ,
   responseType: 'arraybuffer'
  }).then((response) => {
   //Create a blob object, a kind of 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 the selection status of the second and third rows</el-button>
 <el-button @click="toggleSelection()">Unselect</el-button>
 <el-button type="primary" @click="importData">Import</el-button>
 <el-button type="primary" @click="outportData">Export</el-button>
 </div>
 <!-- Import -->
 <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"
  <!-- Does it support sending cookie information? -->
   <el-button size="small" type="primary" :disabled="processing">{{uploadTip}}</el-button>
   <div slot="tip" class="el-upload__tip">Only Excel files can be uploaded</div>
  </el-upload>
  <div class="download-template">
   <a class="btn-download" @click="download">
   <i class="icon-download"></i>Download Template</a>
  </div>
  </div>
  <div :class="{'import-failure': importFlag === 2, 'hide-dialog': importFlag !== 2">
  <div class="failure-tips">
   <i class="el-icon-warning"></i>Import Failed</div>
  <div class="failure-reason">
   <h4>Reason for Failure</h4>
   <ul>
   <li v-for="(error,index) in errorResults":key="index">The {{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 = 'Click to upload'
  this.processing = false
  this.dialogImportVisible = true
 ,
 outportData() {
  scheduleApi.downloadTemplate()
 ,
 handlePreview(file) {
  //You can get the server-side returned data through file.response
 ,
 handleRemove(file, fileList) {
  //File removal
 ,
 beforeUpload(file){
  //Configuration 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()
  }
 ,
 //Download template
 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'
// Download template
 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   ,
   responseType: 'arraybuffer'
  }).then((response) => {
   //Create a blob object, a kind of 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()
  }
 }

Summary

That's all for this article. I hope the content of this article is of certain reference value to everyone's learning or work. If you have any questions, you can leave a message for communication. Thank you for your support of the yells tutorial.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)