一维数组和二维数组
根据 luckysheet.getAllSheets() 获得所有的数据表数组，其中：
cellData是 一维数组data是二维数组
代码
父组件
<template>
<div class="app-container" v-hasPermi="['proMana:directory:detail:proHome']">
<!-- 项目首页, projectId: {{ projectId }}, menuProjectId:{{ menuProjectId }}, menuProjectName: {{menuProjectName}} -->
<el-button @click="getLuckySheetData">保存</el-button>
<lucky-sheet
ref="luckySheetRef"
:sheet-params="luckysheetData"
@get-luckysheet-data="receiveSheetData"
/>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import LuckySheet from "@/components/LuckySheet/index.vue";
export default {
name: "ProIndex",
components: {
LuckySheet,
},
computed: {
projectId() {
return this.$route.query.projectId;
},
...mapGetters(["menuProjectId", "menuProjectName"]),
},
data() {
return {
luckysheetData: {
excelHeader: [],
excelData: {},
},
};
},
created() {
this.loadSheetData();
},
methods: {
// 加载表数据
loadSheetData() {
this.luckysheetData = {
excelHeader: ["姓名", "年龄", "性别"],
excelData: {
姓名: ["张三", "赵兰", "李四"],
年龄: ["18", "17", "20"],
性别: ["男", "女", "男"],
},
};
},
// 获取表数据
getLuckySheetData() {
this.$refs.luckySheetRef.getSheetData();
console.log(this.luckysheetData);
},
// 接收修改后的表数据
receiveSheetData({ excelHeader, excelData }) {
this.$set(this.luckysheetData, "excelHeader", excelHeader);
this.$set(this.luckysheetData, "excelData", excelData);
},
},
};
</script>
<style lang="scss" scoped></style>
子组件
<template>
<div class="lucky-sheet">
<div id="luckysheet" class="luckysheet-content"></div>
</div>
</template>
<script>
export default {
name: "LuckySheet",
props: {
sheetParams: {
type: Object,
default: () => {},
},
},
data() {
return {
luckysheetOption: {
container: "luckysheet", //luckysheet为容器id
title: "test",
lang: "zh",
// plugins: ["chart"],
showtoolbar: false,
showsheetbar: false,
showinfobar: false,
showstatisticBar: false,
},
};
},
mounted() {
this.initLuckysheet(this.sheetParams);
},
methods: {
// 初始化
initLuckysheet(data) {
var that = this;
const { excelHeader, excelData } = data;
if (excelHeader.length !== 0 && JSON.stringify(excelData) != "{}") {
// luckysheet 钩子函数
that.luckysheetOption.hook = {
workbookCreateAfter: function () {
that.dataRendSheet(excelHeader, excelData);
},
};
}
luckysheet.create(that.luckysheetOption);
},
// 回显数据
dataRendSheet(excelHeader, excelData) {
//回显表格表头，第一行
if (!excelHeader.length) return;
excelHeader.forEach((item1, index1) => {
luckysheet.setCellValue(0, index1, item1);
//普通回显数据
if (JSON.stringify(excelData) == "{}") return;
excelData[item1].forEach((item2, index2) => {
var row = index2 + 1;
luckysheet.setCellValue(row, index1, item2);
});
});
},
// 获取表格数据
getSheetData() {
luckysheet.exitEditMode(); // 退出编辑模式
// 转换数据
const cellData = luckysheet.getAllSheets()[0].celldata; // 第一个sheet的一维数组
// 表头数组
const excelHeader = cellData
.filter((item1) => item1.r === 0)
.map((ele) => ele.v.m || null);
// 表格数据
let excelData = {};
excelHeader.forEach((item2, index2) => {
let arr = cellData
.filter((item3) => item3.c === index2)
.map((e) => e.v.m || null);
arr.shift();
excelData[item2] = arr;
});
this.$emit("get-luckysheet-data", { excelHeader, excelData });
},
},
};
</script>
<style lang="scss" scoped>
.luckysheet-content {
margin: 0px;
padding: 0px;
position: absolute;
width: 100%;
height: 90%;
left: 0px;
top: 60px;
}
</style>