vue3使用handsontable

1.安装

npm install handsontable @handsontable/vue3

2.使用

<template>	
		
<hot-table width="100%" height="500" :settings="settings" ref="hotTableComponent"></hot-table>
			
</template>

<script lang="ts">

import { HotTable } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css';//表格样式
import { registerAllModules } from 'handsontable/registry'; // 在线编辑样式
import 'handsontable/languages/zh-CN'; //汉语包
registerAllModules();

import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
import { registerPlugin, UndoRedo } from 'handsontable/plugins';
registerCellType(NumericCellType);
registerPlugin(UndoRedo);



export default {
	components: { HotTable },

     

	setup() { 



        //定义handsontable的ref
		const hotTableComponent = ref(null);
        //vue3的获取核心方法在hotInstance中
		let  a= hotTableComponent.value.hotInstance.getSourceData(); //获取源数据 （对                          象数组或数组的数组）
		let b = hotTableComponent.value.hotInstance.getData();  //获取数据（数组的数组）
		 
         //可以打印一下这两个方法返回的数据  看自己需要那种数据

        //vue2获取handsontable的数据方法   this.$refs.hotTableComponent.getData();

		
		let state = reactive({
			

			settings: {
				language: 'zh-CN', // 官方汉化
				licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明
				
             //colHeaders     
	         colHeaders: [
		             "病人姓名",
		             "病人身份证号",
		             "病人类型"
	                  ],
                
            //columns        
	        columns: [

              {
               data: "病人姓名",
			   readOnly: false,
			   type: "text",
			   dateFormat: null,
			   source: null,
			   strict: false,
		 	   numericFormat: null
		      },
		      {
               data: "病人身份证号",
			   readOnly: false,
			   type: "text",
			   dateFormat: null,
			   source: null,
			   strict: false,
		 	   numericFormat: null
		      },
		       {
			   data: "病人类型",
			   readOnly: false,
			   type: "text",
			   dateFormat: null,
			   source: null,
			   strict: false,
		 	   numericFormat: null
		      }
	            ],
           //data
	        data: [
		     {
			 "病人姓名": "测试",
			 "病人身份证号": "123456789",
			 "病人类型": "贫困户"
		     },
		     {
			   "病人姓名": "张三",
			   "病人身份证号": "369258147",
			   "病人类型": "贫困户"
		      }
	          ],
				currentRowClassName: 'currentRow', // 突出显示行
				currentColClassName: 'currentCol', // 突出显示列
				minSpareRows: 2, //行留白
				autoWrapRow: false, //自动换行
				minRows: 2100,
				trimWhitespace: false, //去除空格
				rowHeaderWidth: 100, //单元格宽度
				stretchH: 'all',
				renderAllRows: false,
				rowHeaders: true, // 行标题   布尔值 / 数组/  函数
				formulas: false, //公式
				copyable: true, // 允许键盘复制
				wordWrap: false, // 自动换行
				copyPaste: true, //复制粘贴
				filters: false, //允许通过内置组件或API过滤表数据
				search: false,
				fixedColumnsLeft: 0, // 固定左边列数
				fixedRowsTop: 0, // 固定上边列数
				columnSorting: true, // 排序
				contextMenu: true, //右键菜单
			},
			
		});

		
		return {
			...toRefs(state),
            hotTableComponent,
			
		};
	},
};
</script>

 效果如下：

 

注意点：

1.底部有授权码提示  想要去掉 在settings中添加下面这个属性可以去掉：

licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明      settings的属性

2.安装的依赖不同：

    vue3:  npm install handsontable @handsontable/vue3

    vue2:   npm install handsontable @handsontable/vue

3.获取handsontable数据方法不用：

vue3  :  

            hotInstance.getSourceData()   //获取源数据 （对象数组或数组的数组）

           hotInstance. getData()    //获取数据 （数组的数组）

vue2:   getData()

具体可以参考官方文档：Core - API Reference - Handsontable Documentation

 

参照文章链接：

vue3+handsontable实现表格编辑导出_Linceo的博客-CSDN博客_handsontable官网