【Vue-Element-Admin】导出el-table全部数据

这篇具有很好参考价值的文章主要介绍了【Vue-Element-Admin】导出el-table全部数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

因为el-table实现了分页查询,所以想要实现el-table需要重新编写一个查询全部数据的方法

查询全部数据

listQuery:文章来源地址https://www.toymoban.com/news/detail-697865.html

export default{
    return{
        listQuery:{
            //page:1,
            //limit:20,
            //如果想兼容按条件导出,可以定义查询条件
            age:undefined,
            sex:undefined
        },
    }
}
getAllList(){
    return findAll(this.listQuery).then(response=>{
        return response.data['items']
    }).catch(error=>{console.log(error)})
}

导出

async handleDownload(){
   this.downloadLoading=true
   import('@/vendr/Export2Excel').then(excel=>{
       const tHeader=[]
       const filterVal=[]
       this.getAllList().then(resp=>{
           const data=this.formatJson(filterVal,resp)
           excel.export_json_to_excel({
               header: tHeader,
               data,
               filename: '测试数据'+parseTime(new Date(),'{y}{m}{d}{h}{i}{s}')
           })
       })
   }).catch(error=>{console.log(error)})
   this.downloadLoading=false
},
formatJson(filterVal,all_list){
    //给表头添加序号
    all_list.forEach((item,index)=>{
        item.index=index+1
    })
    return all_list.map(v=>filterVal.map(j=>{
        if (j==='update_time'){
            return parseTime(v[j])
        }else{
            return v[j]
        }
    }))
}

到了这里,关于【Vue-Element-Admin】导出el-table全部数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(46)
  • vue使用element-ui,el-table不显示

    例如:新增了一个表格,按官网代码贴过来的,结果一直不显示 代码如下一模一样,其他数据正常显示,就表格不显示 其实版本库不一致导致的,贼坑,又不提示 先卸载element-ui安装一个低版本的element-ui就可以解决``

    2024年02月11日
    浏览(43)
  • vue(element ui )el-table树形表格展示及数据对齐

    注意点: el-table配置里 row-key 必须是唯一性 :tree-props=“{ children: ‘relatedPartyChild’ , hasChildren: ‘hasChildren’ }” children配置为后端返回的节点字段即可

    2024年02月16日
    浏览(33)
  • Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

    用vue+element ui开发管理系统时,使用el-table做表格,当表格列过多的时候,想要做成可选表头的,实现表格列的筛选显示,效果如下: 代码文件结构: 废话不多说,直接上代码: 第一步:新建名为 TableHeaderRender.vue 的文件 template   el-popover     placement=\\\"bottom\\\"     width=\\\"2

    2024年02月02日
    浏览(47)
  • Vue 中 Element UI 的 el-table 组件实现动态表头和内容

    在 Vue 中使用 Element UI 的 el-table 组件时,为了实现动态表头(包括第一层表头及其下的嵌套表头或子表头)。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组,每个表头单元可能包含自身的列信息以及它的子表头和

    2024年01月20日
    浏览(42)
  • Vue - Element el-table 表头、行、列合并,底部或顶部显示汇总行

    GitHub Demo 地址 在线预览 使用 el-table 的 span-method 方法合并行和列 使用 el-table 的 header-cell-style 方法合并表头 使用 el-table 的 cell-class-name 方法配合css样式隐藏Checkbox 使用 el-table 的 show-summary 、 summary-method 方法配合css样式设置汇总行和汇总行样式

    2024年02月14日
    浏览(32)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(34)
  • vue element ui el-table单元格里面显示多张图片点击并放大

    效果图: 一个单元格里面显示三张图片,并且点击图片可以放大。 1.将图片v-for渲染出来,具体上代码 注:el-popover的属性   2.单元格里能够展示多张图片,需要在请求的接口里面做处理 以上两步,就可以实现上面的功能。

    2024年02月07日
    浏览(31)
  • vue使用Element UI时,el-table表格整行操作单选

    需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作 注意使用的方法. 需求由复选改为单选后, 左上角全选框要进行隐藏 ,复选框也变成单选框,这里是通过css样式进行调整的 勾选复选框的select和整行操作的row-click可以共用同一个方法,

    2024年02月14日
    浏览(30)
  • 【Vue/element】 el-table实现表格动态新增/插入/删除 表格行,可编辑单元格

    效果如下: 点击“新增一行”可以在表格最后新增一行,单元格内容可编辑 点击绿色+按钮,可在指定行的后面插入一行 点击红色-按钮,可以删除指定行 原理:表格 el-table 是通过动态循环 tableData 生成,只要对 tableData 数组进行增加删除元素,就可以达到效果 这里用了ele

    2024年02月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包