首页 > 其他分享 >开发Element-UI的Table 组件列显示隐藏,列表数据勾选批量导出/全量导出,显示导出进度并可取消导出

开发Element-UI的Table 组件列显示隐藏,列表数据勾选批量导出/全量导出,显示导出进度并可取消导出

时间:2024-04-09 11:56:57浏览次数:21  
标签:el 批量 导出 列表 勾选 全量 Element ref

# 用法

      <TabColDisplay
          :total="total"
          api-url="hgp/order"
          api-name="hgpLocalList"
          :s-param="listQuery"
          :select-ids="selIds"
          title="快速开单列表"
          :table-data="colData"
          :export-data="list"
          :date-formate="formateList"
          :show-col="false"
          :export-all="true"
          :upload-able="false"
          :ref-do="()=>$refs.mainTable.doLayout()"
        />
        <el-table
          v-if="tableHeight"
          ref="mainTable"
          v-loading="listLoading"
          :data="list"
          :height="tableHeight"
          show-summary
          :summary-method="getSummaries"
          :cell-style="tableRowStyle"
          :header-cell-style="tableHeaderStyle"
          @selection-change="mainTableChange"
        >

 关键配置

colData:导出的对应列字段

 全量导出相关参数:total,api-xx,sParam

批量导出:selectIds,exportData(列表数据

date-formate:传入需要进行格式化的日期字段

ref-do:重排列表避免闪烁,ref字段对应el-table ref

 

效果:引入到项目任意一个el-table上方相邻位置,无需修改样式,配置参数即可使用

 

标签:el,批量,导出,列表,勾选,全量,Element,ref
From: https://www.cnblogs.com/liangtang/p/18123639

相关文章

  • 剪映PC电脑版开心版5.5.0免VIP导出补丁下载_替换一次即可长期使用
    剪映5.5.0免VIP导出补丁来了,可以使用VIP特效,文字转语音声效,滤镜,等全部需要VIP的素材,都可以直接导出,不需要VIP并且是需要替换一次,每次启动软件都是可以直接导出的,只要不重新安装剪映,都是可以使用的补丁对应版本:5.5.0(不是5.5.0版本会出现闪退)补丁安全无毒无广告使用教程:打开......
  • 05_ElementPlus安装过程
    官网:一个Vue3UI框架|ElementPlus(element-plus.org)1.安装:运行cmd,转到我的项目的目录下\vuedemo,执行命令:npminstallelement-plus--save2.整体导入Element-plus,修改mian.js文件import{createApp}from'vue'//导入Pinia的createPinia方法,用于创建Pinia实例......
  • JSX.Element 和 React.ElementType的区别是什么?
    在React和TypeScript中,JSX.Element和React.ElementType代表了两种不同的概念:JSX.Element:JSX.Element是一个类型,表示由JSX编译后生成的实际React元素对象。当你在React应用中使用JSX编写组件时,每一个JSX表达式都会编译为一个JSX.Element对象。例如:constMyComponent:React.......
  • 数据库导出数据至本地
    importjsonimportcalendarimportrefrombinimport*ismonthwrite=False#是否按月写入,数据量大时可开启start_time="2024-02-27"#开始时间end_time="2024-03-26"#结束时间wirte_path=r"C:\Users\isoftstone\Desktop\导出.xlsx"#写入的文件路径read_path=r"C:......
  • Orcale数据库导入导出备份
    orcale数据库的导入导出及备份全库导入导出导出exp用户名/密码file=想要导出之后文件名 full=y用户名必须拥有dba权限,可以不指定文件名导入imp用户名/密码full=yfile=导出之后的文件名.dmp如果不指定文件名则自动识别默认名按用户导入导出导出exp用户名/......
  • 导出多个文件到一个Excel中的不同sheets
    @ApiOperation(value="导出多个文件到一个Excel中的不同sheets",produces="application/octet-stream")@PostMapping("/exportMultipleExcel")publicvoidexportMultipleExcel(@RequestBodyDataCountVOdataCountVO,HttpServletResponseresponse)t......
  • avue表格 超过个数不能勾选
    <avue-crudrow-key="id"reserve-selection@selection-change="selectionChange"></avue-crud>data(){return{maxSelectionCount:10,//设定最大勾选条数}},//选中的数据list是全部的数据,数组,//拿取数据的唯一id并赋值,批量删除使用selec......
  • STK入门(星座建立、导出卫星位置csv、地图源图片位置)
    1.建立星座1.1初始化场景打开STK,依次点击continue-createanewscenario记住场景命名和保存位置默认的仿真时间是一天,暂不需要修改点击ok耐心等待较长时间1.2建立种子卫星场景建立好以后自动弹出Insert 选择Satellite-Orbitwizard主要定义参数为:轨道倾角Incl......
  • vue项目使用element ui
    目录1、创建一个vue项目2、找到element官网,点击指南,找到安装栏3、找到使用包管理器,复制命令 4、在main.js中引入element5、使用elementui6、找到App.vue,导入Button.vue文件,保存启动项目1、创建一个vue项目2、找到element官网,点击指南,找到安装栏一个Vue3UI框......
  • Solidworks导出urdf,在ros2中使用gazebo仿真教程
    1.前言本人目前初学ros2,最近在实践ros2中的gazebo仿真,入门跟着鱼香ros老师和古月居老师来学习相关的知识,在gazebo仿真环节,发现教程里基本都是采用自写urdf来生成几何图像(圆柱、立方体)来组成简单的机器人,因此在后期仿真的真实性带来了一定的局限性,因此我最近在研究如何在ros2中......