小熊猫Yzt_199626-CSDN博客

原创第二十篇分享在VUE中使用data-view实现数据滚动显示并可点击

前言：在大屏项目中需要滚动展示某个列表信息，并且能够悬浮鼠标停止滚动、可点击最后一列查看详情、鼠标移走后又正常的滚动和动态能更新新数据。效果图：使用方法也很简单，下面直接看下用法吧~~~1. npm 安装 data-viewnpm i @jiaminghi/data-view -S2. 在 main.js 文件中全局注册 data-view// 数据滚动import datav from '@jiaminghi/data-view'Vue.use(datav)3..

2021-07-11 10:00:52 3200 2

原创第十九篇 VUE 中使用ElementUi el-tree 自定义显示内容标签，实现单选和✔勾选

需求：VUE使用ElementUi el-tree组件库要实现复选框的单选,以及在单选后的条目出现一个勾选。效果图如下：思路比较简单：需要使用插槽实现自定义的标签显示，关键的代码部分 <template slot-scope="{ node }"> <span :title="node.label"> <span>{{ node.label }}</span> <spa.

2021-06-27 10:49:37 1457 2

原创第十八篇难点突破之-VUE中使用 C-LODOP 实现模板的套打

前言: 目前模板套打的工具不多，个人参与的项目恰好需要使用到模板套打功能，于是查了一下最后选择了 C-LODOP 。其常见的功能都覆盖到了，尤其用户本地直接接打印机打印是免费的。套打：简单的理解就是，纸上的网格线、表头等信息都有了，现在要做的就是将内容动态填充上去。如：快递单、银行小票等。先看下大致效果：1.未检测到 c-lodop 服务，进行提示2. 打印预览页面(蓝色字体是动态打上去的，表格绿色字体等是图片背景)下面来说下大致的实现步骤，以及遇到的一些难点：1.先下载安装

2021-06-21 18:56:45 6914 5

原创第十七篇 VUE ElementUI开发之数组对象的匹配问题以及对应的简单开发例子

前言：在实际开发当中，有时会涉及到数组对象的匹配问题--即一个对象数组中是否与另外一个数组的某个属性一致，一致的话做 xxx 操作。下面给个简单的例子：arrayData

2021-06-09 22:54:00 1289 7

原创第十六篇难点突破之 Vue 中使用 ElementUi el-upload 进行手动上传文件限制上传文件类型大小同名等进行限制

个人在做文件上传功能的时候，踩过不少的坑，特在此记录下，方便后续的查阅，也帮助有需要的朋友查阅。实现的功能有：文件类型上传类型限制、文件大小限制、文件总大小限制、文件

2021-06-06 11:03:14 5468 9

原创第十四篇在Vue 中封装一个打印 js文件，可直接引用

前言：在进行前端项目开发中，经常使用打印的功能，自己在这记录下打印功能的实现，方便自己后续查阅，同时有需要的朋友也可借鉴借鉴。效果图：

2021-05-30 16:02:27 369

原创第十一篇: 使用ElementUi 卡片封装一个季度选择器公共组件，可直接使用

本篇主要内容：ElementUi 只提供了时间、日历等选择器，没有提供季度选择器，但在开发中报表的时候用到了季度选择器。需要换切换多种类型（年报、月报、季报），于是封装一个季度公共组件，大家可按需修改引用：效果如下：上述是引用组件的示例，下面来简单介绍下封装的季度选择器组件。1.季度选项弹窗显示个人设计为鼠标聚焦的时候进行显示，并判断当前年 year 是否已有值，没有则赋值当年。 // 聚焦触发,若是年已存在，则不需要重新赋值 focusClick() { .

2021-05-25 15:11:09 2135 1

原创第十篇 ElementUI 树形表格懒加载-新增修改删除等操作进行局部刷新数据

