vue 导出功能

按钮：

<el-button type="primary" @click="exportBtn" class="ml20">导出</el-button>

方法：先调接口

      exportBtn(){
        if(this.tableData.length === 0 ){
          this.$message.error('暂无数据，无法导出')
        }else{
          let url = `/manage/business/activity/cdk/exchange/export`
          let pames = {
            page: this.pageNum,
            pageSize: this.pageSize,
            type: this.type
          }
          openForm(url, pames, "POST")
        }
      },

打开方法：

/**
 * @method 创建一个表单并提交
 *  @param {String} url 提交的地址
 * @param {Object} params 提交的数据
 * @param {String} method 提交的方式
 */
export const openForm = (url, params, method) => {
  const form = _createElement(({
    tag: 'form',
    attr: {
      id: 'newsForm',
      name: 'newsForm',
      target: '_blank',
      method: method,
      action: url
    }
  }))
  Object.keys(params).forEach(item=>{
    let input = document.createElement('input')
    input.type = 'text'
    input.name = item
    input.value = params[item]
    form.appendChild(input)
  })
  document.body.appendChild(form)
  form.submit()
  document.body.removeChild(form)
}

 

越努力越幸运