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

最新推荐文章于 2024-05-21 23:35:31 发布

TPUltra

最新推荐文章于 2024-05-21 23:35:31 发布

阅读量7.9k

点赞数 5

分类专栏： vue3 文章标签： vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/m0_46368082/article/details/126899107

版权

vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>