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

最近在阅读别人的项目中，碰到一个挺有趣的地方，就是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 ==