x-spreadsheet vue3页面使用办法

1，安装 x-spreadsheet ;
2,引入
import Spreadsheet from 'x-data-spreadsheet'；
import 'x-data-spreadsheet/dist/locale/zh-cn';
Spreadsheet.locale('zh-cn', (window.x_spreadsheet as any).$messages['zh-cn']);//解析成中文
3，页面使用
html
<div ref="spreadsheet" class="x-spreadsheet-style" id="x-spreadsheet"></div>
js

自己定义相关变量及在onMounted里面调用 init() 方法

const init = () => {
	// Spreadsheet.locale("zh-cn", zhCN);
	state.spreadsheetData = new Spreadsheet(spreadsheet.value, {
		// 修改x-spreadsheet默认配置
		mode: 'edit', // edit | read
		showToolbar: true, //上面编辑栏是否显示
		showGrid: true,
		showContextmenu: true, //右键是否显示
		showBottomBar: false, //底部工具栏
        // defaultSelectedCell: { row: 1, col: 2 },
		view: {
			height: () => 750,
			width: () => 1700,
			// width: () => spreadsheet.value.clientWidth,

			// height: () => spreadsheet.value.offsetHeight,

			// width: () => spreadsheet.value.offsetWidth,

			// 设置表格宽高

			// height: () => 400,

			// width: () => 1600,
		},

		row: {
			len: 50, //行

			height: 25,
		},

		col: {
			len: 16, //列

			width: 100,

			indexWidth: 60,

			minWidth: 60,
		},

		style: {
			bgcolor: '#ffffff',

			align: 'left',

			valign: 'middle',

			textwrap: false,

			strike: false,

			underline: false,

			color: '#0a0a0a',

			font: {
				name: 'Helvetica',

				size: 10,

				bold: false,

				italic: false,
			},
		},

	}).loadData(state.excelData)
       
	.change((data) => {
		// 列表数据改变时触发
		// console.log(data);
	    state.excelData = data;
	});
	setTimeout(() => {
		// console.log(state.spreadsheetData.cell(0, 0))
		//state.spreadsheetData.cell(0, 0) 获取单元格值，此处默认获取第一格数据
		state.cell = state.spreadsheetData.cell(0, 0);
    
	}, 500);
   
	//表格点击事件
	state.spreadsheetData.on('cell-selected', (cell: any, ri: any, ci: any) => {
		// console.log(cell, ri, ci, 123);
		state.cell = cell;
		state.ri = ri; //行
		state.ci = ci; //列
		state.muluDir = '';

		if (state.cell?.tableList && state.cell?.tableList.bindId != '') {
			state.muluDir = state.cell.tableList.muluDir;
		}
	});
};