vue.js表格组件
裁判官 (vue-handsontable-official)
A Vue.js wrapper for the the Handsontable spreadsheet component.
Handsontable电子表格组件的Vue.js包装器。
安装 (Installation)
For detailed installation instructions, please take a look at our wiki under "Installation guide".
有关详细的安装说明,请在“安装指南”下查看我们的Wiki。
基本用法 (Basic usage)
vue-handsontable-official
creates a <HotTable>
component. You can use it just like any other Vue component. For example:
vue-handsontable-official
创建一个<HotTable>
组件。 您可以像使用其他任何Vue组件一样使用它。 例如:
<template>
<div id="hot-preview">
<HotTable :root="root" :settings="hotSettings"></HotTable>
</div>
</template>
<script>
import HotTable from 'vue-handsontable-official';
import Vue from 'vue';
export default {
data: function() {
return {
root: 'test-hot',
hotSettings: {
data: [['sample', 'data']],
colHeaders: true
}
};
},
components: {
HotTable
}
}
</script>
<style>
#test-hot {
width: 600px;
height: 400px;
overflow: hidden;
}
</style>
Note, that you can pass options to Handsontable either as:
请注意,您可以通过以下方式将选项传递给Handsontable:
individual component properties
单个组件的属性
<HotTable root="hot-example" :data="hotData" :rowHeaders="true"/>
an object passed to a single
settings
property传递给单个
settings
属性的对象
<HotTable root="hot-example" :settings="settingsObject" />
The root
property declares the id
of the root element for the table. It is optional - if it isn't provided, the table will get a randomly generated id
.
root
属性声明表的根元素的id
。 它是可选的-如果未提供,则表将获得随机生成的id
。
翻译自: https://vuejsexamples.com/a-vue-js-wrapper-for-the-the-handsontable-spreadsheet-component/
vue.js表格组件