element-ui表格从接口获取数据渲染内容element-ui表格从接口获取数据渲染内容

Element UI 的表格组件（el-table）可以方便地从服务器接口获取数据并动态渲染到页面上。以下是基本步骤：

1. **引入依赖**：首先，在项目中安装 Element UI 并导入 `Table` 组件和相关库，如 Axios 或者 Vue的内置 `axios` 插件用于发起 HTTP 请求。

import { Table, axios } from 'element-ui';

2. **设置数据源**：在你的 Vue 组件中，创建一个空数组作为数据源，然后在请求接口成功后填充数据。

data() {
  return {
    tableData: [], // 初始化为空数组
    loading: true, // 加载状态标志
  };
},

3. **请求接口**：在 `created()`、`mounted()` 或者 `beforeMount()` 生命周期钩子中，使用 Axios 发送 GET 请求。

methods: {
  fetchData() {
    axios.get('your-api-url')
      .then(response => {
        this.tableData = response.data; // 将响应数据赋值给 tableData
        this.loading = false; // 设置加载状态为完成
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  },
}

4. **初始化表格**：在模板中，绑定数据源 `tableData` 到 `el-table` 组件，并添加列定义。

<template>
  <div>
    <el-loading v-model="loading" text="Loading..." :mask="true"></el-loading>
    <el-table :data="tableData">
      <!-- 根据实际数据结构，添加列 -->
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="age" label="Age" />
      <!-- 更多列... -->
    </el-table>
  </div>
</template>

5. **触发请求**：通常会在组件挂载后自动触发一次请求，或者提供一个按钮让用户手动刷新数据。

现在，当接口返回数据后，表格会自动更新显示最新数据。