vxe-table 是一个基于 Vue.js 的表格组件库，它提供了丰富的功能和灵活的配置，可以用于展示各种类型的
数据表格。如果想要在同一个页面中
并行展示两个
数据表格，可以使用 vxe-table 的多表格功能。
首先，需要在页面中引入 vxe-table 组件：
```html
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
```
然后，在 Vue 组件中定义两个
数据表格：
```html
<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 的多表格功能将这两个
数据表格
并行展示在同一个页面中：
```html
<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` 设置为左侧固定列和右侧固定列，并分别指定了固定列的数量。这样，我们就可以在同一个页面中
并行展示两个
数据表格了。
1205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
