首頁 > 軟體

Vue-Luckysheet的使用方法及遇到問題解決方法

2022-08-08 14:00:40

Luckysheet ，一款純前端類似excel的線上表格，功能強大、設定簡單、完全開源。

設定檔案 · 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檔案的參照路徑一定要對，如圖：

好了，今天分享的關於Luckysheet元件在vue中使用的方法，就到這裡了，希望能夠幫助到大家。

到此這篇關於Vue-Luckysheet的使用方法的文章就介紹到這了,更多相關Vue Luckysheet使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com