Vue-Luckysheet的使用方法

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

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

第一步：

定義Luckysheet組件：組件系統(tǒng)是 Vue 的另一個重要概念，因為它是一種抽象即纲，允許我們使用小型逾滥、獨立和通骋确兀可復用的組件構(gòu)建大型應用龄减，因此惯悠，先定義好可重復使用的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, //激活狀態(tài)
            order: 0, //工作表的下標
            hide: 0, //是否隱藏
            row: 36, //行數(shù)
            column: 10, //列數(shù)
            defaultRowHeight: 28, //自定義行高,單位px
            defaultColWidth: 100, //自定義列寬,單位px
            celldata: [], //初始化使用的單元格數(shù)據(jù),r代表行尖奔，c代表列茬底，v代表該單元格的值沪悲，最后展示的是value1，value2
            config: {
              merge: {}, //合并單元格
              rowlen: {}, //表格行高
              columnlen: {}, //表格列寬
              rowhidden: {}, //隱藏行
              colhidden: {}, //隱藏列
              borderInfo: {}, //邊框
              authority: {}, //工作表保護
            },
 
            scrollLeft: 0, //左右滾動條位置
            scrollTop: 0, //上下滾動條位置
            luckysheet_select_save: [], //選中的區(qū)域
            calcChain: [], //公式鏈
            isPivotTable: false, //是否數(shù)據(jù)透視表
            pivotTable: {}, //數(shù)據(jù)透視表設置
            filter_select: {}, //篩選范圍
            filter: null, //篩選配置
            luckysheet_alternateformat_save: [], //交替顏色
            luckysheet_alternateformat_save_modelCustom: [], //自定義交替顏色
            luckysheet_conditionformat_save: {}, //條件格式
            frozen: {}, //凍結(jié)行列配置
            chart: [], //圖表配置
            zoomRatio: 1, // 縮放比例
            image: [], //圖片
            showGridLines: 1, //是否顯示網(wǎng)格線
            dataVerification: {}, //數(shù)據(jù)驗證配置
          },
        ],
        showtoolbar: false,
        showtoolbarConfig: {
          undoRedo: false, //撤銷重做阱表，注意撤消重做是兩個按鈕殿如，由這一個配置決定顯示還是隱藏
          paintFormat: false, //格式刷
          currencyFormat: false, //貨幣格式
          percentageFormat: false, //百分比格式
          numberDecrease: false, // '減少小數(shù)位數(shù)'
          numberIncrease: false, // '增加小數(shù)位數(shù)
          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, // '文本旋轉(zhuǎn)方式'
          image: false, // '插入圖片'
          link: false, // '插入鏈接'
          chart: false, // '圖表'（圖標隱藏，但是如果配置了chart插件最爬，右擊仍然可以新建圖表）
          postil: false, //'批注'
          pivotTable: false, //'數(shù)據(jù)透視表'
          function: false, // '公式'
          frozenMode: false, // '凍結(jié)方式'
          sortAndFilter: false, // '排序和篩選'
          conditionalFormat: false, // '條件格式'
          dataVerification: false, // '數(shù)據(jù)驗證'
          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, //是否顯示底部計數(shù)欄
        showstatisticBarConfig: {
          count: false, // 計數(shù)欄
          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>
  • 可實現(xiàn)復制粘貼涉馁，excel的單元格下拉等表格操作，重點在于創(chuàng)建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>

第三步：

父組件將接口返回的數(shù)據(jù)傳遞給子組件互艾，子組件獲取數(shù)據(jù)渲染數(shù)據(jù)试和。代碼如下：

  • 父組件中獲取數(shù)據(jù)并綁定參數(shù)傳值。
<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>
  • 子組件獲取父組件傳遞的數(shù)據(jù)纫普，渲染數(shù)據(jù)阅悍。
<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, //激活狀態(tài)
              order: 0, //工作表的下標
              hide: 0, //是否隱藏
              row: 36, //行數(shù)
              column: 10, //列數(shù)
              defaultRowHeight: 28, //自定義行高,單位px
              defaultColWidth: 100, //自定義列寬,單位px
              celldata: [], //初始化使用的單元格數(shù)據(jù),r代表行，c代表列昨稼，v代表該單元格的值节视，最后展示的是value1，value2
              config: {
                merge: {}, //合并單元格
                rowlen: {}, //表格行高
                columnlen: {}, //表格列寬
                rowhidden: {}, //隱藏行
                colhidden: {}, //隱藏列
                borderInfo: {}, //邊框
                authority: {}, //工作表保護
              },
 
              scrollLeft: 0, //左右滾動條位置
              scrollTop: 0, //上下滾動條位置
              luckysheet_select_save: [], //選中的區(qū)域
              calcChain: [], //公式鏈
              isPivotTable: false, //是否數(shù)據(jù)透視表
              pivotTable: {}, //數(shù)據(jù)透視表設置
              filter_select: {}, //篩選范圍
              filter: null, //篩選配置
              luckysheet_alternateformat_save: [], //交替顏色
              luckysheet_alternateformat_save_modelCustom: [], //自定義交替顏色
              luckysheet_conditionformat_save: {}, //條件格式
              frozen: {}, //凍結(jié)行列配置
              chart: [], //圖表配置
              zoomRatio: 1, // 縮放比例
              image: [], //圖片
              showGridLines: 1, //是否顯示網(wǎng)格線
              dataVerification: {}, //數(shù)據(jù)驗證配置
            },
          ],
          showtoolbar: false,
          showtoolbarConfig: {
            undoRedo: false, //撤銷重做假栓，注意撤消重做是兩個按鈕肴茄，由這一個配置決定顯示還是隱藏
            paintFormat: false, //格式刷
            currencyFormat: false, //貨幣格式
            percentageFormat: false, //百分比格式
            numberDecrease: false, // '減少小數(shù)位數(shù)'
            numberIncrease: false, // '增加小數(shù)位數(shù)
            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, // '文本旋轉(zhuǎn)方式'
            image: false, // '插入圖片'
            link: false, // '插入鏈接'
            chart: false, // '圖表'（圖標隱藏，但是如果配置了chart插件但指，右擊仍然可以新建圖表）
            postil: false, //'批注'
            pivotTable: false, //'數(shù)據(jù)透視表'
            function: false, // '公式'
            frozenMode: false, // '凍結(jié)方式'
            sortAndFilter: false, // '排序和篩選'
            conditionalFormat: false, // '條件格式'
            dataVerification: false, // '數(shù)據(jù)驗證'
            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, //是否顯示底部計數(shù)欄
          showstatisticBarConfig: {
            count: false, // 計數(shù)欄
            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);
      });
 
      // });
    },
    /**接口數(shù)據(jù)回顯 */
    dataRendSheet(excelHeader, excelData) {
      //回顯表格表頭抗楔，第一行
      if (excelHeader.length > 0) {
        excelHeader.forEach((item1, index1) => {
          luckysheet.setCellValue(0, index1, item1);
          //普通回顯數(shù)據(jù)
          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>
  • 注意兩點棋凳，第一數(shù)據(jù)格式，就是對象數(shù)組的轉(zhuǎn)換连躏，沒什么難度剩岳；第二用到了Luckysheet的鉤子函數(shù)，鉤子函數(shù)的用法是在配置對象加一個hook對象入热，并給hook對象添加一個workbookCreateAfter方法拍棕，在工作簿創(chuàng)建好之后就執(zhí)行這個函數(shù)的渲染數(shù)據(jù)的邏輯晓铆。

第四步：

父組件獲取子組件修改后的數(shù)據(jù)。父組件的布局和樣式有調(diào)整绰播，以對話框的形式來引用組件骄噪，點擊按鈕，獲取數(shù)據(jù)蠢箩。代碼如下：

<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 數(shù)據(jù)編輯組件引用 -->
         <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數(shù)據(jù)編輯",
 
      sheetParams: {
        excelHeader: ["姓名", "年齡", "性別"],
        excelData: {
          姓名: ["張三", "趙蘭", "李四"],
          年齡: ["18", "17", "20"],
          性別: ["男", "女", "男"],
        },
      },
      luckySheetData: {
        excelHeader: [],
        excelData: {},
      },
    };
  },
  methods: {
    saveSheetData() {
      var _this = this;
      _this.$refs.luckysheetRef.getSheetData(); //調(diào)用子組件獲取sheet數(shù)據(jù)
      console.log(JSON.stringify(_this.luckySheetData));
      // document.getElementById("luckysheet-input-box").style.zIndex = "-1";
      // document.getElementsByClassName("luckysheet-cell-input").innerHTML = "";
      // _this.dialogFormVisible = false; //關(guān)閉對話框
    },
    //luckySheet數(shù)據(jù)接收
    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>

點擊確定按鈕链蕊，獲取的數(shù)據(jù)格式為：

{"excelHeader":["姓名","年齡","性別"],"excelData":[{"姓名":"張三","年齡":18,"性別":"男"},{"姓名":"趙蘭","年齡":17,"性別":"女"},{"姓名":"李四","年齡":20,"性別":"男"}]}

  • 注意一：如果想每次打開對話框都重新加載數(shù)據(jù)和渲染畫布，則在對話框加上兩行代碼：
:visible.sync="centerDialogVisible"谬泌；v-if="centerDialogVisible"

  • 注意二：luckysheet文件的引用路徑一定要對


    47964691b1754c5cada28fba740c7a36.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末滔韵，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子掌实，更是在濱河造成了極大的恐慌陪蜻，老刑警劉巖，帶你破解...
    沈念sama閱讀 207,113評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件贱鼻，死亡現(xiàn)場離奇詭異宴卖，居然都是意外死亡，警方通過查閱死者的電腦和手機忱嘹，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門嘱腥，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人拘悦，你說我怎么就攤上這事齿兔。” “怎么了础米？”我有些...
    開封第一講書人閱讀 153,340評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵分苇，是天一觀的道長。 經(jīng)常有香客問我屁桑，道長医寿，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,449評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任蘑斧，我火速辦了婚禮靖秩，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘竖瘾。我一直安慰自己沟突，他們只是感情好，可當我...
    茶點故事閱讀 64,445評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布捕传。 她就那樣靜靜地躺著惠拭，像睡著了一般。 火紅的嫁衣襯著肌膚如雪庸论。 梳的紋絲不亂的頭發(fā)上职辅，一...
    開封第一講書人閱讀 49,166評論 1贊 284
  • 城市分裂傳說
    那天棒呛，我揣著相機與錄音，去河邊找鬼域携。 笑死簇秒，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的涵亏。 我是一名探鬼主播宰睡，決...
    沈念sama閱讀 38,442評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼气筋！你這毒婦竟也來了拆内？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,105評論 0贊 261
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤宠默，失蹤者是張志新（化名）和其女友劉穎麸恍，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搀矫，經(jīng)...
    沈念sama閱讀 43,601評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡抹沪，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年亿乳，在試婚紗的時候發(fā)現(xiàn)自己被綠了颊郎。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡盯孙，死狀恐怖卦羡，靈堂內(nèi)的尸體忽然破棺而出噪馏，到底是詐尸還是另有隱情，我是刑警寧澤绿饵，帶...
    沈念sama閱讀 33,792評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布欠肾，位于F島的核電站，受9級特大地震影響拟赊，放射性物質(zhì)發(fā)生泄漏刺桃。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一吸祟、第九天 我趴在偏房一處隱蔽的房頂上張望瑟慈。 院中可真熱鬧，春花似錦屋匕、人聲如沸封豪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0贊 19
  • 一樁弒父案炒瘟，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至第步，卻和暖如春疮装，著一層夾襖步出監(jiān)牢的瞬間缘琅，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工廓推， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留刷袍，地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2贊 355
  • 代替公主和親
    正文 我出身青樓樊展，卻偏偏與公主長得像呻纹，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子专缠，可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2贊 344