Handsontable + Vue3 合并单元格等操作后获取数据
时间: 2023-12-12 09:02:54 浏览: 251
要获取合并单元格后的数据,可以使用 Handsontable 提供的 `getData()` 方法。该方法会返回一个二维数组,其中每个元素代表一个单元格的值。如果某个单元格被合并了,那么它会返回合并后的值。
以下是一个示例代码:
```html
<template>
<div id="hot-app"></div>
</template>
<script>
import Handsontable from 'handsontable';
export default {
mounted() {
const container = document.getElementById('hot-app');
const data = [
['John', 'Doe', 23, 'johndoe@example.com'],
['Jane', 'Doe', 25, 'janedoe@example.com'],
['Bob', 'Smith', 32, 'bobsmith@example.com'],
['Alice', 'Johnson', 27, 'alicejohnson@example.com']
];
const hot = new Handsontable(container, {
data: data,
mergeCells: [
{row: 0, col: 0, rowspan: 2, colspan: 1},
{row: 0, col: 2, rowspan: 2, colspan: 1}
]
});
const mergedData = hot.getData();
console.log(mergedData);
}
}
</script>
```
在上面的代码中,我们首先将数据渲染到 Handsontable 中,并且将第 1 列和第 3 列的前两行进行了合并。然后我们通过 `hot.getData()` 方法获取合并后的数据,并将其输出到控制台中。
阅读全文