weixin_42484910的博客

原创 vue+elementui给遍历生成表单添加效验

【代码】vue+elementui给遍历生成表单添加效验。

原创 微信小程序-生成canvas图片并保存到手机相册

【代码】微信小程序-生成canvas图片并保存到手机相册。

原创 vue一次监听对象里的多个属性（可用于多个文本框输入值后的计算求和）

【代码】vue一次监听对象里的多个属性（可用于多个文本框输入值后的计算求和）

原创 elementui的步骤条制作（error和success两种状态切换）

功能描述 切换 订单状态 后 点击 搜索按钮 查询。根据数据 去渲染 步骤条的。

原创 vue中关于字符串内含有\n和＜br＞的换行符的不同显示的解决方法

【代码】vue中关于字符串内含有\n和的换行符的不同显示的解决方法。

原创 使用arr.forEach遍历时 想要跳出当前遍历并终止循环下去

/遇到不是数字 就跳出（forEach循环使用return 和 break 不能跳出当前循环 只有使用try和catch抛出异常 结束循环）2.遍历数据-使用foreact 时 用break 跳出循环 会报错，需要使用try{}catch{}抛出异常。1.遍历数组-使用 for 时可以用 break 跳出当前循环 并不在执行下次循环。

原创 vue项目中设置全局loading时 遇到多个请求时loading加载显示问题

多个请求 如果有一个请求成功 则加载动画 就会结束 问题（等所有请求都完成才能结束）- 计数 记录需要加载动画的请求（isLoading不是false的）的接口数量 当关闭时 查看请求（isLoading不是false的）的数量是否完全都走过 确定则关闭。项目设置全局loading动画加载，如果页面一次加载了多个请求 ，当其中有一个接口请求成功后 loading加载动画会消失，但是其实 此时还有一个接口还未 请求成功 那么其实加载动画不应该消失的。

原创 解决vue.esm.js?efeb:628 [Vue warn]: Failed to mount component: template or render function not defined

在 router.js中 引入文件时 没有注明 是引入.vue 导致编辑器以为引入的是.js文件 则报错。在文件中 有相同名称的 .vue 和.js文件在同一级中。

原创 bootstrap 模态框点击弹出时不显示内容 查看element 发现弹框div里没内容

有可能是模态框在html中放的位置不对 必须放在body 最近处。

原创 上传图片（不走后端接口）可以预览上传的图片功能

1.html2.js。

原创 watch监听的immediate:true理解

解释immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。所以当为true时在created周期里就可以不用在写已经在watch中写过的方法了。...

原创 vue中动态给对象添加属性时视图改变和不改变问题

2.数据层次太多，数据修改了，但页面没有重新渲染使用this.$forceUpdate()1.使用this.$set（）或者Object.assign()添加数据。即给对象新增响应式属性。

原创 axios get传递数组 paramsSerializer序列化

axios get传递数组 paramsSerializer序列化

原创 axios.interceptors.request 支持config自定义参数的方法及注意事项

1.在请求头里自定义参数2.直接在config中自定义参数注意**因为axios对传入的参数做了过滤处理，我们需要在过滤白名单数组中增加我们需要的字段（axios/lib/core/mergeConfig.js中），否则config对象里找不到isgetArray,isUpdateUser...

原创 vue项目重写路由push方法出现的Cannot read properties of undefined (reading ‘catch‘)bug

重写路由push的方法// 如果报错可能是vue-router版本问题const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { return routerPush.call(this, location).catch(error => error)}vue-router的版本低了不适配 改成3.1.6版本（或更高都可）...

原创 前端上传xml文件后，前端自行将上传的xml跳转展示到浏览器上

问题描述：解决步骤：1.之前想要在点击view按钮跳转时将xml文件的file对象传递给预览页在预览页进行读取xml内容，但是传递file对象很难实现（如果有人实现了 可以告诉我一下吗 学习下 感谢！）2.之后我就在上传页那里进行读取xml文件 获取到他的文件内容（字符串类型），然后将字符串内容存储在session里（感觉不友好，但还没想到怎么解决，如有人知道 望告知 感谢！）。然后进行页面跳转到预览页// 点击view 跳转到展示xml页面 toXmlView() { //

