Vue_Element-ui之 导入、导出 精华版

看了网上的文章，乱七八糟。拿着别人的文章复制粘贴。去他求球的吧！

一、导入
方法一(靠标签导入文件)

 <el-upload
       :show-file-list="false"  //是否显示已上传文件列表
       :auto-upload="true"     //是否在选取文件后立即进行上传
       :limit="1"    //限制上传的个数
       action="url"   //接口的地址
       accept='.xls'  //上传文件的格式
 > 
 </el-upload>

这种方法大家应该都知道，直接把链接放上去就行了。不要点击什么按钮再去单独上传
也是为什么:auto-upload=true的原因 不写就行！只是为了大家更方便理解！

方法二(:http-request)

 <el-dialog
        title="批量倒入"
        :visible.sync="dialogVisible_xiazai"  //控制显示隐藏
        width="40%"  //整个屏幕的宽度
        class="daoru_class"
        :before-close="handleClose" //点击阴影部分时候 确认问一下是否想要关闭
        >
        <div class="add_usercontent daoru">
          <div class="moban_content">
            <span class="buttom_xuanze">
              <el-upload
                :show-file-list="false" //是否显示已上传文件列表
                :auto-upload="false"   //是否在选取文件后立即进行上传
                :limit="1"   //限制上传的个数
                action="string" //接口的地址
                ref="upload" //点击buttom按钮时候需要用
                :http-request="z_dialogVisible_xiazai"  //覆盖默认的上传行为，可以自定义上传的实现
                accept='.xls' //上传的格式
              >  
                <el-button><span><img src="../../assets/img/xzwj.png" alt=""></span> 点击上传</el-button>  
              </el-upload>
              </span>
            <div class="shepassword"><input v-model="newpasswords" type="text" placeholder="请设置初始密码"> </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_eidt = false">取 消</el-button>
          <el-button :disabled="isAble" type="primary" @click="z_dialogVisible_xiazais()">导入</el-button>
        </span>
    </el-dialog>

 z_dialogVisible_xiazais(){
       this.$refs.upload.submit();  // ref="upload" //点击buttom按钮时候需要用 标签那必须要有
},

 z_dialogVisible_xiazai(params) {  
       console.log(params)  //这个params哪来的呢？你打印一下就知道结果了
       const files = params.file  //这个是文件的信息
      let user = JSON.parse(localStorage.getItem("user")); //根据需求而定我存的缓存
      let Id=user.Id //我所需要的参数！
      let password =this.newpasswords  //我所需要的参数！
      var formData = new FormData(); //因为没有在标签上，所以需要自己要自己手动拿到文件
      formData.append("file", files);  //  formData.append(键, 值); 带引号的"file"不需要在哪里再去定义
      this.$axios.post(`/api/user/importUser/${Id}/${password}`,formData).then(res => {
           console.log(res)  //里面的内容根据自己需求而定！
     
        })
      
     },

这个方法值得注意的事，如果用到了:http-request你会遇到一个小坑，那就是监听的 成功 ，进行中，失败的钩子函数也会被覆盖掉。所以，想要处理状态也就只能，只能在返回状态那去进行相应的需求！

二、导出功能

  daoru_dianchu() {
        let users =({
          userId:this.daochu_listuser_list
        })
       this.$axios.post(`/api/user/exportUser`,users,{responseType: 'blob'}).then(res => {
         console.log(res)  
          const blob = res.data  //首先要看返回值
		  const downloadElement = document.createElement('a')
	      const href = window.URL.createObjectURL(blob)
		  downloadElement.href = href
		  downloadElement.download = 'excel.xls'
	      document.body.appendChild(downloadElement)
		  downloadElement.click()
		  document.body.removeChild(downloadElement) // 下载完成移除元素
		  window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
     },

导出其实就是模仿的a标签~具体里面啥意思 这个就自行百度吧！拿过来用就行！
OK~就这些！如果哪里不好可以下方提出来。主要一般搜出来的东西大部分都太不上心了，跟没说一个样。