欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目Luckysheet的使用

 更新時(shí)間:2022年08月08日 11:29:06   作者:snowflakelm  
這篇文章主要介紹了vue項(xiàng)目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包,所以只能使用CDN引入依賴,在vue項(xiàng)目的public/index.html文件里引入即可,本文通過(guò)示例代碼給大家詳細(xì)介紹,需要的朋友可以參考下

什么是Luckysheet

Luckysheet ,一款純前端類似excel的在線表格,功能強(qiáng)大、配置簡(jiǎn)單、完全開(kāi)源。

Luckysheet官網(wǎng):https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md

Luckysheet使用(vue項(xiàng)目)

1、引入

目前Luckysheet不支持使用npm安裝包,所以只能使用CDN引入依賴;在vue項(xiàng)目的public/index.html文件里引入:

<link rel='stylesheet'  />
<link rel='stylesheet'  />
<link rel='stylesheet'  />
<link rel='stylesheet'  />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

2、初始化Luckysheet

可以根據(jù)Luckysheet的官方文檔配置在線文檔,官方文檔提供了很多配置項(xiàng),基本都能滿足一般的開(kāi)發(fā)需求。配置如下:

const options = {
        container: 'luckysheet', // luckysheet為容器id
        lang: 'zh',
        showinfobar: false, // 標(biāo)題部分信息
        showsheetbar: false, // 底部sheet頁(yè)
        sheetFormulaBar: true, // 是否顯示公示欄
        showstatisticBar: false, // 自定義計(jì)數(shù)欄
        showtoolbar: false, // 默認(rèn)工具欄都不顯示
        enableAddRow: false, // 底部添加行按鈕
        showtoolbarConfig: { // 自定義配置工具欄
          undoRedo: true, // 撤銷重做,注意撤消重做是兩個(gè)按鈕,由這一個(gè)配置決定顯示還是隱藏
          paintFormat: true, // 格式刷
          mergeCell: true // '合并單元格'
        },
        cellRightClickConfig: { // 自定義右鍵單元格
          insertColumn: false,
          deleteColumn: false,
          hideRow: false,
          hideColumn: false,
          deleteCell: false,
          sort: false,
          filter: false, // 篩選選區(qū)
          chart: false, // 圖表生成
          image: false, // 插入圖片
          link: false, // 插入鏈接
          data: false,
          matrix: false
        },
        enableAddBackTop: false
}

再使用luckysheet.create(options)創(chuàng)建;這樣一個(gè)在線文檔就創(chuàng)建好了。

3、初始化文檔標(biāo)題行

一般在實(shí)際需求中,excle都是需要有標(biāo)題行來(lái)告訴使用者每個(gè)單元格填寫什么內(nèi)容,所以就需要在初始化luckysheet時(shí)配置好;luckysheet的options配置項(xiàng)里提供了一個(gè)celldata屬性可以指定單元格數(shù)據(jù)。其中r代表行號(hào),c代表列號(hào),m為原始值,v為顯示值。

data: [
    {
        celldata: [
            {
                r: 0,
                c: 0,
                v: {
                  ct: { fa: 'General', t: 'g' },
                  m: '序號(hào)',
                  v: '序號(hào)'
                }
              },
              {
                r: 0,
                c: 1,
                v: {
                  ct: { fa: 'General', t: 'g' },
                  m: '姓名',
                  v: '姓名'
                }
              }
        ]
    }
]

4、配置數(shù)據(jù)驗(yàn)證

在單元格上限制輸入內(nèi)容或格式也是使用excle常見(jiàn)的,Luckysheet也支持對(duì)不同單元格進(jìn)行設(shè)置。不好的一點(diǎn)是:我們一般都是需要將某一列或者某幾列單元格設(shè)置數(shù)據(jù)驗(yàn)證,而Luckysheet只支持對(duì)單個(gè)或單個(gè)選區(qū)進(jìn)行設(shè)置;

初始化時(shí)設(shè)置數(shù)據(jù)驗(yàn)證

const options = {
    data: {
        dataVerification: {
            '1_2': {
                type: 'dropdown',
                type2: null,
                value1: '高,中,低',
                prohibitInput: true
            }
        }
    }
}

luckysheet生成后設(shè)置數(shù)據(jù)驗(yàn)證

luckysheet.setDataVerification(
    {
        type: 'dropdown',
        type2: null,
        value1: '高,中,低',
        prohibitInput: true
    },
    {
        range: 'B1'
    }
)

5、監(jiān)聽(tīng)單元格

Luckysheet的鉤子函數(shù)cellUpdated可用于監(jiān)聽(tīng)單元格的數(shù)據(jù)修改;

const options = {
    hook: {
        cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
            // 執(zhí)行單元格修改后的操作
        }
    }
}

總結(jié)

最后附上實(shí)現(xiàn)效果圖:(效果圖稍后附上)

在這里插入圖片描述

此上內(nèi)容為開(kāi)發(fā)后的筆記整理,僅作后期查看用。

到此這篇關(guān)于vue項(xiàng)目Luckysheet的使用的文章就介紹到這了,更多相關(guān)vue Luckysheet使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue實(shí)現(xiàn)電商網(wǎng)站商品放大鏡效果示例

    Vue實(shí)現(xiàn)電商網(wǎng)站商品放大鏡效果示例

    這篇文章主要為大家介紹了Vue實(shí)現(xiàn)電商網(wǎng)站商品放大鏡效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • vue自定義翻頁(yè)組件的方法

    vue自定義翻頁(yè)組件的方法

    這篇文章主要為大家詳細(xì)介紹了vue自定義翻頁(yè)組件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • Vue全家桶入門基礎(chǔ)教程

    Vue全家桶入門基礎(chǔ)教程

    Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,和React,都自稱自己只關(guān)注視圖層,全家桶對(duì)于開(kāi)發(fā)一個(gè)完整的中大型單頁(yè)面應(yīng)用項(xiàng)目所必須的所必須的插件和框架,本文給大家分享Vue全家桶入門基礎(chǔ)教程,感興趣的朋友一起看看吧
    2021-05-05
  • Vue打包路徑配置過(guò)程

    Vue打包路徑配置過(guò)程

    這篇文章主要介紹了Vue打包路徑配置過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼

    Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼

    這篇文章主要介紹了Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • 開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決

    開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決

    這篇文章主要介紹了開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue2.0用 watch 觀察 prop 變化(不觸發(fā))

    Vue2.0用 watch 觀察 prop 變化(不觸發(fā))

    本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā)),非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-09-09
  • vue實(shí)現(xiàn)彈窗翻頁(yè)多選效果

    vue實(shí)現(xiàn)彈窗翻頁(yè)多選效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)彈窗翻頁(yè)多選效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • vue管理系統(tǒng)項(xiàng)目中的一些核心技能匯總

    vue管理系統(tǒng)項(xiàng)目中的一些核心技能匯總

    Vue是當(dāng)今增長(zhǎng)最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語(yǔ)法非常直觀,并且具有友好的學(xué)習(xí)曲線,是開(kāi)發(fā)人員最想學(xué)習(xí)的頂級(jí)前端庫(kù)之一,下面這篇文章主要給大家介紹了關(guān)于vue管理系統(tǒng)項(xiàng)目中的一些核心技能,需要的朋友可以參考下
    2022-05-05
  • Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn)

    Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn)

    這篇文章主要介紹了Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06

最新評(píng)論