VUE Element 上传插件引入表格on-success传参问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE Element 上传插件引入表格on-success传参问题相关的知识，希望对你有一定的参考价值。

参考技术A 因为官方文档on-success的参数是固定的三个参数response,file,filelist，如果要增加插槽的scope参数传递，可以使用箭头函数的方式：
<el-upload  class="upload-demo"

 action="//leads.sales.sina.com.cn/api/upload/file"                        

 :on-success=" (response,file,filelist)=> fileUploadSuccess(scope.row, response,file,filelist) "

  :on-error="fileUploadError"

   :campaign_id="scope.row.id">

    <el-button slot="trigger" size="small" type="primary">选择XLS文件</el-button> 

    <div v-show="!scope.row.filePath" class="noprepare">表格未准备</div>

</el-upload>

Vue中 element的table表格导入 与 导出为excel表格的实现

Vue中 element的table表格导入 与 导出为excel表格的实现

一、导入

2.1 安装xlsx插件

$ npm i xlsx@0.17.0

2.2 新建导入功能组件

新建组件 UploadExcel/index.vue

<template>
  <div class="upload-excel">
    <div class="btn-upload">
      <el-button :loading="loading" size="mini" type="primary" @click="handleUpload">
        点击上传
      </el-button>
    </div>

    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      <i class="el-icon-upload" />
      <span>将文件拖到此处</span>
    </div>
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default 
  props: 
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function// eslint-disable-line
  ,
  data() 
    return 
      loading: false,
      excelData: 
        header: null,
        results: null
      
    
  ,
  methods: 
    generateData( header, results ) 
      this.excelData.header = header
      this.excelData.results = results
      this.onSuccess && this.onSuccess(this.excelData)
    ,
    handleDrop(e) 
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      const files = e.dataTransfer.files
      if (files.length !== 1) 
        this.$message.error('Only support uploading one file!')
        return
      
      const rawFile = files[0] // only use files[0]
      if (!this.isExcel(rawFile)) 
        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
        return false
      
      this.upload(rawFile)
      e.stopPropagation()
      e.preventDefault()
    ,
    handleDragover(e) 
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    ,
    handleUpload() 
      this.$refs['excel-upload-input'].click()
    ,
    handleClick(e) 
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      this.upload(rawFile)
    ,
    upload(rawFile) 
      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
      if (!this.beforeUpload) 
        this.readerData(rawFile)
        return
      
      const before = this.beforeUpload(rawFile)
      if (before) 
        this.readerData(rawFile)
      
    ,
    readerData(rawFile) 
      this.loading = true
      return new Promise((resolve, reject) => 
        const reader = new FileReader()
        reader.onload = e => 
          const data = e.target.result
          const workbook = XLSX.read(data,  type: 'array' )
          const firstSheetName = workbook.SheetNames[0]
          const worksheet = workbook.Sheets[firstSheetName]
          const header = this.getHeaderRow(worksheet)
          const results = XLSX.utils.sheet_to_json(worksheet)
          this.generateData( header, results )
          this.loading = false
          resolve()
        
        reader.readAsArrayBuffer(rawFile)
      )
    ,
    getHeaderRow(sheet) 
      const headers = []
      const range = XLSX.utils.decode_range(sheet['!ref'])
      let C
      const R = range.s.r
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C)  /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell( c: C, r: R )]
        /* find the cell in the first row */
        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
      
      return headers
    ,
    isExcel(file) 
      return /\\.(xlsx|xls|csv)$/.test(file.name)
    
  

</script>
<style scoped lang="scss">
.upload-excel 
  display: flex;
  justify-content: center;
  margin-top: 100px;

  .excel-upload-input 
    display: none;
    z-index: -9999;
  

  .btn-upload,
  .drop 
    border: 1px dashed #bbb;
    width: 350px;
    height: 160px;
    text-align: center;
    line-height: 160px;
  

  .drop 
    line-height: 80px;
    color: #bbb;

    i 
      font-size: 60px;
      display: block;
    
  

</style>

2.3 注册全局的导入excel组件

src\\components\\index.js

import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
export default 
  install(Vue) 
    Vue.component('PageTools', PageTools) // 注册工具栏组件
    Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件