原创 关于使用async,await,promise.all解决调用多个异步方法时 按顺序拿到数据

1.遇到的问题 描述使用 async和await时，在里面调用了异步函数，在接收返回的对象d后打印对象d数据是全的，但是使用时对象d里的children属性却还没获取到显示undefined2.代码描述 function getData(d){ return new Promise((resolve,reject)=>{ d.forEach(element => { api(element).then(res=>{ element.children = re

原创 更加下拉框切换表格 表格中时间排序高亮显示没有重置问题（其实数据都重置了）

问题描述当切换下拉框 加载表格数据时，如果下拉框code为1时 点击时间排序升序高亮 ，再次切换下拉框 code为2时 表格数据加载，但是时间排序还是升序高亮（没有重置）解决-在表格代码中加入 key ,key是根据 下拉框的code 进行改变 会重新加载表格数据...

原创 当el-select使用搜索时，选中搜索出的下拉选项 然后再次点击显示下拉框时 选中的选项变了的问题

代码问题 重现1.搜索选中一项2.选中后 再次点击展开下拉框3.然后随便点击某处 隐藏下拉框(不是切换下拉框选项)问题 - 不是原来选中的选项了 变了问题原因-解决 （key 值问题 之前是用index 经过一系列的方法 改变options时 index可能不准确对于数据来说）...

原创 vue3.0+vite和vue+vue-cli 构建项目简单说明

查看vue版本号 命令 – npm list vue查看vue-cli版本号命令 --vue -V-----1.----vue-cli 是vue的命令行工具 包含webpack 可以轻松构建一个vue项目–步骤前提npm install vue-cli -g //全局安装 vue-cli （若按照过就不用按）vue init webpack ”项目名称“npm installnpm run dev-----2.-----vite 也是一个相当于vue-cli的构建vue3.0

转载 搭建vue项目（vue2）及搭建完成后需要修改的代码

https://blog.csdn.net/chen13333336677/article/details/100577342

原创 Element el-table 中 type=“selection“ 的列 没法用 if 判断显示隐藏？？

单独在表格中加上 v-if判断是否显示 多选框 没有效果需要在 el-table 中 加上 key值 根据key 不同 重新渲染表格

原创 vue.esm.js?efeb:628 [Vue warn]: props must be strings when using array syntax.

vue.esm.js?efeb:628 [Vue warn]: props must be strings when using array syntax.原因之一（props 书写错误）–多写了个逗号

原创 vue+elementui子组件实时监听父组件数据变化在处理成无限循环问题

前提：子组件实时监听父组件保存方法后返回的数据 （数组），并拿到其数据渲染子页面上（多组表单形式）报错信息：You may have an infinite update loop in watcher with expression “financials1”原因：子组件中监听父组件传入的数据financials1 直接在this.getFiancialInfo()里处理 在其处理的过程中会使financials1里的值改变 从而又触发了监听 进入死循环解决方法1.在data定义一个存放父组件

原创 页面列表里数据会根据点击编辑时-弹出框里表单的数据联动

解决方法 -只需将点击编辑时 携带的 映射数据 给深拷贝 -再继续 在弹框中使用

原创 elementui中表单的效验 和重置 都要定位prop属性

注意： 根据关闭对话框的事件重置表单 要在this.$nextTick中 要不然页面没渲染重置方法报错

转载 关于对象新增的属性需要$set原因

其实在 Vue3.x 还没有发布 bate 的时候， 很火的一个话题就是Vue3.x 将使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。没有无缘无故的爱，也没有无缘无故的恨。为何要将Object.defineProperty换掉呢，咋们可以简单聊一下。我刚上手 Vue2.x 的时候就经常遇到一个问题，数据更新了啊，为何页面不更新呢？什么时候用set更新，什么时候用set更新，什么时候用set更新，什么时候用forceUpdate强制更新，你是否也一度陷入困境。后

原创 浏览器放大 el-select的滚动加载事件失效(已解决)

浏览器正常大小时 .el-select-dropdown__wrap {max-height: 274px;}但是当浏览器放大后 页面是273.99 但是css里的高度还是 .el-select-dropdown__wrap {max-height: 274px;}所以滚动不到底部 触发不了滚动加载事件解决方法 – 将触发到底部滚动加载的方法 改成触发到离底部 40px 就加载如图：...

原创 关于在elementui中的表格 的头部 填写变量 一直不改变为初始值问题（解决）

原创 关于修改项目node-module里的js文件修改后影响打包吗以及修改js正规的步骤

1.关于修改项目node-module里的js文件修改后不影响打包 对于js、css项目（比如webpack打包的），不论是依赖，还是dev依赖，在线上都不用部署这些，因为遇到require和import的语句，webpack会帮您打包模块进去，线上服务器连nodejs的程序都不用安装，js是丢给浏览器解析的。 注:如果修改后无效， 则检查下 node_modules 模块里面的 package.json 文件的 main 配置 这是入口文件，从这个里面修改 因为很多 node_modules 包里

原创 正则表达匹配不能为中文 匹配为字母数字空格特殊符号（两则）

<!-- /^([0-9a-zA-Z_.,+]+\s?)*[0-9a-zA-Z_.,+]$/ 字母数字特殊符号_.,+（还可继续加特殊符号）结尾不能为空格--><!-- /^[^\u4e00-\u9fa5]{0,}$/ 不能为中文 -->

转载 数据的深拷贝 遇到的问题

1. json.parse(json.stringfy()) 一般使用 对于不同数据的返回 var Obj = { func: function () { alert(1) }, obj: {a:1}, arr: [1,2,3], und: undefined, reg: /123/, date: new Date(0), NaN: NaN, infinity: Infin

原创 npm run dev 运行报错第一件事要干嘛

1.检查config中index.js 里运行的ip 是不是自己的ip地址2.没用 在上网一通查3.切记

原创 vue关于父组件传给子组件类型为对象的数据其对象里的数组打印不出来

问题-父组件传给子组件是个对象，打印对象可以看到对象里数组的长度为6， 但直接打印对象里数组发现没有获取到传过来的数组数据解决- 使用watch深度监听此对象 在打印其对象里的数组即可得到完整数据...

原创 获取后台数据与前端定义的数据对比补全

情景：后台返回的表单数据不完整 前端报错 将后台返回的数据遍历与前端初始化的数据对比 后台返回的数据缺少什么 从前端初始化的数据中拿方法function isArray(o) { return Object.prototype.toString.call(o) == '[object Array]';}//判断数据类型export function comparativeData(data, obj, type) { var temp = '' if (type == '

原创 关于新增的下拉框对于历史数据无效 或者填写input时联动问题

数组对象 此为历史数据 一进入页面 获取数据 默认的是通用类型 填写下面的input框时 两个框都随着改变解决-用深拷贝想法：获取后台返回的数据后 -----> 深拷贝下 ---------> 处理数据---------->深拷贝下 ------------> 赋值给使用的数据对象......

原创 关于elementui中时间控件或表单控件输入无法显示问题-

this.set(this.intPublicRecord,this.intPublicRecord[bankruptcyCode],val)−−正确this.set(this.intPublicRecord, this.intPublicRecord[bankruptcyCode], val) --正确 this.set(this.intPublicRecord,this.intPublicRecord[bankruptcyCode],val)−−正确this.set(this.intPublic

原创 elementui 中的表单添加 红*

elementui 中的表单添加 红*

原创 计算属性是原本不能传参 那么如果可以在计算属性里传参数呢

computed: { isShow(){ // arr-当前数组 value-当前字段 return function(arr,keyVal){ return arr.some(item => { return item[keyVal] != "" && item[keyVal] != null; }); } }, },

原创 表单中单独给一个input进行验证

1.在el-form-item 里写:rules 验证规则2.在el-form-item 里写prop 属性 其值 和v-model 一致3.如果进行数字验证 v-model 要写成 v-model.number <el-form-item label="RATING:" :rules="[{ type: 'number', message: 'Must be a numeric value'},{ pattern:/^([1-9]|[1-9]\\d|100)$/, message: 'Plea