coder__wang的博客

现在越来越多的项目使用了国际化，传统的页面功能按钮、菜单等固定文本的国际化比较容易，而在有些管理系统项目中，页面中很多菜单、按钮、网站标题等依赖配置的路由文件。

springboot配置统一返回结果类

本文主要封装方法，实现用户离开表单编辑页面时弹出提示框，若表单数据发生变化，则提示用户是否保存当前页面的信息，如图：

vue + elementUI项目中，el-cascader级联选择器使用频率非常高，一些基本使用方法可以参考elementUI官方文档，本文主要研究当接口只返回最后一级id时，如何向上找出所有父级数据，并设置组件el-cascader的默认值！图中未处理的数据就是根据最后一级id向上查找父级数据，处理后的数据是将找到的树形数据继续平铺处理成组件需要的各级id组成的数组（若业务场景固定，只需要id数据，那么在。准备测试数据：方位、省、市区级联选择。方法中可以直接返回处理后的数据）。

在我们平时开发中，经常会遇到页面数据初始化时，频繁调同一个接口的情况。比如echarts项目中，一个页面可能会有几十张图表，如果一个接口返回所有图表数据的话，会造成用户过长的等待时间，再者过多图表同时渲染，也会给页面增加压力，造成卡顿的现象。...

js中，对整数范围是有限制的，超过安全范围会发生精度丢失，无法正常计算，常见的解决方案就是转成字符串处理，代码如下： // 俩个大数相加 var a = '9998995523412341234123412441123412342', b = '0002245332134123423142341423424'; function bigSum(a, b) { a = String(a).split(''); b = String(b).sp

web workers对于每个前端开发者并不陌生，在mdn中的定义：Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建，一个worker可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。我的理解：webworkers可以为js带来多线程环境，由js主线程创建...

vue+elementui技术栈的小伙伴们，在平时项目里，特别是OA项目，会大量用到表单以及表单校验。经常会处理一些必填项，对它们是否有值的判断显得有些繁琐和臃肿，本文将封装方法，解决该问题。最近业务中频繁增加必填项，之前的常规做法就是在提交、修改或者其他操作之前，判断必填项是否填写，做个拦截：在每一个操作之前加上这些必填项的验证，如果有少量的必填项，可以这样处理，但是有大量必填项的时候，代码就会显得非常冗余。现在尝试将抽出来形成方法，在提交、修改等操作之前调用该方法，.

函数防抖和节流在平时业务中经常会用到，一般都是调用已经封装好的方法，下面介绍一种新的思路：vue自定义指令！下面这段代码以防抖为例，el-input标签直接写上v-debounce,传入arg参数：search和expression表达式：‘input’,1000，seach为需要防抖的函数，'input'为绑定的事件名称，1000(ms)表示防抖间隔时间。<template> <el-input v-debounce:search="'input',1000" v-mo

平时业务中下载文件方式常见的有俩种：第一种，直接访问服务器的文件地址，自动下载文件；第二种 ，服务器返回blob文件流，再对文件流进行处理和下载。一般小文件适用于第一种下载方案，不占用过多服务器资源，而对于体积庞大的文件，常常使用文件流的方式进行传输，如图：文件流传输成功后通过代码可以立即发起浏览器下载该文件流：这种方式也有弊端，在文件流传输过程中，用户无法感知文件流的传输状态（进度），会造成一些困扰（无法确定当前下载操作是否已经生效）。针对这种情况，我们可以在页面显示文件流的状

正则生成形如xxx xxxx xxxx格式的手机号码（中间数字自动追加空格）：监听输入事件，对输入的值用正则处理：1.过滤输入的字符，去掉非数字var a = '13177wsdrfs778888sdfasdf999asdfasdfasdf9'a.replace(/\D+/g, '') // => 1317777888899992.控制输入字符的位数（手机号位数为11位）var a = '131777788889999'a.replace(/(\d{1,11})(\d

本篇将实现vue2在css中使用js变量。下图是el-tab组件，由上面的tab头和下面的内容区构成，当内容区过长的时候，外层固定高度的盒子会出现滚动条（设置了overflow: auto;），tab头部会向上滚动而消失：滚动前：滚动后：现在的需求是，tab头部需要固定在最上方，不随滚动条滚动而消失。首先尝试将tab头用固定定位，加上背景色和z-index层级，已经实现悬浮固定，但是长度不够，只能盖住“特殊指示”旁边一点，空出来一大截。加上width: 100%又超长，由于组件的

前面我们封装了一维数组(具备树形结构相关属性)处理成树形结构的方法::https://www.cnblogs.com/coder--wang/p/15013664.html接下来我们来一波反向操作，封装一个可以将树形结构的数据扁平化的方法。这种场景在业务中还是很常见的，比如一个级联选择器，有时候你需要判断某个id或者某个字段，是否存在于该级联选择器的多维数组中，亦或者你需要将该多维数组中的字段进行处理，那么此时，对这个树形的复杂数组进行降维就显得很有必要了！下面直接上代码：/** * * @.

大家在平时业务中应该经常跟小数打交道吧,有没有被小数点的保留位数问题搞得头疼啊。比如，保留一位小数，保留俩位小数，保留三位小数，向上取整、四舍五入等等。而我最近在项目中正好遇到类似的问题：有的地方要求保留一位小数，有的地方要求保留俩位，有的地方要求四舍五入，有的地方要求向下取整。。。这些情形，总不能一个个来处理吧？于是乎，干脆封装一个方法，解决上述令人头疼的问题！话不多说，上代码：/** * * @param {number|string} num 需要处理的数字 * @param {num

本文主要实现：根据el-table表格数据自动生成表头筛选条件的方法，可根据表格数据动态调整。el-table表格的表头增加筛选功能，大家平时都是怎么实现的呢？先看看官方文档的例子：<template> <el-button @click="resetDateFilter">清除日期过滤器</el-button> <el-button @click="clearFilter">清除所有过滤器</el-button> &lt

本文将在vue+element ui项目中简单实现menu菜单的懒加载。最近接到这样的需求：菜单的选项不要固定的，而是下一级菜单选项需要根据上级菜单调接口来获取。what? 这不就是懒加载吗？翻了一遍element ui文档，并没有找到menu菜单的懒加载，于是乎就自己手写一个啦。首先最外层，子菜单打开的触发方式为click，用于之后点击调接口：<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" m

不知道大家平时工作中，有没有遇到这样一种情况：后端接口返回的数据，全都是一维的数组，都是平铺直叙式的数据，业务需求却要你实现树形结构的功能。那么，针对这种情况该怎么办呢？是跟后台好好沟通一下呢，还是沟通一下呢:） 下面我将封装一种重组树形结构数据的方法，希望能够给大家带来一点帮助！/** * * @param {Array} data * @param {string} pid 子树找父级的标识，这里面默认子树的标识为id,如果不为id，就再传一个子树id ...