Recently encountered a problem. The background returns 20,000 list data at one time.
And the requirements require that all data must be displayed in full, and false pagination cannot be done (cannot be optimized).
The direct source of these data is the CS client.
When they do CS client, they load tens of thousands of pieces of data at one time without paging (saying that this is the customer's request).
I tried a CS client, and tens of thousands of data were put there, it was really stuck.
Their CS developers insisted that it is not stuck at all, and it is extremely smooth.
The real Nima is covering his ears and stealing the bell here, isn't he? Don't bother talking nonsense to them.
The bottom line : never reason with a fool.
No nonsense, let's get started.
Since it is necessary to display tens of thousands of pieces of data at one time, the element-table is basically useless, after all, it cannot be a fake page.
Finally, in the vast crowd, I met vxe-table.
Official address: https://vxetable.cn/#/table/start/install
Supports smooth scrolling of up to 10w+ data. Really great.
So how to achieve such a powerful virtual scroll?
The official also said nothing.
That's right, lazy loading. The interface only loads data within the visible area of the window, and continues to load the next wave of data as the mouse scrolls.
how to use?
First, write down the table template
<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>In this way, it looks almost the same as element-table. Just pay attention to some commonly used fields and change the name.
Second, write down the data request method
But you find that there is no bound data here, that is: data="tableData".
Think carefully about my friends, if you hand over 100,000+ data to vue for two-way binding, who are you going to exhaust? It's not appropriate to do this. Therefore, the official provides a method: reloadData.
// 第一步： 接口请求后台数据（可能是10万条数据）
new Promise(resolve => {
// 注意 这里引入接口方法
getList().then(res => {
// 在这里将请求的列表数据 返回出promise
resolve(res ? res : [])
})
}).then(list => {
/*
* 在这里开始给vxe-table数据了
*/
// 1. 首先通过 $refs(vue内部方法，或者原生获取vxe-table这个dom)
const VXE_TABLE = this.$refs.tableRef;
// 2. 通过这个dom下挂载的方法 reloadData 方法 取数据
VXE_TABLE..reloadData(list).then(() => {
// 如果你有loading的话 可以在这里关闭
})
// 至此， 数据接收完毕。
}).catch(err => {
console.log('请求数据报错了 -- ',err);
})Third, custom (translated) fields
There are always some fields that need to be translated by yourself. In fact, it is very similar to element-table.
<template #default="{ row }">
vxe-button @click="showDetailEvent(row)">弹框{
{ row.name }}</vxe-button>
</template>Still slots. For more slots, please move to the official document: vxe-table v4
Fourth, highlight a certain line and jump to a certain line
<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>Configure row-config.
Then write a method setCurrentRow.
// 老规矩 还是获取table这个dom
// talbeData[0] 设置第一行数据高亮
this.$refs.tableRef.setCurrentRow(talbeData[0])etc? As I said just now, this data is not bound. So where should we go to get this data?
// 通过 reloadData方法获取数据的 通过下边方式 拿到所有的table数据
const TABLE_DATA = this.$refs.tableRef.allFullData;
// 然后就可以愉快的设置某一行数据了 index 就是你需要哪一行数据高亮
this.$refs.tableRef.setCurrentRow(TABLE_DATA[index])
// 想要一键删除所有高亮 那么就直接调用 clearCurrentRow
this.$refs.tableRef.clearCurrentRow
// 如果需要跳转到某一行 比如 跳转定位到 第 100 行
// 首先我们要知道每一行的高度， 比如每一行高度是 40 px
// 那么需要dom滚动的距离就是 index * 40
// 所以 就是如下
document.querySelector('.body--wrapper').scrollTop = index * 40;
// 至此，跳转成功Fifth, export data
Originally, for the matter of exporting data, the background returned a stream, and the front end processed it.
But this table component is amazing. The data can be directly exported through the built-in method.
The built-in formats are txt, html, csv and so on.
To be honest, it is enough.
// 例如 导出csv文件 使用内置 $table.exportData({ type: 'csv' }) 方法
this.$refs.tableRef.exportData({type: 'csv'})However, requirements require us to export pdf (wocao).
Sorry for the gaffe.
Then, we can also use the vxe-table plug-in to achieve this function.
Documentation: vxe-table v4 third party integration
// 首先肯定是要安装这个插件了
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)
// 然后配置字体
// 需要注意的是 中文尤其要配字体 不然导出就是乱码
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'
}
]
})
// 以上配置完毕之后 在具体的组件业务中 就可以使用导出pdf功能
// 导出功能如下
this.$refs.tableRef.exportData({
filename: 'Order details',
sheetName: 'Order details ( X02514645652 )',
type: 'pdf'
})At the same time, you can export xlsx format.
I won't go into details. Please refer to the official document: vxe-table v4 integrates third parties
At this point, the export part is also finished.
However, the export function is finally handed over to the background, after all, the front end is not good at doing this.
it's over.