vxe-table 两数据表数据并行展示

vxe-table 是一个基于 Vue.js 的表格组件库，它提供了丰富的功能和灵活的配置，可以用于展示各种类型的数据表格。如果想要在同一个页面中并行展示两个数据表格，可以使用 vxe-table 的多表格功能。

首先，需要在页面中引入 vxe-table 组件：

<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>

然后，在 Vue 组件中定义两个数据表格：

<template>
  <div>
    <vxe-table ref="table1" :data="tableData1" :columns="tableColumns1"></vxe-table>
    <vxe-table ref="table2" :data="tableData2" :columns="tableColumns2"></vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [], // 第一个数据表格的数据
      tableData2: [], // 第二个数据表格的数据
      tableColumns1: [], // 第一个数据表格的列定义
      tableColumns2: [], // 第二个数据表格的列定义
    };
  },
  mounted() {
    // 初始化数据和列定义
    this.tableData1 = [
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Tom', age: 30 },
      { id: 3, name: 'Mary', age: 28 },
    ];
    this.tableData2 = [
      { id: 4, name: 'Bob', age: 35 },
      { id: 5, name: 'Alice', age: 27 },
      { id: 6, name: 'David', age: 32 },
    ];
    this.tableColumns1 = [
      { field: 'id', title: 'ID' },
      { field: 'name', title: 'Name' },
      { field: 'age', title: 'Age' },
    ];
    this.tableColumns2 = [
      { field: 'id', title: 'ID' },
      { field: 'name', title: 'Name' },
      { field: 'age', title: 'Age' },
    ];
  },
};
</script>

在上面的代码中，我们定义了两个数据表格 `table1` 和 `table2`，分别使用了不同的数据和列定义。在页面加载完成后，我们通过 `mounted` 钩子函数初始化了这两个表格的数据和列定义。

接下来，我们可以使用 vxe-table 的多表格功能将这两个数据表格并行展示在同一个页面中：

<template>
  <div>
    <vxe-table ref="table1" :data="tableData1" :columns="tableColumns1"></vxe-table>
    <vxe-table ref="table2" :data="tableData2" :columns="tableColumns2"></vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [], // 第一个数据表格的数据
      tableData2: [], // 第二个数据表格的数据
      tableColumns1: [], // 第一个数据表格的列定义
      tableColumns2: [], // 第二个数据表格的列定义
    };
  },
  mounted() {
    // 初始化数据和列定义
    this.tableData1 = [
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Tom', age: 30 },
      { id: 3, name: 'Mary', age: 28 },
    ];
    this.tableData2 = [
      { id: 4, name: 'Bob', age: 35 },
      { id: 5, name: 'Alice', age: 27 },
      { id: 6, name: 'David', age: 32 },
    ];
    this.tableColumns1 = [
      { field: 'id', title: 'ID' },
      { field: 'name', title: 'Name' },
      { field: 'age', title: 'Age' },
    ];
    this.tableColumns2 = [
      { field: 'id', title: 'ID' },
      { field: 'name', title: 'Name' },
      { field: 'age', title: 'Age' },
    ];

    // 将两个表格并行展示
    const table1 = this.$refs.table1.$xetable;
    const table2 = this.$refs.table2.$xetable;
    table1.fixedType = 'left';
    table1.fixedColumn = 2;
    table2.fixedType = 'right';
    table2.fixedColumn = 1;
  },
};
</script>

在上面的代码中，我们使用了 `$refs` 属性获取了两个数据表格的实例，并将它们并行展示在同一个页面中。具体来说，我们分别将 `table1` 和 `table2` 设置为左侧固定列和右侧固定列，并分别指定了固定列的数量。这样，我们就可以在同一个页面中并行展示两个数据表格了。