vue3插件handsontable实现表格批量编辑类似于xlsx

官方文档：https://handsontable.com/docs 

import { HotTable } from '@handsontable/vue3'
import 'handsontable/dist/handsontable.full.css'
<template>
<hot-table :settings="hotSettings" :data="data"></hot-table>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { HotTable } from '@handsontable/vue3';

export default defineComponent({
components: {
HotTable,
},
setup() {
const data = ref([
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
]);

const hotSettings = ref({
colHeaders: true,
rowHeaders: true,
contextMenu: true, // 启用右键菜单
manualColumnResize: true, // 允许手动调整列宽
});

return { data, hotSettings };
}
});
</script>