需求:
Table V1中,当一屏里超过 1000 条数据记录时,就会出现卡顿等性能问题,体验不是很好。
通过 Table V2 的虚拟化表格组件,超大数据渲染将的到优化
展示:
代码: (可直接复制使用)
<template>
<el-table-v2
:columns="columnsData"
:data="stateaData"
:expand-column-key="columnsData[0].key"
:width="700"
:height="500"
>
<template #row='props'>
//这里是改造了官网提供的方法
<div v-if="(props.rowData.detail)">
内容区域
</div>
<component v-else v-for='(cell ,index) in props.cells' :key='index' :is="cell"/>
</template>
</el-table-v2>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup(){
//模拟的数据
const stateaData =
[
//第一条数据
{
id: 1,
userData:{
value:1,
workiceceName: "gj",
workiceceValue: "内容2",
},
children: [
{
id: '1',
detail: '1232' //决定你是否需要展开区域,
}
]
},
//第二条数据
{
id: 2,
userData:{
value:2,
workiceceName: "gj",
workiceceValue: "内容3",
},
children: [
{
id: '2',
detail: '123'
}
]}
]
const columnsData =
[
{
key: `userData.value`,
dataKey: `userData.value`,
title: `id标题`,
width: 100,
},
{
key: `userData.workiceceName`,
dataKey: `userData.workiceceName`,
title: `name标题`,
width: 100,
}
,
{
key: `userData.workiceceValue`,
dataKey: `userData.workiceceValue`,
title: `内容标题`,
width: 100,
}
]
return {
stateaData,
columnsData
}
}
})
</script>
官网:
https://element-plus.gitee.io/zh-CN/component/table-v2.html#%E5%8F%AF%E5%B1%95%E5%BC%80%E7%9A%84%E9%99%84%E5%8A%A0%E4%BF%A1%E6%81%AF