「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。
一、简介
Handsontable 是一个前端 Excel 表格插件，它可以兼容 Vue、React、Angular 以及 H5 。 Handsontable 易于与任何数据源集成，并具有许多有用的功能，如数据绑定、编辑、复制粘贴、插入删除行列、验证、排序和强大的上下文菜单等。具体可参考官方文档。
二、安装
npm i handsontable @handsontable/vue
三、使用
1、引入模块包及样式表
import Handsontable from 'handsontable'
import { HotTable } from '@handsontable/vue'
import '../../../node_modules/handsontable/dist/handsontable.full.css'// 样式
import 'handsontable/languages'// 语言设置
2、注册组件
components: {
// 注册组件
HotTable
},
3、插件配置
data() {
return {
hotSettings: {
language: 'zh-CN', // 语言设置
licenseKey: 'non-commercial-and-evaluation', // 隐藏版权文字
width: 'auto', // 表格宽度
height: '300', // 表格高度、设置以后才会出现scroll
// data: Handsontable.helper.createSpreadsheetData(10, 26), // 列表初始化数据
data: [], // 表格数据也可根据实际项目需要进行设置
startRows: 1, // 初始化行数,无data属性时生效(该值小于minRows时,以minRows为准)
startCols: 3, // 初始化列数,无data属性时生效(该值小于minCols时,以minCols为准)
minRows: 1, // 最少行数(当初始化数据小于该值时,以该值为准)
minCols: 3, // 最少列数(当初始化数据小于该值时,以该值为准)
minSpareCols: 0, // 列的最小留白数
minSpareRows: 0, // 行的最小留白数
// colHeaders: true, // 是否展示列表头,默认是A,B,C等字母,可以['列1','列2']进行自定义展示
colHeaders: ['V', 'Ti（NTM）', 'Ti（ETM）'],// 自定义表格的表头
rowHeaders: true, // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
colWidths: 150, // 列宽度
dropdownMenu: false, // 表头展示下拉菜单,可以自定义展示
className: 'htCenter', // 单元格文字对齐方式(htLeft,htRight,htCenter)
currentRowClassName: 'my-selectRow', // 给选中行添加自定义class类名
currentColClassName: 'my-selectCol', // 给选中列添加自定义class类名
autoWrapRow: true, // 文字是否自动换行(当没有设置colWidths时生效)
fixedRowsTop: 0, // 列表内容从上面开始,固定定位的行数(不包含行表头)
fixedColumnsLeft: 1, // 列表内容从左面开始,固定定位的列数(不包含列表头)
fillHandle: true, // 是否开启拖拽复制操作(true,false,'horizontal'水平复制,'vertical'垂直复制)
contextMenu: {
// 单元格右击展示菜单
items: {
row_above: {
name: '上面插入一行'
},
row_below: {
name: '下面插入一行'
},
col_left: {
name: '左侧插入一列'
},
col_right: {
name: '右侧插入一列'
},
remove_row: {
name: '移除本行'
},
remove_col: {
name: '移除本列'
},
alignment: {
name: '对齐方式'
},
make_read_only: {
name: '只读'
},
// 'borders':{
// name: '边框'
// },
copy: {
name: '复制'
},
cut: {
name: '剪切'
},
separator: Handsontable.plugins.ContextMenu.SEPARATOR,
clear_custom: {
name: '清空所有单元格数据',
callback: function() {
this.clear()
}
}
}
}
}
}
},
4、HTML渲染
<template>
<div class="app-container">
<HotTable ref="hotTableComponent" :settings="hotSettings" />
</div>
</template>
5、获取表格数据
created() {
this.hotSettings.data = Handsontable.helper.createSpreadsheetData(10, 26)
}
