Vue3+Ts结合ant-design+tailwindcss来实现一个复杂表格数据的渲染，包括查看和表格表单提交

最新推荐文章于 2025-07-08 18:01:17 发布

原创

最新推荐文章于 2025-07-08 18:01:17 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何使用Vue3、Typescript、Ant Design和TailwindCSS创建一个复杂的表格，展示教育背景信息，并支持表单提交。表格特性包括可展开的教育背景、添加、编辑和删除功能。注意在使用v-for遍历数据时要避免对象，确保每条记录有唯一的key，并进行表单验证。

最近在阅读别人的项目中，碰到一个挺有趣的地方，就是ant-design去渲染一个复杂类型的表格，先看一下官方实例的默认表格是怎样的？

默认的表格就是在对应的表头所属位置显示对应的内容即可，而且代码也是非常简洁的。

<a-table :dataSource="dataSource" :columns="columns" />

当然了。为了满足自定义的开发需求，我们也可以使用插槽的形式，在想要显示的列显示想要的内容。

例如希望表格的第一列显示的是索引。

const colums = [
  {
    title: "序号",
    dataIndex: "index",
  },
  {
    title: "姓名",
    dataIndex: "name",
  },
  ...
  ...
]

    <a-table
      :columns="colums"
      :dataSource="newData"
    >
      <template #bodyCell="{ column, record, text, index }">
        <template v-if="column.dataIndex === 'index'">
          <span>
            {
  
  { index }}
          </span>
        </template>
      </template>