下载表格组件是根据我自己的业务需求来封装的
使用的是vue中 xlsx 的插件，需要安装新的依赖及配置
仅供参考 不保证和你百分百匹配
安装依赖
npm install -S file-saver xlsx
npm install -D script-loader
下载所需js链接: https://pan.baidu.com/s/170okRAPiWxQrBvlDEpp7SQ 提取码: gsf5
百度网盘真特喵的是个好东西啊
因为我的子组件引用了该js 如果你不想自己再修改位置，可以跟我一样，
在src中，建立excel文件，将下载的js扔进去
组件调用
直接说调用部分，文章最后会把组件的代码贴出来
父组件引入子组件
import exportTable from '@/components/common/exportTable';
......
components:{
exportTable
}
父组件调用子组件 <export-table ref="childRefName" :export-prepare.sync="exportPrepare" :list-query.sync="listQuery"></export-table>
参数详解
exportPrepare:{ percentage: 0, //导出数据完成的百分比 name:'消耗记录',//导出表格名称 pageType:'pagination',//导出数据获取方式：offset为偏移量、pagination为分页 默认值为pagination limit:200,//单页数据数量 最大值为200 超过200 按200读取（自定义）或 perPage: 200（根据接口参数决定使用limit/perPage，暂时仅支持limit/perPage） total:0,//导出数据总数 json_fields: { // excel 表头（具体名称根据实际情况而定） '耗材编号': 'String', '耗材品牌': 'String', '耗材类型': 'String', '耗材名称': 'String', '规格型号': 'String', '耗材属性': 'String', '耗材价格': 'Number', '消耗类型': 'String', '消耗地点': 'String', '出库仓': 'String', '目标设备': 'String', '操作人': 'String', '操作时间': 'String' }, json_relationship:{ //导出数据对应的字段名称（具体字段根据实际情况而定 key值与表头保持一致） '耗材编号': 'supplies_number', '耗材品牌': 'brand_name', '耗材类型': 'type', '耗材名称': 'supplies_name', '规格型号': 'spec_name', '耗材属性': 'spec_attribute', '耗材价格': 'cost', '消耗类型': 'supplies_type', '消耗地点': 'out_address', '出库仓': 'warehouse_name', '目标设备': 'device_id', '操作人': 'staff_name', '操作时间': 'updated_at' }, param:{},//获取导引数据接口所需的参数 dataList:[] }