vue 批量添加组件(Excel导入)

此组件得好处是识别excel的文件。

1.首先安装xlsx:  

npm install xlsx

因为该组件是共用组件,很多页面都会用到,因此该组件应该放到 components/UploadExcel/index.vue(代码如下)

index.vue

可根据自己所需按钮来修改样式






2.在使用得页面引用

  

 

在制定按钮地方放入模板代码

方法如下:

vue 批量添加组件(Excel导入)_第1张图片

beforeUpload(file) {   //导入
     	var a = file
	      const isLt1M = file.size / 1024 / 1024 < 1
	      if (isLt1M) {
	        return true
	      }
	      this.$message({
	        message: '请不要上传大于1m的文件!',
	        type: 'warning'
	      })
	      return false
    },

vue 批量添加组件(Excel导入)_第2张图片

handleSuccess({ results, header }) {  //导入内容
     	console.log("223",results)
     	console.log(header)
     	/*var resultsTo = results.toString()*/
     	var jarr = JSON.stringify(results)
     	var params = {
	      		users:jarr
	      	}
     	console.log("传入参数",params)
     	uploadFile(params).then(response => {
	  				this.$message({
		            type: 'success',
		            message: '添加成功!'
		        });
		        this.getList()
	      })
    }

 

你可能感兴趣的:(vue)