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

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>