使用 vxe-table 組件實現滾動渲染,流暢的渲染海量數據
<elx-table
ref="elxTable"
border
:config="{render: 'scroll'}"
style="width: 100%">
<elx-table-column type="selection" width="55"></elx-table-column>
<elx-table-column type="index" width="100" fixed="left"></elx-table-column>
<elx-table-column prop="name" label="名字" min-width="100" show-overflow-tooltip>
<template v-slot:header="scope">
<i class="el-icon-question"></i>名字
</template>
</elx-table-column>
<elx-table-column prop="sex" label="性別" min-width="140" :formatter="formatterSex"></elx-table-column>
<elx-table-column prop="age" label="年齡" min-width="140"></elx-table-column>
<elx-table-column prop="region" label="地區" width="200" :formatter="formatterRegion"></elx-table-column>
<elx-table-column prop="date" width="220" label="日期" :formatter="formatterDate"></elx-table-column>
<elx-table-column prop="rate" width="220" label="評分">
<template v-slot="scope">
<el-rate
v-model="scope.row.rate"
disabled
show-score
text-color="#ff9900">
</el-rate>
</template>
</elx-table-column>
<elx-table-column prop="updateTime" label="更新時間" width="200" :formatter="formatterDate"></elx-table-column>
<elx-table-column prop="createTime" label="創建時間" width="200" :formatter="formatterDate"></elx-table-column>
</elx-table>