Vue导入excel功能封装

1.组件封装

<!-- 导入Excel组件 -->
<template>
<div>
    <el-button size="small" type="primary" @click="importOpen">
    导入
    </el-button>
    <!-- 导入弹框 -->
    <el-dialog title="文件上传" :visible.sync="dialogImport">
     <div>
       <el-upload
        :show-file-list="false"
        ref="importInfo"
        action=""
        :http-request="uploadFile"
        :on-change="handleChange"
        :auto-upload="false"
       >
       <el-input slot="trigger" v-model="importfilename" placeholder="请选择文件" readonly></el-input>
       <el-button type="success" @click="submitUpload">上传文件</el-button>
       </el-upload>
     </div>
    </el-dialog>
    </div>
</template>


<script>
export default {
    name:"UploadExl",
    components:{

    },
    props:{
        importFile:{
            type:String,
            default(){
                return ""
            }
        },
      uploadExcel:{
          type:Function,
          default(){
              return
          }
      },
      resSta:{
          type:String,
          default(){
              return ""
          }
      }

    },
    data(){
     return{
         formData:{},
         dialogImport:false,
         importfile:this.importfile,
         importfilename:"",
         resState,
     }
    },
    watch:{
     resSta(val){
         this.resState=val
         this.$message(
             "导入成功"
         ),
         this.dialogImport=false
         this.$refs.importInfo.clearFiles()
         this.inportfilename=""
     }
    },
    methods:{
        importOpen(){
            this.dialogImport=true
        },
        uploadFile(param){
           const formData=new FormData()
           formData.append(this.importfile,param.file)
          this.uploadExcel(this.formData)
        },

        submitUpload(){
            if(this.importfilename===""){
                this.$message({
                    message:this.$t("请选择文件"),
                    type:"error"
                })
            }else{
                this.$refs.importInfo.submit()
            }
        },
        handleChange(){
             this.importfilename=""
            let Xls=file.name.split(".");
            if(Xls[1]==="et"||Xls[1]==="xls"||Xls[1]==="xlsx"){
                this.importfilename=file.name
            }else{
                this.$message.error("上传文件只能是Excel文件")
            }
        }
    }

}
</script>

2.组件使用

<!-- 页面使用导入组件 -->
<template>
   <div>
   <uploadXl
   :formdata="formdata"
   :import-file="importFile"
   :upload-excel="uploadExcel"
   :res-Sta="resSta"
   />
   </div>
</template>
<script>
import {uploadXl} from "../components/UploadXl"
import { importEcl } from "../api/..." //请求方法
export default {
    components:{
        uploadXl
    },
    data(){
        return{
    importFile:"文件名",
    formdata:{},
    resSta:"0" //弹框的状态
        }
    },
    methods:{
        uploadExcel(file){
          importEcl(file).then(response=>{
              if(response.resCode===0){
                  this.resSta="1"
                  this.findList() //重新调用请求方法
              }
          }) 
        }
    }
    }
</script>

最后

以上就是典雅红酒为你收集整理的Vue导入excel功能封装的全部内容，希望文章能够帮你解决Vue导入excel功能封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。