Vue项目导出Excel组件

Download组件使用方法

如果你开发的功能模块中有需要用到选中表格中的一个或多个数据进行下载这个功能，可以直接通过
import Download from '@/components/common/Download.vue'引入<Download />组件使用

Download组件目前只支持以下参数，后期根据功能需求再添加

Download参数说明

参数	说明	类型	可选值	默认值
action	必需,下载请求地址	String	-	-
method	表单请求方法	String	“POST/GET”	POST
params-filed	请求参数字段名	String	-	-
params-val	请求参数值	Any	-	-

<template>
  <form 
    :action="action"
    :method="method"
    ref="submit"
    class="download-form">
    <input v-model="paramsVal" :name="paramsFiled" readonly />
    <div class="submit-btn">
      <i class="el-icon-download"></i>
      <input type="submit" :value="title">
    </div>
  </form>
</template>

<script> 
export default {
  props:{
    action:{
      type: String,
      required: true
    },
    method:{
      type: String,
      default: "POST"
    },
    paramsFiled:{
      type: String,
    },
    paramsVal:{
      type: String
    },
    title:{
      type: String,
      default: '下载'
    }
  },
  methods:{
    // 选择下载事件处理
    handleSelectedDownload(){
      const form=this.$refs.submit
      form.addEventListener('submit',(e)=>{
        if(!this.paramsVal){
          e.preventDefault()
          this.$message.warning('请至少勾选一项数据')
        }
      })
    },
  },
  mounted(){
    this.handleSelectedDownload()
  }
}
</script>

<style lang="less" scoped>
.download-form{
  >input{
    display: none;
  }
  .submit-btn{
    margin-top: 0;
    width: 100px;
    text-align: center;
    border-radius: 3px;
    background-color: #67c23a;
    color: #fff;
    height: 30px;
    line-height: 30px;
    i{
      font-size: 14px;
    }
    input{
      outline: none;
      border: none;
      background-color: #67c23a;
      color: #fff;
    }
  }
}
</style>