vue + element-UIでシンプルなインポート/エクスポート機能を実現

前略

よく知られているように、ElementUIは比較的完全なUIライブラリですが、それを使用するには少しVueの基礎が必要です。本文の本文の始めに先に、インストール方法を見てみましょう。

ElementUIモジュールのインストール

cnpm install element-ui -S

main.js内で引入

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

グローバルインストール

Vue.use(ElementUI)

インストールが完了したら、cnpm run devを再実行して、今や直接elementUIを使用できます。

vue + element-UIインポートエクスポート機能

1.前段バックエンド管理システムにおけるデータ表示は、一般的にテーブルを使用し、テーブルはインポートおよびエクスポートに関連しています;

2.インポートはelement-UIのUploadアップロードコンポーネント;

<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.エクスポートはfileのオブジェクトblobを使用して行われ、バックエンドのインターフェースを呼び出してデータを取得し、データでblobをインスタンス化し、aタグのhref属性を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.整个小デモの完全なコードを貼り付けて、バックエンド開発では直接使用できます(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="日付"
  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>
 <div 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>
 </div>
 <!-- インポート -->
 <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">
  <!-- クッキー情報の送信をサポートしていますか -->
   <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}}行、エラー：{{error.column}},{{error.value}},{{error.errorInfo}}</li>
   </ul>
  </div>
  </div>
 </el-dialog>
 <!-- エクスポート -->
</div>
</template>
<script>
import * as scheduleApi from '@/api/schedule'
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: 'www.baidu.com',//後方インターフェースconfig.admin_url+'rest/schedule/import/'
  importHeaders: {
  enctype: 'multipart/form-data
  cityCode: ''
  ,
  name: 'import',
  fileList: [],
  withCredentials: true,
  processing: false,
  uploadTip: 'アップロードをクリック',
  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 = 'アップロードをクリック'
  this.processing = false
  this.dialogImportVisible = true
 ,
 outportData() {
  scheduleApi.downloadTemplate()
 ,
 handlePreview(file) {
  //file.responseを通じてサーバーからの返信データを取得できます
 ,
 handleRemove(file, fileList) {
  //ファイルの削除
 ,
 beforeUpload(file){
  //アップロード前の設定
  this.importHeaders.cityCode='上海'//リクエストヘッダを設定可能
  let excelfileExtend = ".xls,.xlsx"//ファイル形式を設定
  let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
  if (excelfileExtend.indexOf(fileExtend) <= -1) {
   this.$message.error('ファイル形式エラー')
   return false
  }
  this.uploadTip = '処理中...'
  this.processing = true
 ,
 //アップロードエラー
 uploadFail(err, file, fileList) {
  this.uploadTip = 'アップロードをクリック'
  this.processing = false
  this.$message.error(err)
 ,
 //アップロード成功
 uploadSuccess(response, file, fileList) {
  this.uploadTip = 'アップロードをクリック'
  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('インポート成功')
  this.doSearch()
  }
 ,
 //テンプレートをダウンロード
 download() {
  //バックエンドのテンプレートメソッドを呼び出し、エクスポートと似ています
  scheduleApi.downloadTemplate()
 ,
 }
;
</script>
<style scoped>
.hide-dialog{
 display:none;
}
</style>

5.jsファイル、インターフェースを呼び出す

axiosからimport
// テンプレートをダウンロード
 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()
  }
 }

まとめ

これでこの記事のすべての内容が終わりました。この記事の内容が皆様の学習や仕事に参考になることを願っています。疑問がある場合は、コメントを残してください。皆様の「叫び」ガイドへのサポートに感謝します。

声明：この記事の内容はインターネットから取得しており、著作権者は所有しており、インターネットユーザーによって自発的に提供されたコンテンツです。このサイトは所有権を持ちません。また、人工的な編集も行われていません。著作権侵害を疑われる内容がある場合は、メールを送信してください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）