ant design vue Table无数据时，有固定列就在表头下方显示横向滚动条，无固定列不显示滚动条

在 Ant Design Vue 的 Table 组件中，可以通过设置 `scroll` 属性来实现固定表头和表尾。具体步骤如下： 1. 设置 `scroll` 属性 将 `scroll` 属性设置为一个对象，其中包含 `x` 或 `y` 属性，用于指定滚动条的方向。例如，设置 `scroll` 属性为 `{ x: 1500 }` 表示横向滚动条的宽度为 1500px，设置 `scroll` 属性为 `{ y: 300 }` 表示纵向滚动条的高度为 300px。 ```html <template> <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }"></a-table> </template> ``` 2. 设置表头和表尾 在 `columns` 中设置 `fixed` 属性，用于指定列是否固定。`fixed` 属性可以设置为 `left`、`right` 或 `true`。当设置为 `left` 时，表示该列固定在左侧；当设置为 `right` 时，表示该列固定在右侧；当设置为 `true` 时，则表示该列固定在左侧，并且前面的所有列也固定在左侧。 ```html <template> <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }"> <template #title> <thead> <tr> <th a-fixed="left">Name</th> <th a-fixed="left">Age</th> <th a-fixed="right">Address</th> <th>Company</th> <th>Phone</th> <th>Email</th> <th a-fixed="right">Action</th> </tr> </thead> </template> <template #footer> <tfoot> <tr> <td a-fixed="left">Total</td> <td a-fixed="left">{{ data.length }}</td> <td a-fixed="right"></td> <td></td> <td></td> <td></td> <td a-fixed="right"></td> </tr> </tfoot> </template> </a-table> </template> ``` 在上面的代码中，使用了 `title` 和 `footer` 插槽来设置表头和表尾。在表头中，通过设置 `a-fixed` 属性来指定哪些列需要固定在左侧或右侧；在表尾中，通过设置 `a-fixed` 属性来指定哪些列需要固定在左侧或右侧，并且在左侧的列中显示合计信息。

Ant Design Vue Table 的高度可以通过设置 `scroll` 属性来实现自适应。具体步骤如下： 1. 在表格组件上设置 `scroll` 属性，如下所示： ```html <template> <a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 300 }"></a-table> </template> ``` 2. 在 `scroll` 属性中设置 `y` 的值为表格应该占用的最大高度。这里设置为 `300`，表示表格的最大高度为 `300px`。 3. 如果表格的数据过多，表格会出现滚动条，并且表头会固定在表格上方，保持可见。 需要注意的是，如果表格中的列宽度过大，可能会导致表格出现横向滚动条。这时可以通过设置 `fixed` 属性来固定列宽，或者通过设置 `responsive` 属性来自适应列宽。具体使用方法可以参考 Ant Design Vue Table 的官方文档。