做vue项目中遇到的问题

1. el-table无法展示

• 使用el-table时，有数据，但是table没有展示，换成插值表达式展示table的数据可以展示。 解决：删除node_modules，重新安装

原因：怀疑时element-ui版本问题，因为项目中有yarn.lock，所以重新安装就好了，element-ui的版本是2.13.2

2. 无法使用双问号??报 Support for the experimental syntax 'nullishCoalescingOperator' isn't currently enabled(当前未启用对实验语法“null合并运算符”的支持)

解决：Add @babel/plugin-proposal-nullish-coalescing-operator to the 'plugins' section of your Babel config to enable transformation.（将 @babel/plugin-proposal-nullish-coalescing-operator 添加到 Babel 配置文件的“plugins”部分以启用转换）

• npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator
• babel.config.js

3. element-ui中的 loading service

import { Loading } from 'element-ui'

//监听dialogVisible,当dialogVisible为true时,展示加载中
watch: {
    dialogVisible: {
      handler(val) {
        if (val) {
          const node = document.getElementById('dialog')
          this.selfLoading = Loading.service({ target: node, background: 'rgba(0, 0, 0, 0.1)', fullscreen: true, text: '加载中' })
        }
      },
    },
  },
  //隐藏loading
  handlerOnload() {
      this.selfLoading.close()
  },
  

4. 导入表格

用法

//Import.vue

<ImportExcel
    :callback="batchImportFile"
    size="mini"
    explain="导入"
    :sheet-to-json-opt="sheetToJsonOpt_add"
    :rules="rules_add"
    :format-config-list="formatList_add"
>
    <template v-slot="slot">
        <el-button @click="slot.onClick">
            导入
        </el-button>
    </template>
</ImportFile>

export default {
    data() {
        return {
            sheetToJsonOpt_add: {
                header: ['skuId', 'totalQty', 'usableQty', 'qty'],
            },
            rules_add: {
                maxRows: 4,
                maxCols: 4,
                headerEqualkeys: ['skuId', '总库存', '可用库存', '数量'],
            },
            formatList_add: [{ column: 'D', format: (val) => Number(val) }],
        }
    },
    methods: {
        batchImportFile(err, data) { // fileName,sheetName,sheetHeader在data[0]中
            const getExcelData = data[0].data //导入的表格数据
            
            //对getExcelData做一些处理,请求接口或者提取数据
            
            const params = getExcelData.map(c => c.id)
            axios.post({url, params})            
        }
    }
}

基于sheet.js做的二次封装 //ImportExcel.vue

<template>
    <input @change="onChange" />
</template>

onChange() {
    
    this.ImportExcel = new Excel(configOptions)
    this.ImportExcel.excelParse(file, this.formatConfigList)
}

// Excel.js

    import {utils, read, writeFile } from 'xlxs'
    class Excel {
        excelParse(file, formatConfigList) {
            
             const reader = new FileReader() 
             reader.onload = (e) => {
                 const result = e.target.result
                 
                 let binary = ''
                 let bytes = new Unit8Array(result)
                 let length = bytes.byteLength
                 for(let i=0; i<length; i++) {
                     binary += String.fromCharCode(bytes[i])
                 }
                 const ws = read(binary, this.parseOpt)
                 const sheetNames = ws.SheetNames
                 
                 //....
             }
        }
    }

5. pdf展示

npm i --save vue-pdf

文档