vue(六) vue集合handsontable实现在线excel表格编辑

在线excel表格编辑"/>

vue(六) vue集合handsontable实现在线excel表格编辑

handsontable官网地址：.1.0/tutorial-custom-build.html

1.安装

npm install handsontable @handsontable/vue

2.引入css,

方式1 
在app.vue中引入 
<style src="../node_modules/handsontable/dist/handsontable.full.css"></style> 
方式2 
在main.js中引入 
import 'handsontable/dist/handsontable.full.css';
方式3
在vue组件中引入 
<style> @import '~handsontable/dist/handsontable.full.css'; </style>

3.添加License key,去掉提示文字

<hot-table :settings="settings" licenseKey="non-commercial-and-evaluation" />
<script>import {HotTable} from '@handsontable/vue';import Handsontable from 'handsontable';export default {name: 'HelloWorld',data() {return {hotSettings: {data: Handsontable.helper.createSpreadsheetData(6, 10),colHeaders: true,colHeaders: true,}}},components: {HotTable}}
</script>

4.传递数据方式

方式1：
<hot-table :settings="hotSettings" />
setting:子组件接收数据属性方式2：
<hot-table:settings="hotSettings"licenseKey="non-commercial-and-evaluation":data="tableData"style="height:300px;overflow:auto;"></hot-table><script>data() {return {hotSettings: {tableClassName: ['table01', 'htCenter'],stretchH: 'all',preventOverflow: 'vertical', //防止水平溢出表 },data:''//你的对象数组或者二维数组，可以使用计算属性给其赋值等}},
</script>

5.设置行.列表头显示

//默认行列头部 
colHeaders: true,rowHeaders: true,//自定义行列头部 
colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],//对象数组头部设置
dataSchema: {//预定义对象属性car: null,year: null,chassisColor: null,bumperColor: null},colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],//也可以为汉字columns: [//对象属性与预定义属性对应{ data: 'car', readOnly: true },{ data: 'year'