javascript Vue 3元素加虚拟化表格填充真实的数据

dpiehjr4 于 2023-01-16 发布在 Java

关注(0)|答案(1)|浏览(263)

我是一个前台的新手，我正在尝试用真实的数据实现元素加虚拟表，基本的示例结构是：

const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
    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-'
) =>
    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)

我有真实的数据

const fetchedData = [
    { adress: "...", protocol: ["..."], email: ["..."] },
    { adress: "...", protocol: ["...", "..."], email: ["..."] },
    { adress: "...", protocol: ["..."], email: ["...", "..."] },
];

问题是如何实现我的真实的数据到函数的例子？

JavaScript

来源：https://stackoverflow.com/questions/73798197/vue-3-element-plus-virtualized-table-fill-with-real-data

1条答案

按热度按时间

kognpnkq1#

<script setup lang="ts">

let employees = await employeeStore.getEmployees(10,0,'updated_at~desc');

const headers = ['name', 'comapny name', 'registered at', 'updated at']

const generateColumns = (length = employees.length, prefix = 'column-', props?: 
any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `${headers[columnIndex]}`, // change here
width: 250,
}))

const generateData = (
columns: ReturnType<typeof generateColumns>,
length = employees.length,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {

return columns.reduce(
  (rowData, column, columnIndex) => {
    // rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex} 

                      // change here //

    rowData['column-0'] = `${employees[rowIndex].first_name}`
    rowData['column-1'] = `${employees[rowIndex].email}`
    rowData['column-2'] = `${employees[rowIndex].created_at}`
    rowData['column-3'] = `${employees[rowIndex].updated_at}`
    return rowData
  },
  {
    id: `${prefix}${rowIndex}`,
    parentId: null,
  }
)
})

const columns = generateColumns()
const data = generateData(columns)
</script>

// inside your template code

<template>

 <el-table-v2
    :columns="columns"
    :data="data"
    :width="1000"
    :height="400"
    fixed       
    />

</template>

赞(0）回复(0）举报 2023-01-16

我来回答

javascript Vue 3元素加虚拟化表格填充真实的数据

1条答案

相关问题

热门标签

最新问答