Vue项目导出Excel组件

最新推荐文章于 2023-08-28 14:55:42 发布

原创最新推荐文章于 2023-08-28 14:55:42 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了一个用于下载表格中选中数据的Download组件的使用方法。该组件支持自定义下载请求地址、请求方法、请求参数字段名及值等功能，适用于前端开发场景。

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>