vue最強table vxe-table 虛擬滾動列表前端導(dǎo)出問題分析

更新時間：2023年10月10日 15:21:06 作者：屋昂仼

最近遇到個問題,后臺一次性返回2萬條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強table vxe-table 虛擬滾動列表前端導(dǎo)出問題,感興趣的朋友一起看看吧

第一，寫下table模板

<vxe-table
              border
          show-overflow
          show-header-overflow
          ref="tableRef"
          height="600"
          :row-config="{isCurrent: true, isHover: true, useKey: true}"
          :column-config="{resizable: true}"
          :export-config="{}"
          :loading="demo1.loading"
          :sort-config="{trigger: 'cell'}"
          :checkbox-config="{checkField: 'checked'}">
          <vxe-column type="seq" width="100" fixed="left"></vxe-column>
          <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
          <vxe-column field="attr0" title="Attr0" width="200" sortable></vxe-column>
          <vxe-column field="attr1" title="Attr1" width="200"></vxe-column>
          <vxe-column field="attr2" title="Attr2" width="200"></vxe-column>
          <vxe-column field="attr3" title="Attr3" width="200"></vxe-column>
          <vxe-column field="attr4" title="Attr4" width="200"></vxe-column>
          <vxe-column field="attr5" title="Attr5" width="200"></vxe-column>
          <vxe-column field="attr6" title="Attr6" width="300" sortable></vxe-column>
          <vxe-column field="attr7" title="Attr7" width="200" sortable></vxe-column>
          <vxe-column field="attr8" title="Attr8" width="200"></vxe-column>
          <vxe-column field="attr9" title="Attr9" width="200"></vxe-column>
          <vxe-column field="attr10" title="Attr10" width="200"></vxe-column>
          <vxe-column field="attr11" title="Attr11" width="200"></vxe-column>
          <vxe-column field="attr12" title="Attr12" width="200"></vxe-column>
          <vxe-column field="attr13" title="Attr14" width="200"></vxe-column>
          <vxe-column field="attr14" title="Attr14" width="200"></vxe-column>
          <vxe-column field="attr15" title="Attr15" width="200"></vxe-column>
          <vxe-column field="attr16" title="Attr16" width="200" fixed="right"></vxe-column>
        </vxe-table>

這樣子，看起來和element-table幾乎沒有區(qū)別。只是注意一些常用字段，改了下名字。

第二，寫下數(shù)據(jù)請求方法

但是你發(fā)現(xiàn)這里沒有綁定數(shù)據(jù)，也就是 :data="tableData"。

仔細想想朋友，10萬+數(shù)據(jù)你交給vue雙向綁定，你是要累死誰啊？不合適啊，這么干。所以，官方提供了一個方法：reloadData。

// 第一步： 接口請求后臺數(shù)據(jù)（可能是10萬條數(shù)據(jù)）
new Promise(resolve => {
    // 注意  這里引入接口方法
    getList().then(res => {
        // 在這里將請求的列表數(shù)據(jù) 返回出promise
        resolve(res ? res : [])
    })
}).then(list => {
    /* 
    * 在這里開始給vxe-table數(shù)據(jù)了
    */
    // 1. 首先通過 $refs(vue內(nèi)部方法，或者原生獲取vxe-table這個dom)
    const VXE_TABLE = this.$refs.tableRef;
    // 2. 通過這個dom下掛載的方法 reloadData 方法 取數(shù)據(jù)
    VXE_TABLE..reloadData(list).then(() => {
        // 如果你有l(wèi)oading的話  可以在這里關(guān)閉
    })    
    // 至此， 數(shù)據(jù)接收完畢。
}).catch(err => {
    console.log('請求數(shù)據(jù)報錯了 -- ',err);
})

第三，自定義（翻譯）字段

總有一些需要自己翻譯的字段。實際上和element-table很類似。

<template #default="{ row }">
    vxe-button @click="showDetailEvent(row)">彈框{{ row.name }}</vxe-button>
</template>

還是插槽。更多插槽，請移步官方文檔：vxe-table v4

第四，高亮某一行，跳轉(zhuǎn)到某一行

