Vue-Luckysheet的使用方法

引用地址：https://blog.csdn.net/Lyy1991Wdl/article/details/124175868

配置文档 · API · 教程：快速上手 | Luckysheet文档

第一步：

定义Luckysheet组件：组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用，因此，先定义好可重复使用的Luckysheet组件。代码如下：

<template>
  <div class="hello">
    <div id="luckysheet" class="luckysheet-content"></div>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  mounted() {
    // In some cases, you need to use $nextTick
    // this.$nextTick(() => {
    $(function () {
      luckysheet.create({
        container: "luckysheet", // 设定DOM容器的id
        title: "Luckysheet Demo", // 设定表格名称
        lang: "zh", // 设定表格语言
        plugins: ["chart"],
        data: [
          {
            name: "", //工作表名称
            color: "#eee333", //工作表(工作表名称底部边框线)颜色
            index: 0, //工作表索引(新增一个工作表时该值是一个随机字符串)
            status: 1, //激活状态
            order: 0, //工作表的下标
            hide: 0, //是否隐藏
            row: 36, //行数
            column: 10, //列数
            defaultRowHeight: 28, //自定义行高,单位px
            defaultColWidth: 100, //自定义列宽,单位px
            celldata: [], //初始化使用的单元格数据,r代表行，c代表列，v代表该单元格的值，最后展示的是value1，value2
            config: {
              merge: {}, //合并单元格
              rowlen: {}, //表格行高
              columnlen: {}, //表格列宽
              rowhidden: {}, //隐藏行
              colhidden: {}, //隐藏列
              borderInfo: {}, //边框
              authority: {}, //工作表保护
            },
 
            scrollLeft: 0, //左右滚动条位置
            scrollTop: 0, //上下滚动条位置
            luckysheet_select_save: [], //选中的区域
            calcChain: [], //公式链
            isPivotTable: false, //是否数据透视表
            pivotTable: {}, //数据透视表设置
            filter_select: {}, //筛选范围
            filter: null, //筛选配置
            luckysheet_alternateformat_save: [], //交替颜色
            luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
            luckysheet_conditionformat_save: {}, //条件格式
            frozen: {}, //冻结行列配置
            chart: [], //图表配置
            zoomRatio: 1, // 缩放比例
            image: [], //图片
            showGridLines: 1, //是否显示网格线
            dataVerification: {}, //数据验证配置
          },
        ],
        showtoolbar: false,
        showtoolbarConfig: {
          undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
          paintFormat: false, //格式刷
          currencyFormat: false, //货币格式
          percentageFormat: false, //百分比格式
          numberDecrease: false, // '减少小数位数'
          numberIncrease: false, // '增加小数位数
          moreFormats: false, // '更多格式'
          font: false, // '字体'
          fontSize: false, // '字号大小'
          bold: false, // '粗体 (Ctrl+B)'
          italic: false, // '斜体 (Ctrl+I)'
          strikethrough: false, // '删除线 (Alt+Shift+5)'
          underline: false, // '下划线 (Alt+Shift+6)'
          textColor: false, // '文本颜色'
          fillColor: false, // '单元格颜色'
          border: false, // '边框'
          mergeCell: false, // '合并单元格'
          horizontalAlignMode: false, // '水平对齐方式'
          verticalAlignMode: false, // '垂直对齐方式'
          textWrapMode: false, // '换行方式'
          textRotateMode: false, // '文本旋转方式'
          image: false, // '插入图片'
          link: false, // '插入链接'
          chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
          postil: false, //'批注'
          pivotTable: false, //'数据透视表'
          function: false, // '公式'
          frozenMode: false, // '冻结方式'
          sortAndFilter: false, // '排序和筛选'
          conditionalFormat: false, // '条件格式'
          dataVerification: false, // '数据验证'
          splitColumn: false, // '分列'
          screenshot: false, // '截图'
          findAndReplace: false, // '查找替换'
          protection: false, // '工作表保护'
          print: false, // '打印'
        },
        showsheetbar: false, //是否显示底部sheet页按钮
        showsheetbarConfig: {
          add: false, //新增sheet
          menu: false, //sheet管理菜单
          sheet: false, //sheet页显示
        },
        showinfobar: false, //是否显示顶部信息栏
        showstatisticBar: false, //是否显示底部计数栏
        showstatisticBarConfig: {
          count: false, // 计数栏
          view: false, // 打印视图
          zoom: false, // 缩放
        },
        sheetFormulaBar: false, //是否显示公式栏
        allowCopy: false, //是否允许拷贝
        enableAddRow: true, //允许添加行
      });
    });
 
    // });
  },
};
</script>
<style lang="css" scoped>
.luckysheet-content {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  height: 500px;
  left: 0px;
  top: 40px;
  bottom: 0px;
}
</style>
  • 可实现复制粘贴，excel的单元格下拉等表格操作，重点在于创建luckysheet实例时对实例属性的配置。

