vue项目Luckysheet的使用

 更新时间:2022年08月08日 11:29:06   作者:snowflakelm  
这篇文章主要介绍了vue项目Luckysheet的使用,目前Luckysheet不支持使用npm安装包,所以只能使用CDN引入依赖,在vue项目的public/index.html文件里引入即可,本文通过示例代码给大家详细介绍,需要的朋友可以参考下

什么是Luckysheet

Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

Luckysheet官网:https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md

Luckysheet使用(vue项目)

1、引入

目前Luckysheet不支持使用npm安装包,所以只能使用CDN引入依赖;在vue项目的public/index.html文件里引入:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<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

可以根据Luckysheet的官方文档配置在线文档,官方文档提供了很多配置项,基本都能满足一般的开发需求。配置如下:

const options = {
        container: 'luckysheet', // luckysheet为容器id
        lang: 'zh',
        showinfobar: false, // 标题部分信息
        showsheetbar: false, // 底部sheet页
        sheetFormulaBar: true, // 是否显示公示栏
        showstatisticBar: false, // 自定义计数栏
        showtoolbar: false, // 默认工具栏都不显示
        enableAddRow: false, // 底部添加行按钮
        showtoolbarConfig: { // 自定义配置工具栏
          undoRedo: true, // 撤销重做,注意撤消重做是两个按钮,由这一个配置决定显示还是隐藏
          paintFormat: true, // 格式刷
          mergeCell: true // '合并单元格'
        },
        cellRightClickConfig: { // 自定义右键单元格
          insertColumn: false,
          deleteColumn: false,
          hideRow: false,
          hideColumn: false,
          deleteCell: false,
          sort: false,
          filter: false, // 筛选选区
          chart: false, // 图表生成
          image: false, // 插入图片
          link: false, // 插入链接
          data: false,
          matrix: false
        },
        enableAddBackTop: false
}

再使用luckysheet.create(options)创建;这样一个在线文档就创建好了。

3、初始化文档标题行

一般在实际需求中,excle都是需要有标题行来告诉使用者每个单元格填写什么内容,所以就需要在初始化luckysheet时配置好;luckysheet的options配置项里提供了一个celldata属性可以指定单元格数据。其中r代表行号,c代表列号,m为原始值,v为显示值。

data: [
    {
        celldata: [
            {
                r: 0,
                c: 0,
                v: {
                  ct: { fa: 'General', t: 'g' },
                  m: '序号',
                  v: '序号'
                }
              },
              {
                r: 0,
                c: 1,
                v: {
                  ct: { fa: 'General', t: 'g' },
                  m: '姓名',
                  v: '姓名'
                }
              }
        ]
    }
]

4、配置数据验证

在单元格上限制输入内容或格式也是使用excle常见的,Luckysheet也支持对不同单元格进行设置。不好的一点是:我们一般都是需要将某一列或者某几列单元格设置数据验证,而Luckysheet只支持对单个或单个选区进行设置;

初始化时设置数据验证

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

luckysheet生成后设置数据验证

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

5、监听单元格

Luckysheet的钩子函数cellUpdated可用于监听单元格的数据修改;

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

总结

最后附上实现效果图:(效果图稍后附上)

在这里插入图片描述

此上内容为开发后的笔记整理,仅作后期查看用。

到此这篇关于vue项目Luckysheet的使用的文章就介绍到这了,更多相关vue Luckysheet使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 组件库中使用 vue-i18n 国际化的案例详解

    组件库中使用 vue-i18n 国际化的案例详解

    这篇文章主要介绍了组件库中使用 vue-i18n 国际化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue前端获取本地IP地址代码实例

    vue前端获取本地IP地址代码实例

    再做前端页面的时候,想获取本地的ip地址,可能是为了和服务器通信,可能是为了展示,无论哪种,下面给大家总结下方法,这篇文章主要给大家介绍了关于vue前端获取本地IP地址的相关资料,需要的朋友可以参考下
    2024-05-05
  • Vue下拉框回显并默认选中随机问题

    Vue下拉框回显并默认选中随机问题

    这篇文章主要介绍了Vue下拉框回显并默认选中随机问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详细讲一讲vue3下会造成响应式丢失的情况

    详细讲一讲vue3下会造成响应式丢失的情况

    vue3开发过程中,绑定的响应式数据失去了响应式,如何解决问题呢,下面这篇文章主要给大家介绍了关于vue3下会造成响应式丢失的情况,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue3.3 + TS4构建实现ElementPlus功能的组件库示例

    Vue3.3 + TS4构建实现ElementPlus功能的组件库示例

    Vue.js 是目前最盛行的前端框架之一,而 TypeScript 则是一种静态类型言语,它能够让开发人员在编写代码时愈加平安和高效,本文将引见如何运用 Vue.js 3.3 和 TypeScript 4 构建一个自主打造媲美 ElementPlus 的组件库
    2023-10-10
  • Vue.js 十五分钟入门图文教程

    Vue.js 十五分钟入门图文教程

    不过 Vue 本身含有非常丰富的功能,要用 Vue 搭建完整的应用,仍然需要了解大量 Vue 设计概念和操作技巧。这篇文章主要介绍了Vue.js 十五分钟入门图文教程,需要的朋友可以参考下
    2018-09-09
  • Vue2项目中Mock.js的完整集成与使用教程

    Vue2项目中Mock.js的完整集成与使用教程

    Mock.js 是一个可以在开发阶段模拟后端数据接口的 JavaScript 库,它能够生成大量不同类型的随机数据,并且模拟真实的接口返回,允许前端开发在没有真实后端接口的情况下进行开发,本文给大家介绍了Vue2项目中Mock.js的完整集成与使用教程,需要的朋友可以参考下
    2025-02-02
  • 在Vue中解决跨域问题的常用方式

    在Vue中解决跨域问题的常用方式

    跨域问题是由浏览器引起的安全限制,而不是Vue框架本身导致的,Vue本身并不限制跨域访问,它只是一个前端框架,负责构建用户界面和处理数据逻辑,本文给大家介绍了在Vue中解决跨域问题的常用方式,需要的朋友可以参考下
    2023-10-10
  • vue中v-bind与v-model的区别举例详解

    vue中v-bind与v-model的区别举例详解

    这篇文章主要给大家介绍了关于vue中v-bind与v-model区别的相关资料,v-model和v-bind是Vue.js框架中的两个常用指令,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Vue报错:Injection "xxxx" not found的解决办法

    Vue报错:Injection "xxxx" not found的解决办法

    这篇文章主要给大家介绍了关于Vue报错:Injection "xxxx" not found的解决办法,文中通过图文将解决的办法介绍的非常详细,对大家的学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07

最新评论