2.4 创建导入路由组件

<template>
  <!-- 公共导入组件 --> 
  <upload-excel :on-success="success" />
</template>

2.5 封装导入接口 实现excel导入

import  importEmployee  from '@/api/employees'

// 在methods中修改success函数
async  success( header, results ) 
      // 如果是导入员工
        const userRelations = 
          '入职日期': 'timeOfEntry',
          '手机号': 'mobile',
          '姓名': 'username',
          '转正日期': 'correctionTime',
          '工号': 'workNumber'
        
       // const arr = []
      // results.forEach(item => 
      //   const userInfo = 
      //   Object.keys(item).forEach(key => 
      //     userInfo[userRelations[key]] = item[key]
      //   )
      //   arr.push(userInfo)
      // )
      // await importEmployee(arr) // 调用导入接口
      // map 函数 通过指定函数处理数组的每个元素，并返回处理后的数组。
      // map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
      var newArr = results.map(item => 
        var userInfo = 
        Object.keys(item).forEach(key => 
          userInfo[userRelations[key]] = item[key]
        )
        return userInfo
      )
      await importEmployee(newArr) // 调用导入接口
      this.$message.success('导入excel成功')
      this.$router.back() // 回到上一个页面

2.6 导入时间格式的处理

定义事件处理方法 调用此方法

    formatDate(numb, format) 
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      if (format && format.length === 1) 
        return year + format + month + format + date
      
      return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)

二、导出

2.1 安装excel所需依赖和按需加载

npm install xlsx@0.17.0 file-saver -S
npm install script-loader -S -D

2.2 vue-element-admin提供的导出功能模块

Export2Excel.js代码

/* eslint-disable */
import  saveAs  from 'file-saver'
import XLSX from 'xlsx'

function generateArray(table) 
  var out = [];
  var rows = table.querySelectorAll('tr');
  var ranges = [];
  for (var R = 0; R < rows.length; ++R) 
    var outRow = [];
    var row = rows[R];
    var columns = row.querySelectorAll('td');
    for (var C = 0; C < columns.length; ++C) 
      var cell = columns[C];
      var colspan = cell.getAttribute('colspan');
      var rowspan = cell.getAttribute('rowspan');
      var cellValue = cell.innerText;
      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges
      ranges.forEach(function (range) 
        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) 
          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
        
      );

      //Handle Row Span
      if (rowspan || colspan) 
        rowspan = rowspan || 1;
        colspan = colspan || 1;
        ranges.push(
          s: 
            r: R,
            c: outRow.length
          ,
          e: 
            r: R + rowspan - 1,
            c: outRow.length + colspan - 1
          
        );
      ;

      //Handle Value
      outRow.push(cellValue !== "" ? cellValue : null);

      //Handle Colspan
      if (colspan)
        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
    
    out.push(outRow);
  
  return [out, ranges];
;

function datenum(v, date1904) 
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);


function sheet_from_array_of_arrays(data, opts) 
  var ws = ;
  var range = 
    s: 
      c: 10000000,
      r: 10000000
    ,
    e: 
      c: 0,
      r: 0
    
  ;
  for (var R = 0; R != data.length; ++R) 
    for (var C = 0; C != data[R].length; ++C) 
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      var cell = 
        v: data[R][C]
      ;
      if (cell.v == null) continue;
      var cell_ref = XLSX.utils.encode_cell(
        c: C,
        r: R
      );

      if (typeof cell.v === 'number') cell.t = 'n';
      else if (typeof cell.v === 'boolean') cell.t = 'b';
      else if (cell.v instanceof Date) 
        cell.t = 'n';
        cell.z = XLSX.SSF._table[14]以上是关于VUE Element 上传插件引入表格on-success传参问题的主要内容，如果未能解决你的问题，请参考以下文章
 

 【vue】插件


 Vue中 element的table表格导入 与 导出为excel表格的实现


 vue+element-ui做表格的导出功能。


 vue-cli引入element和vant前端ui组件


 elementUI的Table 表格问题


 vue-form-table（vuejs+element-ui的表格表单控件的二次封装插件）