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

# 用法

      <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上方相邻位置,无需修改样式,配置参数即可使用

 

posted @ 2024-04-09 11:47  李昂唐  阅读(72)  评论(0)    收藏  举报