45 lines
825 B
Vue
45 lines
825 B
Vue
<template>
|
|
<n-data-table
|
|
:columns="columns"
|
|
:data="data"
|
|
:max-height="250"
|
|
virtual-scroll
|
|
virtual-scroll-x
|
|
:scroll-x="scrollX"
|
|
:min-row-height="48"
|
|
:height-for-row="heightForRow"
|
|
virtual-scroll-header
|
|
:header-height="48"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { NDataTable } from "naive-ui";
|
|
|
|
|
|
const columns = [];
|
|
|
|
let scrollX = 0;
|
|
|
|
for (let i = 0; i < 1e3; ++i) {
|
|
scrollX += 100;
|
|
columns.push({
|
|
title: `Col ${i}`,
|
|
width: 100,
|
|
key: i,
|
|
fixed: i <= 1 ? "" : i > 997 ? "" : void 0,
|
|
render(_, rowIndex) {
|
|
return `${i}-${rowIndex}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
const data = Array.from({ length: 1e3 }).map((_, index) => ({
|
|
key: index,
|
|
name: `Edward King ${index}`,
|
|
age: 32,
|
|
address: `London, Park Lane no. ${index}`
|
|
}));
|
|
|
|
const heightForRow = () => 48;
|
|
</script> |