第二步：

引用组件，在父组件中注册并引用组件。先import 组件，再components 中注册，最后在以标签的形式引用组件。代码如下：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'
 
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第三步：

父组件将接口返回的数据传递给子组件，子组件获取数据渲染数据。代码如下：

  • 父组件中获取数据并绑定参数传值。
<template>
  <div id="app">
    <HelloWorld v-bind:sheetParams="sheetParams" />
  </div>
</template>
 
<script>
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      sheetParams: {
        excelHeader: ["姓名", "年龄", "性别"],
        excelData: {
          姓名: ["张三", "赵兰", "李四"],
          年龄: ["18", "17", "20"],
          性别: ["男", "女", "男"],
        },
      },
    };
  },
};
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  • 子组件获取父组件传递的数据，渲染数据。
<template>
  <div class="hello">
    <div id="luckysheet" class="luckysheet-content"></div>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  props: {
    sheetParams: {},
  },
  data() {
    return {
      luckysheetOption: {
          container: "luckysheet", // 设定DOM容器的id
          title: "Luckysheet Demo", // 设定表格名称
          lang: "zh", // 设定表格语言
          plugins: ["chart"],
          data: [
            {
              name: "", //工作表名称
              color: "#eee333", //工作表(工作表名称底部边框线)颜色
              index: 0, //工作表索引(新增一个工作表时该值是一个随机字符串)
              status: 1, //激活状态
              order: 0, //工作表的下标
              hide: 0, //是否隐藏
              row: 36, //行数
              column: 10, //列数
              defaultRowHeight: 28, //自定义行高,单位px
              defaultColWidth: 100, //自定义列宽,单位px
              celldata: [], //初始化使用的单元格数据,r代表行，c代表列，v代表该单元格的值，最后展示的是value1，value2
              config: {
                merge: {}, //合并单元格
                rowlen: {}, //表格行高
                columnlen: {}, //表格列宽
                rowhidden: {}, //隐藏行
                colhidden: {}, //隐藏列
                borderInfo: {}, //边框
                authority: {}, //工作表保护
              },
 
              scrollLeft: 0, //左右滚动条位置
              scrollTop: 0, //上下滚动条位置
              luckysheet_select_save: [], //选中的区域
              calcChain: [], //公式链
              isPivotTable: false, //是否数据透视表
              pivotTable: {}, //数据透视表设置
              filter_select: {}, //筛选范围
              filter: null, //筛选配置
              luckysheet_alternateformat_save: [], //交替颜色
              luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
              luckysheet_conditionformat_save: {}, //条件格式
              frozen: {}, //冻结行列配置
              chart: [], //图表配置
              zoomRatio: 1, // 缩放比例
              image: [], //图片
              showGridLines: 1, //是否显示网格线
              dataVerification: {}, //数据验证配置
            },
          ],
          showtoolbar: false,
          showtoolbarConfig: {
            undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
            paintFormat: false, //格式刷
            currencyFormat: false, //货币格式
            percentageFormat: false, //百分比格式
            numberDecrease: false, // '减少小数位数'
            numberIncrease: false, // '增加小数位数
            moreFormats: false, // '更多格式'
            font: false, // '字体'
            fontSize: false, // '字号大小'
            bold: false, // '粗体 (Ctrl+B)'
            italic: false, // '斜体 (Ctrl+I)'
            strikethrough: false, // '删除线 (Alt+Shift+5)'
            underline: false, // '下划线 (Alt+Shift+6)'
            textColor: false, // '文本颜色'
            fillColor: false, // '单元格颜色'
            border: false, // '边框'
            mergeCell: false, // '合并单元格'
            horizontalAlignMode: false, // '水平对齐方式'
            verticalAlignMode: false, // '垂直对齐方式'
            textWrapMode: false, // '换行方式'
            textRotateMode: false, // '文本旋转方式'
            image: false, // '插入图片'
            link: false, // '插入链接'
            chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
            postil: false, //'批注'
            pivotTable: false, //'数据透视表'
            function: false, // '公式'
            frozenMode: false, // '冻结方式'
            sortAndFilter: false, // '排序和筛选'
            conditionalFormat: false, // '条件格式'
            dataVerification: false, // '数据验证'
            splitColumn: false, // '分列'
            screenshot: false, // '截图'
            findAndReplace: false, // '查找替换'
            protection: false, // '工作表保护'
            print: false, // '打印'
          },
          showsheetbar: false, //是否显示底部sheet页按钮
          showsheetbarConfig: {
            add: false, //新增sheet
            menu: false, //sheet管理菜单
            sheet: false, //sheet页显示
          },
          showinfobar: false, //是否显示顶部信息栏
          showstatisticBar: false, //是否显示底部计数栏
          showstatisticBarConfig: {
            count: false, // 计数栏
            view: false, // 打印视图
            zoom: false, // 缩放
          },
          sheetFormulaBar: false, //是否显示公式栏
          allowCopy: false, //是否允许拷贝
          enableAddRow: true, //允许添加行
        }
    };
  },
  created() {},
  mounted() {
    this.initLuckysheet(this.sheetParams);
  },
  methods: {
    initLuckysheet(data) {
      var _this = this;//注意这里要重新指定下this对象。
      
      // In some cases, you need to use $nextTick
      // this.$nextTick(() => {
      $(function () {
        if (data.excelHeader.length != 0 && JSON.stringify(data.excelData) != "{}") {
          _this.luckysheetOption.hook = {
            workbookCreateAfter: function () {
              _this.dataRendSheet(data.excelHeader, data.excelData);
            },
          };
        }
        luckysheet.create(_this.luckysheetOption);
      });
 
      // });
    },
    /**接口数据回显 */
    dataRendSheet(excelHeader, excelData) {
      //回显表格表头，第一行
      if (excelHeader.length > 0) {
        excelHeader.forEach((item1, index1) => {
          luckysheet.setCellValue(0, index1, item1);
          //普通回显数据
          if (JSON.stringify(excelData) != "{}") {
            excelData[item1].forEach((item2, index2) => {
              var row = index2 + 1;
              luckysheet.setCellValue(row, index1, item2);
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="css" scoped>
.luckysheet-content {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  height: 500px;
  left: 0px;
  top: 40px;
  bottom: 0px;
}
</style>
  • 注意两点，第一数据格式，就是对象数组的转换，没什么难度；第二用到了Luckysheet的钩子函数，钩子函数的用法是在配置对象加一个hook对象，并给hook对象添加一个workbookCreateAfter方法，在工作簿创建好之后就执行这个函数的渲染数据的逻辑。

第四步：

父组件获取子组件修改后的数据。父组件的布局和样式有调整，以对话框的形式来引用组件，点击按钮，获取数据。代码如下：

<template>
  <div id="app">
    <div>
      <el-dialog
        :title="luckysheetName"
        :visible.sync="centerDialogVisible"
        v-if="centerDialogVisible"
        width="50%"
        :fullscreen="fullscreen"
        :lock-scroll="lockScroll"
        :close-on-click-modal="closeOnClickModal"
        :close-on-press-escape="closeOnPressEscape"
      >
        <div style="width: 100%; height: 500px; position: relative">
          <!-- luckysheet 数据编辑组件引用 -->
         <HelloWorld
          ref="luckysheetRef"
          v-on:getLuckySheetData="receive"
          v-bind:sheetParams="sheetParams"
        />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleToClose">取 消</el-button>
          <el-button type="primary" @click="saveSheetData">确 定</el-button>
        </div>
      </el-dialog>
      
    </div>
  </div>
</template>
 
<script>
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      centerDialogVisible: true,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      fullscreen: false,
      lockScroll: false,
      luckysheetName: "luckysheet数据编辑",
 
      sheetParams: {
        excelHeader: ["姓名", "年龄", "性别"],
        excelData: {
          姓名: ["张三", "赵兰", "李四"],
          年龄: ["18", "17", "20"],
          性别: ["男", "女", "男"],
        },
      },
      luckySheetData: {
        excelHeader: [],
        excelData: {},
      },
    };
  },
  methods: {
    saveSheetData() {
      var _this = this;
      _this.$refs.luckysheetRef.getSheetData(); //调用子组件获取sheet数据
      console.log(JSON.stringify(_this.luckySheetData));
      // document.getElementById("luckysheet-input-box").style.zIndex = "-1";
      // document.getElementsByClassName("luckysheet-cell-input").innerHTML = "";
      // _this.dialogFormVisible = false; //关闭对话框
    },
    //luckySheet数据接收
    receive: function (sheetTitle, commonData) {
      var _this = this;
      _this.luckySheetData.excelHeader = sheetTitle;
      _this.luckySheetData.excelData = commonData;
    },
    handleToClose() {
      this.centerDialogVisible = false;
    }
  },
};
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
 
</style>

点击确定按钮，获取的数据格式为：

{"excelHeader":["姓名","年龄","性别"],"excelData":[{"姓名":"张三","年龄":18,"性别":"男"},{"姓名":"赵兰","年龄":17,"性别":"女"},{"姓名":"李四","年龄":20,"性别":"男"}]}

  • 注意一：如果想每次打开对话框都重新加载数据和渲染画布，则在对话框加上两行代码：
:visible.sync="centerDialogVisible"；v-if="centerDialogVisible"

  • 注意二：luckysheet文件的引用路径一定要对


    47964691b1754c5cada28fba740c7a36.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345