vxe-table中X轴增加滚动条

如果你想在 `vxe-table` 的 X 轴增加滚动条，可以通过设置 `scroll-x` 属性来实现。具体操作如下：

1. 在 `vxe-table` 组件上添加 `scroll-x` 属性，值为布尔型，表示是否启用 X 轴滚动条。

<vxe-table :scroll-x="true"></vxe-table>

2. 如果你希望滚动条可以自动适应表格的宽度，可以设置 `max-width` 属性。

<vxe-table :scroll-x="true" :max-width="1200"></vxe-table>

以上是基本的设置方法，你可以根据实际情况进行调整和优化。希望能够帮到你！

相关问题

vxe-table嵌套vxe-table,里面的vxe-table如何获取外层vxe-table的row?

在vxe-table中嵌套vxe-table时，内层的vxe-table可以通过作用域插槽（scoped slot）来获取外层vxe-table的row数据。具体步骤如下：

1. 在外层vxe-table的列定义中，使用作用域插槽（scoped slot）来传递row数据给内层vxe-table。例如，可以在外层vxe-table的列定义中添加一个自定义列，并使用作用域插槽将row数据传递给内层vxe-table，如下所示：

<vxe-table :data="outerData">
  <vxe-column type="index" width="60"></vxe-column>
  <vxe-column field="name" title="Name"></vxe-column>
  <vxe-column title="Nested Table">
    <template #default="{ row }">
      <vxe-table :data="row.nestedData">
        <!-- 内层vxe-table的列定义 -->
      </vxe-table>
    </template>
  </vxe-column>
</vxe-table>

2. 在内层vxe-table的列定义中，可以通过作用域插槽（scoped slot）的方式获取外层vxe-table传递的row数据。例如，可以在内层vxe-table的列定义中使用作用域插槽来访问外层vxe-table的row数据，如下所示：

<vxe-table :data="nestedData">
  <vxe-column field="nestedField1" title="Nested Field 1"></vxe-column>
  <vxe-column field="nestedField2" title="Nested Field 2"></vxe-column>
  <vxe-column title="Outer Row Data">
    <template #default="{ $table }">
      <!-- 使用 $table.$scoped.row 获取外层vxe-table的row数据 -->
      <span>{{ $table.$scoped.row }}</span>
    </template>
  </vxe-column>
</vxe-table>

通过以上步骤，内层的vxe-table就可以获取到外层vxe-table的row数据，并进行相应的操作。

vxe-table 3.x 虚拟滚动实例

以下是vxe-table 3.x版本的虚拟滚动实例：

<template>
  <div>
    <vxe-table
      :data="tableData"
      :columns="columns"
      height="400px"
      border
      resizable
      show-overflow
      highlight-current-row
      virtual-scroll
    ></vxe-table>
  </div>
</template>

<script>
import 'vxe-table/lib/style.css';import { VXETable } from 'vxe-table';
import XEUtils from 'xe-utils';

export default {
  data() {
    return {
      tableData: [],
      columns: [
        { field: 'name', title: '姓名', width: 100 },
        { field: 'age', title: '年龄', width: 100 },
        { field: 'address', title: '地址', width: 200 },
        { field: 'email', title: '邮箱', width: 200 },
        { field: 'phone', title: '电话', width: 150 },
        { field: 'company', title: '公司', width: 200 },
        { field: 'job', title: '职位', width: 150 },
        { field: 'date', title: '日期', width: 150 }
      ]
    };
  },
  created() {
    this.tableData = XEUtils.mapTree(XEUtils.times(10000, index => {
      return {
        id: 1000 + index,
        name: '测试数据' + (index + 1),
        age: XEUtils.toValueString(20 + XEUtils.random(10, 50)),
        address: '地址' + (index + 1),
        email: 'test' + (index + 1) + '@test.com',
        phone: '1300000000' + XEUtils.toValueString(XEUtils.random(1000, 9999)),
        company: '公司' + (index + 1),
        job: '职位' + (index + 1),
        date: XEUtils.toDateString(XEUtils.randomDate('2010-01-01', '2022-12-31'), 'yyyy-MM-dd HH:mm:ss')
      };
    }), {
      key: 'id',
      parentKey: 'pid'
    });
  },
  mounted() {
    VXETable.use(VXETable.VXETablePluginVirtualTree);
  }
};
</script>