vue导入excel进度条

要实现导入Excel并显示进度条，你可以使用vue-progressbar和xlsx插件。以下是实现步骤：

1. 安装vue-progressbar和xlsx插件：

npm install vue-progressbar xlsx --save

2. 在vue组件中引入插件：

import VueProgressBar from 'vue-progressbar'
import XLSX from 'xlsx'

3. 在vue组件中定义进度条选项：

data() {
  return {
    progressBarOptions: {
      color: '#bffaf3',
      failedColor: '#874b4b',
      thickness: '5px',
      transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 400
      },
      autoRevert: true,
      location: 'top',
      inverse: false
    }
  }
}

4. 在vue组件中定义导入Excel的方法：

methods: {
  async importExcel() {
    const file = this.$refs.file.files[0]
    const reader = new FileReader()
    const vm = this
    let data = null

    reader.onload = function(event) {
      const data = new Uint8Array(event.target.result)
      const workbook = XLSX.read(data, {type: 'array'})
      const sheetName = workbook.SheetNames[0]
      const sheet = workbook.Sheets[sheetName]
      data = XLSX.utils.sheet_to_json(sheet)
      vm.$store.dispatch('importData', data)
    }

    reader.readAsArrayBuffer(file)
  }
}

5. 在vue组件中使用vue-progressbar组件和导入Excel的方法：

<vue-progress-bar :options="progressBarOptions"></vue-progress-bar>
<input type="file" ref="file" @change="importExcel">

这样就完成了导入Excel并显示进度条的功能。