后端数据渲染表格：Vue 3 和 Element Plus 的强大组合

2024-03-20 16:47:42

使用 Vue 3 和 Element Plus 将后端数据渲染为表格

引言

在现代前端开发中，我们经常需要处理从后端获取的数据并将其以表格的形式展示给用户。Vue 3 和 Element Plus 框架提供了强大的功能，使我们能够轻松实现这一需求。

数据处理

第一步是处理从后端获取的数据。为了方便展示，我们将关注数据的 name、value 和 desc 三个字段。我们可以使用 map 方法将原始数据转换为所需格式：

const formattedData = data.map(item => ({
  name: item.name,
  value: item.value,
  desc: item.desc,
}));

表格渲染

接下来，我们将使用 Element Plus 的 <el-table> 组件来创建表格：

<el-table :data="formattedData">
  <el-table-column prop="name" label="名称" />
  <el-table-column prop="value" label="值" />
  <el-table-column prop="desc" label="" />
</el-table>

在 <el-table> 中，我们将 :data 属性设置为处理后的数据 formattedData。然后，我们使用 <el-table-column> 组件定义每一列。prop 属性指定了每一列对应的字段名，而 label 属性指定了列标题。

示例代码

以下是一个完整的示例代码：

<template>
  <el-table :data="formattedData">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="value" label="值" />
    <el-table-column prop="desc" label="" />
  </el-table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const data = ref([
      { name: '姓名', value: '张三', desc: '测试数据' },
      { name: '年龄', value: 20, desc: '测试数据' },
      { name: '性别', value: '男', desc: '测试数据' },
    ]);

    const formattedData = data.value.map(item => ({
      name: item.name,
      value: item.value,
      desc: item.desc,
    }));

    return {
      formattedData,
    };
  },
};
</script>