安装handsontable
npm install handsontable @handsontable/vue3
项目引入handesontable
// 引入组件
import { HotTable } from '@handsontable/vue3'
// 引入相关样式
import 'handsontable/dist/handsontable.full.css'
// 引入registerAllModules方法
import { registerAllModules } from 'handsontable/registry';
// 注册所有的 Handsontable 模块
registerAllModules();
演示
配置项介绍
const hotSettings = reactive({
// data存储数据
data: [
{
age: 30,
id: '1',
address: 'New York No. 1 Lake Park'
},
{ // 标记这一行为特殊行
id: '总结',
age: '人生得意须尽欢',
address: ''
}
],
columns: [
{
title: 'id',
data: 'id', // 映射数据（跟data中的参数名称一致）
width: 140, // 列宽
className: 'htCenter', // 设置表格居中 htCenter水平方向居中htMiddle垂直方向居中
readOnly: true, // 设置单元格只读
},
{
title: '年龄',
data: 'age', // 映射数据（跟data中的参数名称一致）
width: 140, // 列宽
className: 'htCenter htMiddle', // 设置表格居中
readOnly: true // 只读
},
{
title: "地址",
data: 'address', // 映射数据（跟data中的参数名称一致）
width: 140, // 列宽
className: 'htCenter htMiddle', // 设置表格居中
readOnly: true // 只读
},
{
title: "操作",
data: '', // 操作列没有对应的数据字段
renderer: 'buttonRenderer', // 使用自定义渲染器
width: 140, // 列宽
className: 'htCenter htMiddle', // 设置表格居中
readOnly:true,
}
],
// 单元格合并row:第几行开始合并(索引从0开始),col:第几列开始合并(索引从0开始),rowspan:合并几行,colspan:合并几列
mergeCells: [
{ row: 3, col: 1, rowspan: 1, colspan: 2 },
........
],
height: 'auto', // 表格高度自动,注意这里是表格的高度,不是单元格的高度
rowHeights: 30, // 行高,也可以理解为单元格的高度
fixedColumnsLeft: 1, // 固定左侧的列
manualRowMove: true, // 可以拖拽改变行的位置
manualColumnMove: true, // 可以拖拽移动列的位置
readOnly: false, // 全局配置可读属性
rowHeaders: true, // 显示行头,即表格左侧的行号或者自定义内容,这里如果需要自定义可以有数组和方法两种值
licenseKey: 'eeedf-cec76-bb25f-cad45-1e4b0', // 密钥,没有密钥则会有版权限制
});
