封装 luckysheet 组件

一维数组和二维数组

根据 luckysheet.getAllSheets() 获得所有的数据表数组，其中：

1. cellData 是 一维数组
2. 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>

参考链接

C 多维数组