vue3 el-table 使用接口获取的表格数据

最新推荐文章于 2025-07-12 22:37:15 发布

原创最新推荐文章于 2025-07-12 22:37:15 发布 · 9.6k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue

vue3 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js项目中利用Element UI库动态加载表格数据。通过定义一个`tableData`的ref变量，并在获取后端接口数据后赋值给它，实现了表格的数据更新。示例代码展示了如何设置表格列和行类名，以及如何处理从后端获取的User对象列表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table的官方文档中，使用例子只有常量表格数据：
在这里插入图片描述

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
interface User {
  date: string
  name: string
  address: string
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

如果要使用访问后端接口获取的表格数据，可以这样写：

interface User {
  date: string
  name: string
  address: string
}
const tableData = ref<User[]>([])

......
tableData.value = res.data.List;//获取到的表格数据，注意返回的List应该是一个User对象列表，User对象属性与interface User中的一致

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>