该篇的模拟的功能：ElementUI 树形表格懒加载数据展示，并对某列数据进行相应操作(新增，修改和删除)，并对列表进行局部的数据刷新。模拟效果图如下：1. 注意到到点的就是，后端返回的数据结构类型中，每一层级都得包含父级的标识，如下的 parentId 的父级的 id为 0，自己的 id 为1： { id: 1, parentId: 0, date: '2016-05-02', name: '王

2021-05-22 21:42:00 6017 11

原创第九篇 Elementui 树形表格多选问题-多级树形表格懒加载复选框勾选问题

前言：个人在做项目中，使用到了 Elementui 组件库中的树形表格，其中的需求就是要能够做到多选的功能。使用官网的例子，只有一层的多选，不能做到多层的勾选。无法满足开发的需要，本文做的就是分享： 1.一次性展示的数据进行多选 2.懒加载的获取的数据的多选的实现请先看效果:1.一次性展示的数据进行多选：2.懒加载后获取的数据的多选处理前：处理后：1.一次性展示的数据进行多选这种情况是一次性从后端接口取回了显示的数据，主要使用到的方法如下：--->可..

2021-05-20 20:04:01 6425 19

原创第八篇：node简单使用 nodemailer+node-schedule 实现定时发送邮件

该篇内容：简单的书写一个 sendmaildemo.js ，借助nodemailer +node-schedule 来实现定时的发送邮件前提条件：是需要获取邮箱的 IMAP/SMTP 服务授权码，以qq邮箱为例子，具体操作步骤截图如下登录邮箱-->设置-->第三方服务-->生成授权码。将获取到的授权码放到下面的代码 pass 处。准备好了之后，接下来可以书写demo了1. npm 安装nodemailer、node-schedulenpm instal...

2021-05-05 18:40:43 535 1

原创第五篇：VUE使用 leader-line 画各样式线，主要用于连接 DOM 节点，关系图等

第五篇：VUE使用 leader-line 画各样式线，主要用于连接 DOM 节点，关系图等这篇博客主要是记录下leader-line 的简单使用，在实际开发中，还挺使用。1 2 3 4 是4个 div,大致效果如下：更丰富的配置可到官方文档查看：[leader-line文档](https://anseki.github.io/leader-line/)1. npm 安装 leader-linenpm install leader-line --save2. 引用的方法如...

2021-05-03 20:59:59 19052 17

原创 JS-树形遍历-依据子节点查找其父节点

场景：在前端开发中，在树形表格之中，子级的金额可进行编辑，父级的金额只能进行展示，对子级金额修改后，对应的父级金额要将子集金额进行统计。// 依据原数据与节点查找对应的父级节点，并倒序输出findParentNodeArray(array, parentSubjectCode) { const parentSubjectStock = [] // 存储父节点 let going = true // 是否已找到要查到的节点 var findParentNode = func

2021-10-01 17:11:55 1560 1

原创第二十一篇 JS按数组对象某列属性进行数据分组

很简单的功能，下面直接贴上代码const dataArray = [ { id: 1, value: '值1', text1: '文本一' }, { id: 2, value: '值2', text1: '文本二' }, { id: 3, value: '值3', text1: '文本三' }, { id: 1, value: '值4', text1: '文本四' }, { id: 2, value: '值5', text1: '文本五' }]/

2021-08-01 16:30:53 483

原创第十五篇 VUE中使用 ElementUi 的 el-select 实现全选功能

前言:在开发中，有一个需求是选项组件中使用到一个全选的功能，特在这记录下实现的方法，方便后续的查阅，以及方便大家查阅借鉴。若是有更好的方法，请大家传授传授。效果图：

2021-06-05 15:21:52 2037

原创第十三篇 VUE中使用头像插件 multiavatar，超级有趣的头像生成插件，提升开发的乐趣

最近在开发中，看到一个很有趣的插件-multiavatar，查看了一下官方，功能很强大，能够依据输入的内容，随机进行生成一个头像，觉得特别的有乐趣，特在这分享一下。官方地址：multiavatar 官方地址以下是个人在 VUE 中写的一个简易 demo, 效果如下：废话不多说，直接说下怎么在 vue 中使用。1. npm 安装multiavatarnpm install @multiavatar/multiavatar -S2. 简单的一个 demo<tem..

2021-05-27 19:13:10 1665 2

原创第十二篇：VUE前端开发常用的正则表达式-封装js文件可直接引用

前言：在日常开发当中经常用到一些正则表达式，比如电话号码、邮箱、IP和数字等校验，个人每次都要去查阅下才知道怎么书写，特自己封装一个，方便后续查阅，同时后续还会新增一些校验。先看下校验的效果：话不多说，直接放代码：1. 个人封装一个公共的 js文件，名命为 regulation.js, 如下：export default { telphone: (rule, value, callback) => { if (value === '') { c..

2021-05-26 16:42:28 1136

原创第七篇：VUE 使用 Echarts 画时钟钟表

第七篇：VUE 使用 Echarts 画时钟要求：1.时针要按两位小数计算，如 7.5 小时，时针需要停在刻度 7和 8 之间2.分针一分钟跳一小格即可3.秒针一秒跳一小格效果图如下：实现的思路如下：在同一个 series 里面使用三个 type="gauge",分别代表的是时、分、秒。通过调整刻度、指针长度、计时器来实现。1. npm 安装 echartsnpm install echarts --save2. 指定一个dom来放画出的钟表图形，一定要指定.

2021-05-04 19:25:42 1773

原创第六篇 VUE使用CodeMirror 实现sql 等脚本的录入

该篇写的是 CodeMirror 的简单使用，对于平时的开发使用足够了。页面效果如下：更多的配置项可参照在线手册：在线使用手册：https://codemirror.net/doc/manual.htmlgithub地址：https://github.com/marijnh/codemirror使用方法：1. npm 安装vue-codemirrornpm install vue-codemirror --save2.简单使用的 demo可引入主题类型、可引入脚本类.

2021-05-04 12:37:43 1171

原创第四篇：VUE 利用 xlsx 和 file-saver 实现 Excel 表格的导入与导出

第四篇：VUE 利用xlsx 和file-saver 实现 Excel 表格的导入与导出要点：本章在 xlsx 和 file-saver 基础上，简单的封装了方法，实现了表格 Excel 的导出与导入。文件类型可支持 xlsx、csv 和 txt 。页面的大致效果如下： 1. npm 安装 xlsx和 file-savernpm install xlsx --savenpm install file-saver --save2. 封装的方法文件(可直接使用）...

2021-04-28 18:52:52 2356 1

原创第三篇：使用 vue-pdf 实现前端预览 PDF文件

第三篇：使用 vue-pdf 实现前端预览 PDF文件主要知识点：npm 安装 vue-pdf；本地pdf文件路径地址；vue-pdf的createLoadingTask()方法大致效果如下：1.npm 安装 vue-pdfnpm install vue-pdf --save2.本地pdf文件路径地址。在工程中加入自己测试需要的 pdf 文件，路径最好放在 public目录下，如下：3.vue-pdf的createLoadingTask()方法。为了防止在开发中出现跨越.

2021-04-27 20:55:38 3031

原创第二篇： VUE使用 Echarts 画关系拓扑图，并带移动迁移特效

第二篇：使用 Echarts 画关系拓扑图，并带迁移特效前言：需求是使用 Echarts 画关系拓扑图，并带箭头迁移特效，为了效果更加明显，已将箭头效果放大，需要使用的话，可自行调整效果图如下:1.使用 npm 安装Echarts：npm install echarts --save2.注意：由于关系拓扑图在 echarts配置中，类型 type 是 'graph'，其中的连接线条是不带有迁移（effect）特效的。需要配合 type：'lines' 同时使用，'lines'.

2021-04-26 18:56:26 4263 1

原创第一篇：VUE 使用 HighCharts 画 3D环/饼图

第一篇：VUE 使用 HighCharts 画 3D环/饼图前言：自己在弄一个大屏项目中，在使用Echarts 画3D环/饼图时遇到了问题，官方也没有例子，最后采用了 HighCharts 。话不多说，先直接上效果图，有需要的大家可借鉴借鉴。下面是步骤以及代码：1.npm 安装 highchartsnpm install highcharts --save2.在main.js中引用 highcharts, 注意：画3D图需要使用到 highcharts里面的 highchar.

2021-04-26 14:17:35 7054 17

Yzt_199626的博客