<vxe-table
      border
      ref="tableRef"
      height="300"
      :row-config="{isCurrent: true, isHover: true}"
      :data="tableData"
      @current-change="currentChangeEvent">
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
      <vxe-column field="address" title="Address" show-overflow></vxe-column>
    </vxe-table>

配置 row-config.

然后寫一個方法 setCurrentRow.

// 老規(guī)矩 還是獲取table這個dom
// talbeData[0] 設(shè)置第一行數(shù)據(jù)高亮
this.$refs.tableRef.setCurrentRow(talbeData[0])

等等？剛才說，這個data沒有綁定。那么我們應(yīng)該去哪里拿到這個數(shù)據(jù)呢？

// 通過 reloadData方法獲取數(shù)據(jù)的 通過下邊方式 拿到所有的table數(shù)據(jù)
const TABLE_DATA = this.$refs.tableRef.allFullData;
// 然后就可以愉快的設(shè)置某一行數(shù)據(jù)了 index 就是你需要哪一行數(shù)據(jù)高亮
this.$refs.tableRef.setCurrentRow(TABLE_DATA[index])
// 想要一鍵刪除所有高亮  那么就直接調(diào)用 clearCurrentRow
this.$refs.tableRef.clearCurrentRow
// 如果需要跳轉(zhuǎn)到某一行 比如 跳轉(zhuǎn)定位到 第 100 行
// 首先我們要知道每一行的高度， 比如每一行高度是 40 px
// 那么需要dom滾動的距離就是  index * 40
// 所以 就是如下
document.querySelector('.body--wrapper').scrollTop = index * 40;
// 至此，跳轉(zhuǎn)成功

第五，導(dǎo)出數(shù)據(jù)

本來這個導(dǎo)出數(shù)據(jù)這個事，后臺返回個流，前端處理下就完事了。

但是這個table組件厲害了?？梢灾苯油ㄟ^內(nèi)置方法，直接導(dǎo)出數(shù)據(jù)。

內(nèi)置的格式有 txt，html，csv等等。

說實話，也夠用了。

// 例如 導(dǎo)出csv文件 使用內(nèi)置 $table.exportData({ type: 'csv' }) 方法
this.$refs.tableRef.exportData({type: 'csv'})

但是，需求要求我們導(dǎo)出pdf（wocao）。

對不起，失態(tài)了。

那么，我們也可以利用 vxe-table 的插件實現(xiàn)該功能。

文檔：vxe-table v4 集成第三方

// 首先肯定是要安裝這個插件了
npm install xe-utils vxe-table@next vxe-table-plugin-export-pdf@next jspdf
// 沒錯 基于 jspdf做的插件 
// 然后 入口文件引入
import VXETable from 'vxe-table'
import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
// ...
VXETable.use(VXETablePluginExportPDF)
// 然后配置字體  
// 需要注意的是  中文尤其要配字體  不然導(dǎo)出就是亂碼
VXETablePluginExportPDF.setup({
  // Set default font
  fontName: 'SourceHanSans-Normal',
  // Font maps
  fonts: [
    {
      // Font name
      fontName: 'SourceHanSans-Normal',
      // Font library url
      fontUrl: 'https://cdn.jsdelivr.net/npm/vxe-table-plugin-export-pdf/fonts/source-han-sans-normal.js'
    }
  ]
})
// 以上配置完畢之后  在具體的組件業(yè)務(wù)中 就可以使用導(dǎo)出pdf功能
// 導(dǎo)出功能如下
this.$refs.tableRef.exportData({
    filename: 'Order details',
    sheetName: 'Order details ( X02514645652 )',
    type: 'pdf'
})

與此同時，你可以導(dǎo)出 xlsx格式的。

具體不再細說。請參考官方文檔：vxe-table v4 集成第三方

至此，導(dǎo)出部分也講完了。

但是，導(dǎo)出功能最后交給后臺，畢竟這前端不擅長干這事。

結(jié)束了。

到此這篇關(guān)于vue最強table vxe-table 虛擬滾動列表前端導(dǎo)出的文章就介紹到這了,更多相關(guān)vue table vxe-table 虛擬滾動列表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: