vue3实现这样的表格，中间的动态数据该如何获取，数据库的列名是表格的行

vue3中element-plus实现表格动态获取数据？

AI BotBETA

在Vue 3中使用Element Plus实现表格并动态获取数据，特别是当表格的列（即行标题）也是动态来自数据库时，你可以按照以下步骤进行：

定义表格数据结构：首先，你需要定义表格的数据结构，包括列（columns）和数据（data）。
从数据库获取列和数据：这通常涉及到后端API的调用，你需要通过axios或其他HTTP客户端从后端获取数据。
在Vue组件中使用数据：在Vue组件中，使用异步数据（例如，通过axios.get）来填充表格的列和数据。
渲染表格：使用Element Plus的<el-table>组件来渲染表格，并动态绑定列和数据。

示例代码

假设你有一个后端API，它返回两个对象：columns和data。columns定义了表格的列（包括列名和其他可能的属性如排序、筛选等），而data是实际的行数据。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in tableColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
    ></el-table-column>
  </el-table>
</template>

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

const tableColumns = ref([]);
const tableData = ref([]);

// 假设这是从后端API获取数据的函数
async function fetchTableData() {
  try {
    const response = await axios.get('YOUR_BACKEND_API_ENDPOINT');
    // 假设后端返回的对象包含columns和data
    tableColumns.value = response.data.columns;
    tableData.value = response.data.data;
  } catch (error) {
    console.error('Error fetching table data:', error);
  }
}

// 组件挂载时调用函数
fetchTableData();
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

注意事项

API端点：你需要将'YOUR_BACKEND_API_ENDPOINT'替换为你实际的后端API端点。
错误处理：在上面的示例中，我简单地通过console.error打印了错误。在生产环境中，你可能需要更复杂的错误处理策略。
性能考虑：如果表格数据非常大，考虑实现分页或无限滚动来优化性能。
样式：Element Plus的表格组件提供了许多可配置的样式选项，你可以根据需要调整它们。

这样，你就能够基于动态列和数据在Vue 3中使用Element Plus来渲染表格了。

3 个回答

请鹅出战

发布于
8 月 22 日宁夏银川市

噬菌体19

发布于
8 月 22 日江苏

建议github上找专业的table组件，一般自带这种功能

前端搬运工

7291417

发布于
8 月 22 日陕西

先看下效果图：

首先，列的日期是获取当月的日期，这块的getMonthDays是我封装的一个函数，传入年份和月份，获取该月总天数，然后遍历总天数，动态获取表格列，这块的prop是用'd' + (i + 1)设置的，所以表格返回的列数据应该遵循这个规则，否则不会渲染。

// 动态获取表格列
const dateList = computed(() => {
  let dataList = getMonthDays('2024', '08')

  return new Array(dataList).fill().map((item, i) => {
    return {
      label: i + 1 + '日',
      prop: 'd' + (i + 1)
    }
  })
})

表格写一些demo数据

const tableData = ref([
  {
    category: '类别1',
    d1: 1,
    d2: 0,
    d3: 1,
    d4: 1,
    d5: 1,
    d6: 1,
    d7: 1,
    d8: 1,
    d9: 1,
    d10: 1,
    d11: 1,
    d12: 1,
    d13: 1,
    d14: 1,
    d15: 1,
    d16: 1,
    d17: 1,
    d18: 1,
    d19: 1,
    d20: 1,
    d21: 1,
    d22: 1,
    d23: 1,
    d24: 1,
    d25: 1,
    d26: 1,
    d27: 1,
    d28: 1,
    d29: 1,
    d30: 1,
    d31: 1
  },
  {
    category: '类别2',
    d1: 1,
    d2: 0,
    d3: 1,
    d4: 1,
    d5: 1,
    d6: 1,
    d7: 1,
    d8: 1,
    d9: 1,
    d10: 1,
    d11: 1,
    d12: 1,
    d13: 1,
    d14: 1,
    d15: 1,
    d16: 1,
    d17: 1,
    d18: 1,
    d19: 1,
    d20: 1,
    d21: 1,
    d22: 1,
    d23: 1,
    d24: 1,
    d25: 1,
    d26: 1,
    d27: 1,
    d28: 1,
    d29: 1,
    d30: 1,
    d31: 1
  },
  {
    category: '类别3',
    d1: 1,
    d2: 0,
    d3: 1,
    d4: 1,
    d5: 1,
    d6: 1,
    d7: 1,
    d8: 1,
    d9: 1,
    d10: 1,
    d11: 1,
    d12: 1,
    d13: 1,
    d14: 1,
    d15: 1,
    d16: 1,
    d17: 1,
    d18: 1,
    d19: 1,
    d20: 1,
    d21: 1,
    d22: 1,
    d23: 1,
    d24: 1,
    d25: 1,
    d26: 1,
    d27: 1,
    d28: 1,
    d29: 1,
    d30: 1,
    d31: 1
  }
])

在看下表格渲染的模板代码

<el-table class="mt15" size="mini" border :data="tableData">
      <el-table-column
        prop="category"
        label="类别"
        min-width="110"
        align="center">
      </el-table-column>
      <el-table-column
        min-width="60"
        align="center"
        v-for="(item, i) in dateList"
        :key="i"
        :prop="item.prop"
        :label="item.label">
        <template #default="scope">
              <span>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

vue3中element-plus实现表格动态获取数据？

示例代码

注意事项

你尚未登录，登录后可以

不同页面之间可以通过localstorage保存响应式吗？

Vue项目一个报错无法找到原因?

网站的不同域名互相跳转如何保持登录态？

相同的HTML代码，用v-html与直接写在模板中染相表现差异巨大，如何规避？

vue中如何直接生成jwt？

vite项目如何导入.pem公钥更规范？

使用vue-pdf本地浏览器使用chrome移动机型可以正常预览，但是到了线上就无法正常预览了?