1.使用步骤
1.1 安装(个人建议安装12.2及之后的版本)
npm install handsontable @handsontable/vue
1.2 使用
import { HotTable } from '@handsontable/vue'
<hot-table :settings="hotSettings" class="w-100 h-100"></hot-table>
hotSettings里面配置需要的属性和回调函数
例如：
hotSettings: {
data: [
[1, 2, 3, 4],
[a, b, c, d]
]
}
2.基础配置
2.1 data
data里面有两种形式：
a. 二维数组 [[], []] (里面的每个数组代表一行数据)
b. 对象数组 [{}, {}] (里面的每个对象代表一行数据, 但是这是需要结合columns属性一起使用)
2.2 columns
是一个对象数组([{}, {}]), 里面的每一个对象数据都代表对应的这一列(hot-table的列排列位置就是根据这个)
例如：
{
type: 'numeric', // 限制这一列的值得类型(data配置项中数据第一次渲染的时候不会报错，修改的时候会提示)
readOnly: true, // 这一列只读
data: 'column property' // 如果data配置项中数据是对象数组类型的话，就可以使用这个属性来制定这一列是对应哪个属性
title: 'column title', // 这一列的标题(体现在表头上)
dateFormat: 'YYYY-MM-DD', // 这一列如果type: date(会出现一个日期插件)，这一列的选择后的日期的形式就是'2022-11-09'
}
2.3 列宽, 行高
colWidths: 150, // 有多种格式(可以是数字，也可以是字符串('150px'), 也可以是数组([100, 200, ...])给每一列都设置一个宽度，也可以是方法(需要有个返回值return)， 也可以是undefined(由modifyColWidth钩子使用))
rowHeights: '150px', // 同上
autoRowSize: true/false, // 给每一列设置一个自适应宽度
autoColumnSize: true/false // 同上
2.4 表头
rowHeaders: true/false/[]/function, // 行表头 true采用默认的表头('1', '2', '3', ...) false禁用表头 []自定义表头([1, 2, 3, 4]) function自定义表头(function(){ return 'AB'})
colHeaders: true/false/[]/function, // 列表头 同上
2.5 hot-table根据宽度横向扩展
stretchH: 'all'/'last'/'none', // all扩展全部列 last只扩展最后一列 none默认不扩展
2.6 viewportColumnRenderingOffset
在网格视口之外呈现的列数
hot-table为了渲染的效率，它采用的默认渲染方式是只渲染可视区域部分的内容，有超出可视区域内容通过横向滚动条来加载，就会出现几个问题(1: 用户体验。横向滚动条会反复横跳；2：预先设置的一些样式不起作用(比如：合并行))
viewportColumnRenderingOffset: 100, // 可以通过设置超出最大列数的值，来让hot-table一次性渲染所有的数据
2.7 设置hot-table的宽高
width: 500, // 可以是数字，方法(需要一个返回值return)，CSS Unit
height: 500, // 同上
2.8 mergeCells(合并单元格)
是一个对象数组([{}, {}, ...]),里面的对象包含四个属性：
row: 1, // 合并部分开头的行索引
col: 1, // 合并部分开头的列索引
rowspan: 2, // 合并的行数
colspan: 2, // 合并的列数
2.9 选中拖拽复制
fillHandle: true/false/'vertical'/'horizontal', // 'vertical'启用垂直自动填充 'horizontal'启用横向自动填充
2.10 回调钩子函数
beforeCreateRow(index) {} // index新行索引
新增行之前回调，return false代表取消掉本次新增行操作
afterCreateRow(index, amount) {} // index新行索引 amount新增行数目
添加行后被调用
afterChange(changes, source) {} // changes是一个二维数组([[row, prop, oldValue, newValue]]) row修改单元格所在的行 prop修改单元格列对应的属性 oldValue修改前的值 newValue修改后的值
在一个或多个单元格被更改后触发，当使用编辑器输入值或使用API更改值时，会在任何情况下触发更改
beforeRemoveRow(index, amount, physicalRows) {} // index删除行索引 amount删除行数量 physicalRows从数据源中删除的物理行数组
行删除前回调，return false代表取消掉本次删除行操作
afterOnCellMouseDown(event, value) {} // event点击事件 value单元格对应的位置信息
单元格点击回调(包括左键，右键，滚轮)
2.11 右键功能
contextMenu: false/true/[]/{items: {}} // 给右键配置功能
false 禁用ContextMenu插件(禁止掉右键功能)
true 启用ContextMenu插件(使用默认设置的右键功能)
['row_above', 'row_below'] 修改单个菜单选项('row_above'既是名字也是对应的功能)
{items: {}} 可以自定义每个键
{
items: {
row_above: {
name: '上面插入一行'
}, // 键名是插件原本就有(也有已经对应好的操作)
remove_row: {
name: '移除当前行'
}, // 键名是插件原本就有(也有已经对应好的操作)
insert_above_rows: {
name() {
const insertBox = document.getElementsByClassName('insert_input')[0]
if(insertBox) {
insertBox.addEventListener('keyup', (e) => {
console.log('e', e)
const event = e || window.event
const keyValue = event.which || event.keyCode || event.charCodes
if (keyValue === 13) {
const number = Number(event.target.value)
if (number !== NaN && number >= 0) {
this.alter('insert_row_above', window.clickRowIndex, number) // this指向hot-table alter方法允许你通过在指定位置添加或删除行个列来更改网格结构
const elMenu = document.getElementsByClassName('htMenu')[0]
elMenu.style.display = 'none' // 关闭右键的菜单栏
} else {
this.$message.warning('请输入正确的数字')
}
} // 监听回车事件
})
}
return `在上方插入<input class="insert_input" style="width: 40px; height: 20px;"></input>行`
},
isCommand: false, // 防止后续点击命令关闭菜单
// 自定义时renderer与name的区别
renderer(hot, wrapper, row, col, prop, itemValue){
// 参数里面的hot是指向菜单栏的，所以没办法调用alter方法
}
}, // 键名是自定义的(操作也是自定义的--插入多行)
}
}
2.11 定义某些单元格特殊的配置或逻辑
cells(roww, column, prop) {} // row单元格所在行 column单元格所在列 prop(如果data是二维数组的话，就是与column相同的数字；如果是对象数组的话，就是所在列的属性)
使用案例：
cells() {
const cellProperties = {
readOnly: false
}
return cellProperties
}
cells会出现重复渲染的问题
3. 其它用法
handsontable类似于el-table，对列表可以实现其它操作
3.1 hot-column类似于el-table的el-column
<hot-table :settings="hotSettings">
<hot-column :width="120" title="headerTitle" data="dataColumnProperty"></hot-column>
</hot-table>
这一块比较灵活，它可以单独设置某一些属性，像title、data这种，也可以像hot-table一样一个settings挂在所有的参数配置项，
还是单独设置一部分属性，再使用settings属性，hot-table也可以同样如此操作。
3.2 类似于插槽的操作
要将组件标记为Handsontable渲染器，只需为其添加一个hot-renderer属性，通常作为渲染函数的参数将被注入到渲染组件的$data对象中，有以下几个数据：
row 行索引
col 列索引
prop 如果data是二维数组的话，就是与column相同的数字；如果是对象数组的话，就是所在列的属性
TD 单元格HTML节点
cellProperties 已编辑单元格的cellProperties对象
例子：
<hot-table :settings="hotSettings">
<hot-column>
<div hot-renderer>类似于插槽操作</div>
</hot-column>
</hot-table>
特殊点：使用这种操作，并且想拿到数据(插槽数据),就不能直接将节点挂载上去，需要如下操作：
1. 定义一个组件实例
const CustomRenderer = {
template: '<div>{{ row }} {{ col }} {{ value }}</div>'
}
2. 将这个组件实例在components里声明
components: {
CustomRenderer
}
3. 使用
<hot-table :settings="hotSettings">
<hot-column>
<CustomRenderer hot-renderer>类似于插槽操作</CustomRenderer>
</hot-column>
</hot-table>
插槽数据会被自动注入到渲染组件的$data对象中
3.3 还可以通过配置项columns实现类似于插槽的操作
columns: [
{
renderer(instance, td, row, col, prop, value) {
const img = document.createElement('img')
img.src = value
td.innerText = ''
td.appendChild(img)
return td
}
}
]
4. 注意点
4.1 表头数据只能进行列合并，不能进行行合并
4.2 获取hot-table数据this.$refs.hotTable.hotInstance.getData() // 这个方法拿到的只是每个单元格里面的数据
所以这儿如果使用的是简单类型的表格，并且数据还是对象数组类型的，可以采用这种方法：
采用事先定义好的columns，然后使用this.$set(this.hotSettings, 'data', this.dataList)就可以在dataList中拿到实时变化的数据
4.3 如果一个单元格要区分单击事件和双击事件：
可以使用afterOnCellMouseDown(单元格点击回调)回调方法，再利用 节流 方法来分别执行
例子：
hotSettings: {
afterOnCellMouseDown: (event, val) => {
// event.button 判断是左键点击
if (event.button === 0) {
this.indexCount += 1 // indexCount是data中声明的变量，用来记录点击了几次
if (this.indexCount % 2 === 0) {
// 点击次数为双数
this.preTime = this.newTime // preTime是data中声明的变量，用来记录上一次点击的时间
this.newTime = Date.now() // preTime是data中声明的变量，用来记录当前点击的时间
} else {
this.newTime = Date.now()
}
// event事件 val坐标位置
console.log('val', val)
this.debouncedTip(event, val) // debouncedTip是data中声明的变量，用来绑定节流函数返回的结果(闭包)
}
}, // 单元格点击回调
}
在created中:
const throttle = (fn, wait) => {
let timer = null
return (event, val) => {
if (!this.preTime) {
this.preTime = 0
}
console.log('nowTime - preTime', this.newTime, this.preTime)
if (!timer) {
timer = setTimeout(() => {
if (this.newTime - this.preTime > wait) {
fn(event, val)
} // wait是在debouncedTip设置的节流时间，如果this.newTime - this.preTime < wait则判断定位单击
timer = null
}, 300)
}
}
} // 节流函数
this.debouncedTip = throttle((event, val) => {
// 要执行的操作
}, 300)
