As a newcomer to frontend development, I am currently working on integrating Element-plus Virtualized Table with actual data. Here is the basic structure of the example:
const generateColumns = (length = 10, prefix = 'column-', props?: any) => {
return Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
}
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) => {
return Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
}
const columns = generateColumns(10)
const data = generateData(columns, 1000)
I have some real data similar to this:
const fetchedData = [
{ address: "...", protocol: ["..."], email: ["..."] },
{ address: "...", protocol: ["...", "..."], email: ["..."] },
{ address: "...", protocol: ["..."], email: ["...", "..."] },
];
The main question at hand is how to adapt my actual data into the functions mentioned in the example code?