開發Element-UI的Table 元件列顯示隱藏，列表資料勾選批次匯出/全量匯出，顯示匯出進度並可取消匯出

李昂唐發表於2024-04-09
UI元件

# 用法

　　　　  <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上方相鄰位置，無需修改樣式，配置引數即可使用

相關文章