AntDesignVue中表格部分问题汇总

在使用 AntDesignVue 的时候，使用最频繁的可能就是表单和表格组件了，那么这其中会用很多坑可能是我们要经常踩的，在这里我们来了解一下 table表格中设置滚动条以后顶部会多出一部分的原因以及解决方案，和常见的 rowKeys 报错解决方案。

样式

• 首先我们来看一下，使用 table 表格组件的时候 我们可以设置 scroll 来调整他的纵向和横向滚动这个设定，但是当我们像下面这个样子，设置了 y 滚动条件以后，我们的页面当中可能就变成了下面那个样子

<a-table
    bordered
    :data-source="datas"
    :columns="columns"
    :pagination="false"
    :scroll="{ y:300 }"
>

正如上图中我们看到的， 这里我们的表头会多出来一块，其实原因并不是表头多了一块，而是我们下面表格体部分缩减了一块，这一块实际上就是给滚动条留出来的空间，我们的表格组件并不会帮我们去动态添加他的滚动条，而是常驻这一空间，这里我看有的人使用了很麻烦的样式来进行处理，其实大可不必哦，在开发的过程中，我们要熟记数据驱动显示这一原则，能用数据操作的就用数据，这里我们可以使用条件来动态绑定 scroll

<a-table
    bordered
    :data-source="datas"
    :columns="columns"
    :pagination="false"
    :scroll="datas.length > 7 ? { y:300 } : { }"
>

如此而来，我们可以依据我们表格中的行数，来判断，只有当行数超出的时候，才显示滚动条，没有超出的时候，给一个空对象，就是没有配置，这样就ok了

报错

• 我们在使用表格组件的时候因为不熟悉可能会导致各种报错，下面我们来看一个比较常见的 关于 key 的报错。
  Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.]

这里是因为我们使用的 table 组件需要一个 rowKey 这个属性表示表格行的 key , 而这东西我们大家知道，他肯定是唯一的，有时候我们可能复制了之前的代码或者别人的逻辑，其中就带了这个 rowkey，但是我们接口中返回的可能没有他需要的属性，所以就需要注意这一点了，如果不想使用我们接口中的属性，则可以直接设置 index ，就像下面这样：

<a-table
    bordered
    :data-source="datas"
    :rowKey="(record,index) => {return index}"
    :columns="columns"
>