Yzt_199626的博客

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

很简单的功能，下面直接贴上代码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: '文本五' }]/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第五篇：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. 引用的方法如...

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

第三篇： 使用 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()方法。为了防止在开发中出现跨越.