vxe-grid 显示固定数据

要在 vxe-grid 中显示固定数据，你可以使用两种方法之一：

1. 使用固定列（Fixed Columns）：通过设置 vxe-grid 的 `fixed` 属性来固定需要显示的列。例如，如果你想固定前两列，可以这样设置：

<vxe-grid :data="yourData" :columns="gridColumns" :fixed="true" :fixed-type="['left', 'left']"></vxe-grid>

在上面的代码中，`yourData` 是你的数据源，`gridColumns` 是你的列配置数组。`:fixed="true"` 表示启用固定列功能，`:fixed-type="['left', 'left']"` 表示前两列都是左侧固定列。

2. 使用固定行（Fixed Rows）：通过设置 vxe-grid 的 `fixed` 属性和 `fixed-type` 属性来固定需要显示的行。例如，如果你想固定前两行，可以这样设置：

<vxe-grid :data="yourData" :columns="gridColumns" :fixed="true" :fixed-type="['top', 'top']"></vxe-grid>

在上面的代码中，`:fixed-type="['top', 'top']"` 表示前两行都是顶部固定行。

注意：上述两种方法可以同时使用，根据你的需求来选择适合的方式。同时，还可以通过设置相应的样式来美化固定列或固定行的显示效果。

相关问题

vxe-grid 自动横向滚动条，表格表头跟着滚动

vxe-grid 是一个基于 Vue.js 的表格组件库，提供了自动横向滚动条和表头跟着滚动的功能。

当表格内容过多，超出了容器宽度时，vxe-grid 会自动出现横向滚动条，用户可以通过滚动条来查看隐藏部分的内容。同时，表头也会随着内容一起滚动，保证表格的排版整齐。这种功能对于大量数据的展示非常有帮助，可以让用户更加方便地浏览和分析数据。

使用 vxe-grid 实现自动横向滚动条和表头跟着滚动功能非常简单，只需要在代码中引入 vxe-grid 组件，并为其配置相应的参数即可。以下是一个简单的示例代码：

<template>
  <vxe-grid :data="tableData" :scroll-x="true" :scroll-y="false">
    <vxe-table-column type="seq" width="50"></vxe-table-column>
    <vxe-table-column field="name" title="Name"></vxe-table-column>
    <vxe-table-column field="age" title="Age"></vxe-table-column>
    <vxe-table-column field="gender" title="Gender"></vxe-table-column>
  </vxe-grid>
</template>

<script>
import { Grid, TableColumn } from 'vxe-table'

export default {
  components: {
    Grid,
    TableColumn
  },
  data () {
    return {
      tableData: [
        { name: 'John', age: 21, gender: 'Male' },
        { name: 'Mary', age: 18, gender: 'Female' },
        { name: 'Bob', age: 25, gender: 'Male' },
        { name: 'Alice', age: 29, gender: 'Female' },
        { name: 'Tom', age: 31, gender: 'Male' },
        { name: 'Jane', age: 27, gender: 'Female' }
      ]
    }
  }
}
</script>

在上面的示例代码中，我们使用 vxe-grid 组件来呈现一个基本的表格，设置参数 `scroll-x` 为 `true` 来启用自动横向滚动条功能，同时设置参数 `scroll-y` 为 `false` 来禁用纵向滚动条。然后，在表格中添加了一些列定义，包括序号列和姓名、年龄、性别三列数据列。最后，我们将表格数据传递给 vxe-grid 组件，让它自动展示出来。

需要注意的是，vxe-grid 组件还提供了许多其他的配置选项，比如通过 `fixed-type` 参数来定义固定列，通过 `max-height` 参数来设置最大高度等等。开发者可以根据自己的需求进行配置，以获得最佳的使用体验。

fieldset标签中使用vxe-grid，没有横向滚动条

可能原因：

1. 表格内容没有超出容器宽度，因此不需要横向滚动条。

2. 容器设置了样式 `overflow-x: hidden;`，导致横向滚动条被隐藏。

3. 表格设置了固定列或者固定表头，使得表格宽度不会超出容器，因此不需要横向滚动条。

解决方法：

1. 在表格中增加足够的列或者数据，使得表格内容超出容器宽度，从而显示横向滚动条。

2. 检查容器的样式，去掉 `overflow-x: hidden;`。

3. 如果表格设置了固定列或者固定表头，可以尝试去掉固定设置，或者增加足够的列或者数据，使得表格内容超出容器宽度，从而显示横向滚动条。