返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目Luckysheet的使用
  • 673
分享到

vue项目Luckysheet的使用

vue Luckysheet使用vue Luckysheet 2022-11-13 14:11:32 673人浏览 八月长安
摘要

目录什么是LuckysheetLuckysheet使用(Vue项目)1、引入2、初始化Luckysheet3、初始化文档标题行4、配置数据验证5、监听单元格总结什么是Luckyshe

什么是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使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue项目Luckysheet的使用

本文链接: https://lsjlt.com/news/172073.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue项目Luckysheet的使用
    目录什么是LuckysheetLuckysheet使用(vue项目)1、引入2、初始化Luckysheet3、初始化文档标题行4、配置数据验证5、监听单元格总结什么是Luckyshe...
    99+
    2022-11-13
    vue Luckysheet使用 vue Luckysheet
  • Vue项目中使用Bootstrap
    一、安装jQuery Bootstrap需要依赖jQuery,所以引用Bootstrap之前要先引用jQuery,使用下面的命令引用jQuery: npm install jquer...
    99+
    2024-04-02
  • Vue-Luckysheet的使用方法及遇到问题解决方法
    Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。 配置文档 · API · 教程:快速上手 | Luckyshe...
    99+
    2022-11-13
    Vue Luckysheet使用 Vue Luckysheet
  • vue项目怎么使用CDN
    本文小编为大家详细介绍“vue项目怎么使用CDN”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue项目怎么使用CDN”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。前言CDN(内容分发网络)指请求资源的方式,即...
    99+
    2023-06-30
  • Vue项目中的keepAlive怎么使用
    这篇“Vue项目中的keepAlive怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue项目中的keepAlive...
    99+
    2023-06-30
  • vue项目中使用TDesign的方法
    目录前言:一、使用vue-cli手脚架创建vue项目二、配置vue及vue模板编译器版本三、安装tdesign-vue和less四、测试常见错误前言: 本文只介绍如何在vue项目中配...
    99+
    2023-05-15
    vue使用TDesign vue TDesign
  • Vue项目中Websocket的使用实例
    目录前言判断浏览器是否支持websocket的方法Vue项目里使用websocket的实例总结前言 由于项目需求有要使用长链接,我们普通的http请求如果用轮询的方式与服务端通讯就很...
    99+
    2023-02-16
    vue websocket websocket教程 vue websocket库
  • vue项目中使用websocket的实现
    什么是websocket? “WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数...
    99+
    2024-04-02
  • Vue如何使用vue-cli创建项目
    这篇文章主要介绍了Vue如何使用vue-cli创建项目,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:vue-cli 是一个官方发布...
    99+
    2024-04-02
  • 使用vue-cli创建vue项目介绍
    1、什么是vue-cli 是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。 2、全局安装vue-cli (1)检查npm 版本,建议安装到...
    99+
    2024-04-02
  • 详解vue项目中使用vuedraggable
    最近在学习一个可视化搭建的项目,里面用的拖拽就是draggable.js。看了几个中文的文档,有很多坑,可能是没有及时更新的原因。 VUe  建议去看vuedraggabl...
    99+
    2024-04-02
  • vue项目中如何使用typescript
    本篇内容主要讲解“vue项目中如何使用typescript”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目中如何使用typescript”吧!1、引入Typescriptnpm ...
    99+
    2023-06-21
  • Vue项目中如何使用Bootstrap
    本篇内容主要讲解“Vue项目中如何使用Bootstrap”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue项目中如何使用Bootstrap”吧!一、安装jQueryBootstrap需要依赖j...
    99+
    2023-06-29
  • vue项目中如何使用mock
    本篇文章为大家展示了vue项目中如何使用mock,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下...
    99+
    2023-06-25
  • vue项目中如何使用websocket
    这篇文章将为大家详细讲解有关vue项目中如何使用websocket,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是websocket?“WebSocket 是 HTML5 开始提供的一种在单个 TCP...
    99+
    2023-06-29
  • vue项目中如何使用vuedraggable
    本篇内容主要讲解“vue项目中如何使用vuedraggable”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目中如何使用vuedraggable”吧!由于vue3已经是默认版本了,所以v...
    99+
    2023-06-30
  • vue项目中main.js怎么使用
    这篇文章主要介绍了vue项目中main.js怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue项目中main.js怎么使用文章都会有所收获,下面我们一起来看看吧。第一部分:main.js文件解析src...
    99+
    2023-07-02
  • vue项目中main.js如何使用
    在Vue项目中,main.js是整个项目的入口文件,可以在其中做一些初始化的操作。以下是一些常见的用法:1. 引入Vue和根组件:`...
    99+
    2023-08-09
    vue main.js
  • vue项目中如何使用axios
    这篇文章主要介绍了vue项目中如何使用axios的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue项目中如何使用axios文章都会有所收获,下面我们一起来看看吧。Axios简介axios框架全称(ajax –...
    99+
    2023-07-04
  • Vue项目中如何使用vuex
    这篇文章主要介绍“Vue项目中如何使用vuex”,在日常操作中,相信很多人在Vue项目中如何使用vuex问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue项目中如何使用vuex”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作