Ant-Design-Vue动态表头并填充数据2

关注我，持续分享逻辑思维&管理思维&面试题； 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导；

推荐专栏《10天学会使用asp.net编程AI大模型》，目前已完成所有内容。一顿烧烤不到的费用，让人能紧跟时代的浪潮。从普通网站，到公众号、小程序，再到AI大模型网站。干货满满。学成后可接项目赚外快，绝对划算。不仅学会如何编程，还将学会如何将AI技术应用到实际问题中，为您的职业生涯增添一笔宝贵的财富。

-------------------------------------正文----------------------------------------

在 Ant Design Vue 中，动态表头和数据填充通常涉及两个主要步骤：

1. 动态生成表头：根据后端返回的数据结构或前端状态动态地构建 columns 数组。
2. 动态填充数据：根据后端返回的数据动态地填充 dataSource 数组。

以下是一个简单的示例，说明如何实现这两个步骤：

1. 动态生成表头

假设你有一个从后端获取的数据结构，它描述了表头的字段和标题：

// 假设从后端获取的表头数据  
const headerData = [  
  { title: '姓名', dataIndex: 'name', key: 'name' },  
  { title: '年龄', dataIndex: 'age', key: 'age' },  
  { title: '地址', dataIndex: 'address', key: 'address' },  
  // ... 其他字段  
];  
  
// 根据 headerData 动态生成 columns  
const columns = headerData.map(item => ({  
  title: item.title,  
  dataIndex: item.dataIndex,  
  key: item.key,  
  // ... 可以添加其他配置，如 sorter、filters 等  
}));

2. 动态填充数据

假设你也有一个从后端获取的数据数组，它包含了表格的每一行数据：

// 假设从后端获取的数据  
const tableData = [  
  { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },  
  { key: '2', name: '李四', age: 42, address: '上海市浦东新区' },  
  // ... 其他数据  
];  
  
// 将这个数据直接赋值给 dataSource  
const dataSource = tableData;

3. 在组件中使用

在你的 Vue 组件中，你可以将 columns 和 dataSource 作为 props 传递给 a-table 组件：

<template>  
  <a-table :columns="columns" :dataSource="dataSource" />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      columns: [], // 这里应该在 created 或 mounted 钩子中初始化  
      dataSource: [], // 这里也应该在 created 或 mounted 钩子中初始化  
    };  
  },  
  created() {  
    // 假设你已经从后端获取了 headerData 和 tableData  
    // 这里只是模拟从后端获取数据的过程  
    const headerData = [/* ... */];  
    const tableData = [/* ... */];  
  
    this.columns = headerData.map(item => ({  
      title: item.title,  
      dataIndex: item.dataIndex,  
      key: item.key,  
    }));  
    this.dataSource = tableData;  
  },  
};  
</script>

这样，你就实现了一个具有动态表头和动态数据的 Ant Design Vue 表格。

感兴趣的同学辛苦 关注/点赞 ，持续分享逻辑、算法、管理、技术、人工智能相关的文章。

有意找工作的同学，请参考博主的原创：《面试官心得--面试前应该如何准备》，《面试官心得--面试时如何进行自我介绍》， 《做好面试准备，迎接2024金三银四》。
或关注博主免费专栏【程序员宝典--常用代码分享】里面有大量面试涉及的算法或数据结构编程题。

博主其它经典原创：《管理心得--如何高效进行跨部门合作》，《技术心得--如何成为优秀的架构师》、《管理心得--如何成为优秀的架构师》、《管理心理--程序员如何选择职业赛道》，及
《C#实例：SQL如何添加数据》，《C#实战分享--爬虫的基础原理及实现》欢迎大家阅读。