Vue导出功能组件封装

最新推荐文章于 2024-05-16 11:13:36 发布

黄不逗

最新推荐文章于 2024-05-16 11:13:36 发布

阅读量394

点赞数

分类专栏：常见的业务需求

本文链接：https://blog.csdn.net/weixin_45172119/article/details/125138090

版权

vue.js

常见的业务需求专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue导出功能组件封装

效果：

在这里插入图片描述

使用：

使用方法1

<BasicExportModal v-bind="exportModalSetting" @register="registerExportModal" @success="handleAction({type: '导出-return'})" ></BasicExportModal>

let exportModalSetting = reactive({
            url: '/school/school/export' ,
            columns: exportColumns,
            // 需要通过赋值来改变响应，ids:unref(checkedKeys)无效
            otherListParams:{
                ids: []
            }
        })

使用方法2：

不通过modal弹窗，直接导出下载，通过hooks

import { useExport } from '/@/components/Custom/BasicExportModal/src/hooks/useExport'

  const {ExportXls, downFile} = useExport()
  
  case '导出':
          let url = '/base/positionNature/export'
          let resData = await downFile(url,{},'get')
          ExportXls('项目方向列表',resData)
          break;

可选配置：

export interface basicPropsType {
    title?: string,
    subtitle?: string,
    subTips?: string,
    columns?: columnType[],
    api?: Function,
    otherListParams?: any,
    fileName?:string,
    datasource?: any[],
    url?: string,
    methods: string,
    openType: string,
    openFileNameAddTime?: boolean,
    modalProps?: Object,
    autoDownload?: boolean,
    beforeSubmit?:Function,
    afterSubmit?:Function,
    slot?: string
}