English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Найдено в
  2. Главная страница
  3. Опытные записи
  4. Основная часть

Реализация функции импорта и экспорта в 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. Импорт использует компонент загрузки Upload из element-ui;

<el-upload class="загрузка-демо"
  :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. Экспорт использует объект blob файла; через вызов интерфейса в фоновом режиме получения данных,然后用 данные для инстанцирования blob, с помощью атрибута href тега a свяжитесь с объектом 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. Наложите полный код всего маленького demo, в разработке в фоновом режиме его можно напрямую использовать (файл vue)

<template>
<div>
 <el-table
 ref="multipleTable"
 :data="tableData3"
 tooltip-effect="dark"
 border
 style="width: 80%"
 @изменение-выбора="изменить_выбор">
 <el-table-column
  тип="выбор"
  ширина="55">
 </el-table-column>
 <el-table-column
  заголовок="дата"
  ширина="120">
  <template slot-scope="пробел">{{ пробел.строка.date }}</template>
 </el-table-column>
 <el-table-column
  свойство="имя"
  заголовок="имя"
  ширина="120">
 </el-table-column>
 <el-table-column
  свойство="адрес"
  заголовок="адрес"
  показывать-переполнение-подсказкой>
 </el-table-column>
 </el-table>
 <div style="отступ: 20px">
 <el-button @click="переключить_выбор([данные_таблицы3[1], данные_таблицы3[2]])">переключить состояние выбора второго и третьего рядов</el-button>
 <el-button @click="отменить_выбор">отменить выбор</el-button>
 <el-button type="primary" @click="импорт_данных">импорт</el-button>
 <el-button type="primary" @click="экспорт_данных">экспорт</el-button>
 </div>
 <!-- Импорт -->
 <el-dialog title="[#1#]" :visible.sync="вид_диалога_импорта" :modal-append-to-body="false" :close-on-click-modal="false" class="диалог-импорт">
  <div :class="{'содержимое-импорта': импортный_флаг === 1, 'скрыть-диалог': импортный_флаг !== 1}">
  <el-upload class="загрузка-демо"
  :action="импортный_адрес"
  :name ="имя"
  :headers="импортные_заголовки"
  :on-preview="просмотр"
  :on-remove="удалить"
  :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>
   <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 файл, вызов интерфейса

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

Резюме

Вот и все, что есть в этой статье, надеюсь, что содержимое статьи будет иметь определенную ценность для вашего обучения или работы. Если у вас есть вопросы, пожалуйста, оставляйте комментарии для обсуждения, спасибо за поддержку учебника "Крик".

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета в добровольном порядке и загружен самостоятельно. Этот сайт не обладает правами собственности на него, не производил ручную редактуру и не несет ответственности за нее. Если вы обнаружите подозрительное содержимое, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении авторских прав,并提供相关证据. При подтверждении факта нарушения авторских прав сайт незамедлительно удаляет подозрительное содержимое.

Основной учебник
Рекомендуем