x-data-spreadsheet使用教程、参数配置、数据格式及样式修改

官方文档

文档地址
效果如图:

一、使用npm下载

  npm install x-data-spreadsheet
  npm install xlsx

在html中

//overflow: hidden 按实际页面需求使用
<div ref="sheetContainer" id="x-spreadsheet-demo" style="overflow: hidden"></div>

在script中

import * as XLSX from "xlsx";
import Spreadsheet from "x-data-spreadsheet";
import zhCN from "x-data-spreadsheet/src/locale/zh-cn";
Spreadsheet.locale("zh-cn", zhCN);

const sheetContainer = ref(null);//标签的ref
const s = ref(null);
//rows是这个插件需要的数据渲染格式
const sampleData = {
	name: "sheet",
	rows: {
		//  editable: false 这个加在单元格里表示不能编辑
		0: { cells: { 0: { text: "title1" }, 1: { text: "title2" }, 2: { text: "title3" }, 3: { text: "title4" } } },
		1: { cells: { 0: { text: "测试1" }, 1: { text: "测试1" }, 2: { text: "测试1" }, 3: { text: "测试1" } } },
		2: { cells: { 0: { text: "测试1" }, 1: { text: "测试1" }, 2: { text: "测试1" }, 3: { text: "测试1" } } },
		3: { cells: { 0: { text: "测试1" }, 1: { text: "测试1" }, 2: { text: "测试1" }, 3: { text: "测试1" } } },
		4: { cells: { 0: { text: "测试1" }, 1: { text: "测试1" }, 2: { text: "测试1" }, 3: { text: "测试1" } } }
	}
};
const initTable = () => {
	if (s.value) {
		sheetContainer.value.innerHTML = ""; // 销毁上一个实例,这里是因为我需要在同一个dom加载多个表格
	}
	s.value = new Spreadsheet("#x-spreadsheet-demo")
		.loadData(sampleData)
		.change(data => {});
	s.value.validate();
};

// 引用 在需要生成表格的事件里面
	nextTick(() => {
		initTable();
	});

// 获取表格数据的方法

s.value.getData()[0].rows

二、使用CDN引入

(备注:此方法是因为当时需要改表头索引行和索引列的样式,但是没找修改的方法和css,就只能改源码了,文件未上传,此文件中#365569就是表头行列的背景颜色)
在index.html页面中引入:

<link rel="stylesheet" href="static/js/Spreadsheet/xspreadsheet.css" />

<script type="text/javascript" src="static/js/Spreadsheet/xspreadsheet.js"></script>

在项目中引入文件

html和上面使用npm下载的一样,下面有说到不同
在script中

const sheetContainer = ref(null);//标签的ref
const s = ref(null);
const initTable = () => {
	if (s.value) {
		sheetContainer.value.innerHTML = ""; // 销毁上一个实例,这里是因为我需要在同一个dom加载多个表格
	}
	// 不同
	s.value = x.spreadsheet("#x-spreadsheet-demo")
		.loadData({
			name: "shteet1",
			rows: spreadsheetData //不同 这里我加载的是自己处理后的数据
		})
		.change(data => {});
	s.value.validate();
};

// 引用 在需要生成表格的事件里面
	nextTick(() => {
		initTable();
	});

// 不同 获取表格数据的方法

s.value.getData().rows

以上就是最简单的方法,下面记录一些配置的修改

// x-data-spreadsheet有默认的options ,需要修改的话可以自己配置
let options = {
	showToolbar: false, // 顶部工具栏
	// showBottomBar: false, // 底部工具栏,用CDN引入是没生效
	// showGrid: true, // 显示网格线
	// showContextmenu: true, // 显示右键菜单
	view: {
		height: () => 600
	},
	col: {
		len: 12,//表格列数
		width: 100,
		indexWidth: 60,
		minWidth: 60
	},
	row: {
		len: 100,
		height: 30
	},
	style: {
		align: "center",
		bgcolor: "rgba(24, 39, 58, 0.44)", //有文字的单元格背景
		color: "#fff" //单元格文字颜色
	}
};

// 生成表格的时候加上options就可以了
	s.value = x.spreadsheet("#x-spreadsheet-demo", options)
		.loadData({
			name: "shteet" + sheetNameId.value,
			rows: spreadsheetData
		})
		.change(data => {});

在style中可以修改样式,表头索引行列没找到

.x-spreadsheet {
	background: rgba($color: #365569, $alpha: 0.1);
	.x-spreadsheet-editor-area {
		/* 输入框 */
		textarea {
			background-color: #365569;
			color: #fff;
		}
	}
}

三、其他
数据转换方法

//原始数据
[
    [
        "地区",
        "数字"
    ],
    [
        "成都",
        "10000"
    ],
    [
        "自贡",
        "500"
    ],
    [
        "宜宾",
        "2092"
    ],
    [
        "泸州",
        "1062"
    ]
]

//转换方法
    ConvertData(data) {
      var obj = {};
      data.map((item, index) => {
        obj[index] = {};
        obj[index]["cells"] = {};
        item.map((ele, i) => {
          obj[index]["cells"][i] = { text: ele + "" };
        });
      });
      return obj;
    },

//修改为
{
    "0": {
        "cells": {
            "0": {
                "text": "地区"
            },
            "1": {
                "text": "数字"
            }
        }
    },
    "1": {
        "cells": {
            "0": {
                "text": "成都"
            },
            "1": {
                "text": "10000"
            }
        }
    },
    "2": {
        "cells": {
            "0": {
                "text": "自贡"
            },
            "1": {
                "text": "3904"
            }
        }
    },
    "3": {
        "cells": {
            "0": {
                "text": "宜宾"
            },
            "1": {
                "text": "2092"
            }
        }
    },
    "4": {
        "cells": {
            "0": {
                "text": "泸州"
            },
            "1": {
                "text": "1062"
            }
        }
    }
}