最近在阅读别人的项目中，碰到一个挺有趣的地方，就是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>
</a-table>用插槽的方式即可控制让它显示索引。我们不妨大胆一些，将这个表格渲染的更加复杂一些，究竟有多复杂呢，请看下面的图片。
这里是列表页，在教育背景一列，通过点击每个小图标可以展开对应的教育背景信息。
点击新增按钮，添加一条新数据，编辑页面如图：
这是一个基于列表形式的表单，一般用于提交很多条数据时使用比较方便，在教育背景一列中，默认是只展示了条小学的空数据，
点击新增教育背景，可以继续添加学校类型，这里我做了限制，最多只能添加到大学，而且不可修改，只能是这四种类型，也可以点击删除按钮，删除当前的教育背景记录。
每一行记录的最右边又有两个按钮，分别是添加任职经历和添加获奖项目。例如点击添加任职经历后，在学校名称下面又会增添新的表格用来存放添加的任职数据，同样可以点击删除按钮来删除当前的任职记录。新增获奖项目的操作亦是如此。
这就是属于一种复杂表格的渲染，它完全按照自定义的需求去实现想要的功能，输入完基本数据后，点击确定。列表页便新增了一条我们刚刚编辑的数据。
当然了。这里的很多个功能其实还是不够完善了，源码我放到文章最后，下面我分享一下实际的几个问题和注意事项：
- 用v-for遍历数据时，最好遍历数组，不要遍历对象，否则会有意想不到得到错误。
- 使用v-for也可以遍历对象，但是这样遍历的索引就是对象的属性名了，而对象的属性名是string类型的，但是 v-for="(item,index) in data " :key="index"，它的索引index是number类型的，如果涉及到一些跟索引有关的操作时，就会报错。
-
let data = { A:{}, B:{}, C:{} }如上定义了一个类数组对象，使用v-for遍历，index就是A、B、C，他们是string类型
<div v-for="(item,index) in data" :key="index"> <span v-if="index==='A'">aaa</span> <span v-if="index==='B'">bbb</span> <span v-if="index==='C'">ccc</span> </div>然后用index去判断操作时，运行就会报错，报错的大概就是：string类型的数据不能和number类型的比较，我试了很多方法，== , toString 等，还是不行，因为index本身就是number类型的。
- 为每一条记录设置一个key，这个很关键，后面做增删改查也好，包括页面上单独控制每一条记录，如展开收起等。
- 表单校验，每一个a-form-item只能绑定一个校验数据，不能是有两个以上的输入项
，
由于记录的id是写死的，没有用随机数生成，因此后面需要继续改善。