vxe-grid 放在fieldset标签中，没有横向滚动条，且表头不跟着滚动，这是为什么

这可能是由于CSS层叠样式表中的某些属性未正确设置，导致该表格不能横向滚动，表头也不能跟随滚动。建议检查CSS属性，如overflow、position、width、height等是否正确设置，以确保表格正常工作。

相关问题

vxe-grid 放在fieldset标签中，没有横向滚动条，且表头不跟着滚动

如果在fieldset标签中使用vxe-grid，可能无法正确显示横向滚动条和表头。这可能是由于fieldset标签导致的样式问题。

解决这个问题的方法是在fieldset标签之外添加一个div，将vxe-grid放在这个div中。为了实现表头随着横向滚动滚动的效果，还需要在这个div中添加一个表头容器，并将表头容器与vxe-grid进行绑定。下面是一个例子：

<fieldset>
  <legend>My Grid</legend>
  <div style="overflow-x: auto;">
    <div ref="tableHeader" class="vxe-table--header-wrapper"></div>
    <vxe-grid ref="grid" :columns="columns" :data="data"></vxe-grid>
  </div>
</fieldset>

在这个例子中，表格被包含在一个带有横向滚动条的div中。前面已经提到了，为了实现表头随着横向滚动滚动的效果，我们还需要在这个div中添加一个表头容器，并将表头容器与vxe-grid进行绑定。

mounted () {
  // 绑定表头容器
  this.$refs.grid.$xegrid.connect({
    header: this.$refs.tableHeader
  })
}

在组件的mounted钩子函数中，通过this.$refs.grid.$xegrid.connect方法来将表头容器与vxe-grid进行绑定。这样，当表格滚动时，表头容器也会随着滚动，并保持与表格的对齐。

需要注意的是，为了确保表头容器和表格的样式正确显示，我们还需要在样式中对表头容器进行一些特定的设置，比如将它的position设置为absolute等。

vxe-grid 放在fieldset标签中，没有横向滚动条，且表头不跟着滚动，给一个详细的ts的例子

假设我们需要展示一个包含大量数据的表格，并希望使用 vxe-grid 实现，以下是一个详细的 TypeScript 示例：

<template>
  <fieldset class="wrapper">
    <legend>My Table</legend>
    <vxe-grid :data="tableData"
              height="500"
              stripe
              border
              resizable
              :column-draggable="true"
              :header-cell-style="{ backgroundColor: '#f5f5f5' }"
              :columns="columns">
    </vxe-grid>
  </fieldset>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import 'xe-utils';
  import VXETable from 'vxe-table';
  import 'vxe-table/lib/index.css';
  import VXEGrid from 'vxe-grid';
  import 'vxe-grid/lib/index.css';

  VXETable.use(VXEGrid);

  export default defineComponent({
    name: 'MyTable',
    data() {
      return {
        columns: [
          {
            field: 'id',
            title: 'ID',
            width: 80,
            sortable: true
          },
          {
            field: 'name',
            title: 'Name',
            width: 150,
            sortable: true
          },
          {
            field: 'gender',
            title: 'Gender',
            width: 100
          },
          {
            field: 'age',
            title: 'Age',
            width: 100,
            sortable: true
          },
          // ... more columns ...
        ],
        tableData: [
          // ... table data ...
        ]
      };
    }
  });
</script>

<style scoped>
  .wrapper {
    overflow-x: auto;
    padding: 10px;
  }
</style>

在此示例中，我们将 vxe-grid 放在一个 fieldset 标签中，并设置了样式使其出现横向滚动条。同时，我们给表头设置了一个固定的背景色，并允许用户通过拖拽改变列的位置。

此外，我们还定义了表格的列和数据（由于数据过多，省略了部分内容）。在实际项目中，可以通过 API 或其他方式动态获取这些数据并传递给组件。