- 博客(128)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 Echart象形图，形成圆柱体柱状图
这里就需要用到type: "pictorialBar", // 象形图形；如何让柱状图有3D的感觉，圆柱体的形状；
2024-03-22 17:21:52
187
原创 使用element-UI Cascader组件，实现第一级单选选,第二级，第三级，子级可以多选
最近开发过程中，遇到需求测一个需求，就是级联选择器，需要多选；参照网上内容，自己整理了一下功能实现；2. 在第一层切换的时候，如果第一次分类改变了，把已有的值清空。思路：1.把第一层的复选框去掉。
2023-10-25 11:09:50
2463
原创 tree与list 数据相互转换js方法
1.tree数组数据转换，list数据数据treeToList(arr){ let res = [] // 用于存储递归结果（扁平数据） // 递归函数 let fn = (source)=>{ source.forEach(el=>{ res.push(el) el.children && el.children.length>0 ? fn(el.children) : "
2022-04-11 19:05:00
2295
原创 vue开发中的http接口请求之axios
前后端分离开发模式下，就离不开和后端的同志接口请求联调。vue中常用的是axios，或者是axios进一步的封装vue-axios；埋雷不误砍柴功，自己整理一份搭建项目时候，要的配置文件。在使用vue cli4搭建完一个项目后...
2021-12-15 15:00:45
593
原创 elementUI踩坑之 table表格当前行row修改数据，视图不更新
1.先看业务场景，table表格每一行中，WWN，是下拉框选项选择T2-10000.。。。选项，数据改变了但是，页面视图没有改变1.注意事项，element表格当前行数据，属性修改；无法更新视图，是由于table监听的是一行数据，而不是某个单元格属性这里需要我们主动触发页面更新，可以用到$set方法。我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。上面的三个参数分别是：data是表格的数据源,index是修改row当前行的索引，row是改后的数据类似...
2021-12-15 14:47:56
5098
3
原创 element-ui 踩坑 table 表格动态添加筛选属性filters报错
element-ui table 表格动态添加筛选属性filters报错问题处理
2021-11-26 10:52:44
2774
1
原创 前端cookie的写入、读取、删除、方法
//写cookies function setCookie(name, value) { var Days = 30; // 设置有效期 var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cookie = name + "=" + .
2021-09-07 15:54:30
1137
原创 js之深浅拷贝整理
1，深拷贝方法-使用递归的方式实现深拷贝（全面，局限性小）function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空，并且是对象或者是 if (obj && typeof obj === "object") { for (key in obj) { if
2021-09-06 17:09:15
79
原创 element-ui table表格复选框 获取当前复选框的状态
在table表格向后端传递勾选数据的时候，难免有时间后，点击当前行的时候，需要知道当前行的checkbox状态，进行一些其他的操作，但是element-ui没有提供，对应的直接api属性这里我要对select的API方法进行处理，达到我想知道当前行checkbox的是否选中的状态<el-table ref="multipleTable" :data="addMemberList" to
2021-09-03 10:38:11
5538
原创 Vue中父子组件向弹出框里的子组件传值props不更新处理
父级组件中使用element的dialog <!-- 表格点击已用值弹窗 --> <el-dialog title="维度明细列表" top="10vh" :visible.sync="dialogTableVisible" :destroy-on-close="true" width="1000px" class="dialogTable" @close="closeDi
2021-08-04 16:19:15
1191
原创 vue+element2.0左侧菜单无线递归渲染
在做一些管理后台的时候；一般会有权限不同看到的菜单也不同。而且菜单结构也是不确定有多少级别，或者无限级别。这里就需要组件递归渲染了后端菜单接口返回如下面这样的：menuArr: [ { name: "首页", url: "/home", icon: "el-icon-s-home", id: 1, }, { name: "菜单",
2021-04-24 20:02:39
610
1
原创 react/vue打包编译后,接口地址配置
在生产环境，前端的静态资源包，可能部署到任意服务器；后端服务提供的接口地址，可能任意的地址，那就需要我们的HTTP请求的接口地址是可配置的，不然每次部署前，先改下地址，打个包再部署极其不便。比如需要配置一些全局的参数之类的：react项目：第一步：在public(static)文件夹，新建个env.js，配置全局window对象属性第二步：在index.js 入口文件，遍历配置的对象属性，写入本地浏览器缓存，然后随时调用if (window.envConfig) { Objec
2021-03-17 17:58:51
1524
2
原创 js多维数组降维处理
在和后端兄弟对接接口的时候，经常遇到一个让人看着脑壳痛的数据形式：比如下图你只是想要一个数组而已，但是后端返回的数据，让你脑壳疼，又得自己改造了数据了。像这样的[1, [2, [3, [4]], 5]];多维数组怎么简单处理成一维数组呢？当然你可以一次次遍历数组处理，这里介绍一个好用的插件 lodash.js库。里面有各种数组和对象的处理方法，自己自行查看api，这里主要讲讲数组的降维处理注意先在页面引入lodash.js//浏览器环境：<script src="lodash
2021-02-19 16:26:05
760
1
原创 vue 子组件调用父组件方法
业务场景：在使用vue开发的过程中，经常会用到，父组件是个表格list, 点击了一个新增按钮，弹个modal 里面子组件是个表单，新增完，子组件 调用 父组件方法，关闭弹框，重新获取数据部分主要代码如下：// 父组件<!-- 新增合约模块 --> <el-dialog :close-on-click-modal="false" title="创建智能合约" :visible.sync="addModalshow"
2021-02-04 17:08:01
377
原创 几个实用的JS 技巧
1. Replace All我们知道 string.Replace() 函数只会替换第一个项目。你可以在这个正则表达式的末尾添加 /g 来替换所有内容。var example = "potato potato";console.log(example.replace(/pot/, "tom")); // "tomato potato"console.log(example.replace(/pot/g, "tom")); // "tomato tomato"2. 数组去重，提取唯一
2020-12-24 11:13:39
95
转载 Vue 中使用lodash对事件进行防抖和节流操作
有些浏览器事件可以在短时间内快速触发多次，比如调整窗口大小或向下滚动页面。例如，监听页面窗口滚动事件，并且用户持续快速地向下滚动页面，那么滚动事件可能在 3 秒内触发数千次，这可能会导致一些严重的性能问题。如果在面试中讨论构建应用程序，出现滚动、窗口大小调整或按下键等事件请务必提及 防抖(Debouncing) 和 函数节流（Throttling）来提升页面速度和性能。这两兄弟的本质都是以闭包的形式存在。通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用 setTimeout 来控制
2020-12-21 18:11:27
1460
原创 element dialog 子组件props存在缓存处理
在使用element-ui的dialog时，弹出窗内嵌套了一个子组件<el-dialog title="部署智能合约" :visible.sync="deployModalshow" width="600px" :destroy-on-close="true" > <v-deployContract @fatherMethod="deploySuccess" :deployName="
2020-12-03 15:45:39
1869
原创 二进制流文件下载
在做一些文件下载的时候，后端返回的二进制流文件，这里前端的兄弟姐妹就需要处理一下了。直接上代码：// 下载export function download(id) { return request({ url: `/rancher/download_contract/${id}`, method: "get" });}download(row.contractId).then(data => { // 二进制流转换 downl
2020-11-19 15:45:56
1337
3
原创 Avue-curd个性化定制
在使用vue(js)+elelment(ui)开发一些后台管理项目的时候，基本会用到 列表页，条件搜索(search),表格数据(table),分页，操作栏的，增、删、改、查几种操作。如下图这样的：很多的页面都很类似，这里就给大家介绍一个，我自己最近研究的一个插件 avue-curd；整体的一个模块，包含列表，增、删、改、查；还可以通过slot插巣自定义局部组件内容如下面，我按照产品自定义：隐藏了搜索模块、操作栏（这些都是可配置的）上代码：主页面<!--列表-->&l
2020-10-29 18:16:43
5266
2
原创 js去除字符串中的无效字符
在项目对接过程中，经常遇到后端的老铁返回是数据，有点问题的情况；如下；返回的字符串有乱码的情况，就需要用正则替换了let str = "["被测试者的测验结果为中度抑郁。从这个结果可以看出，被测试者最近时常出现心境低落现象，如经常感到压抑、抑郁、悲伤、失望、沮丧或忧伤，经常对很多看不顺眼的事情发脾气或责备他人，或者将很小的过失看作是很大的失败。被测试者经常感到兴趣或乐趣的丧失，觉得原有的爱好也失去乐趣，“对任何事情都无所谓”。被测试者的精力明显降低，常感到疲乏或倦怠，经常是做一些很小的事情也要付出
2020-10-19 16:04:56
1062
1
转载 Input用户输入完后再执行方法
在开发过程中，input的用户输入的值，绑定的onchange事件，如果没敲一次键盘，执行一次方法，请求一次数据的话就很耗内存了；这里用一下lodash<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"><
2020-09-16 15:33:19
5862
1
原创 微信小程序函数传参以及获取调用
最近在做微信小程序，发现小程序的页面函数传参和web端不一样，在此做个记录；1.web端函数传参是这样的<Button type="primary" className="mr10" onClick={() => this.loadData({ page: 1 })} // 参数在函数括号内 > 查询 </Button>2.微信小程序端，是需要类似自定义属性的，传参形式，像下面这样：这里我用了vant的ui框框；原生点击事件方法
2020-09-03 11:37:50
6182
原创 mysql 修改root密码
最近在看项目，搭建本地环境时候，忘记mysql的密码，怎么修改密码，网上找了半天，终于配合着几个帖子搞定了，说下流程：情景：在mysql官网直接下载dmg文件进行安装，忘记密码（mac os系统）打开终端：1.关闭mysql服务器sudo /usr/local/mysql/support-files/mysql.server stop这一步需要输入用户管理员密码2.进入目录cd /usr/local/mysql/bin这个是进入你mysql安装目录的bin文件3.获取
2020-08-21 16:06:37
8059
原创 函数n秒后执行 lodash中的debounce
在做一些表单类数据时，需要根据当前输入的值，像后台请求不同的数据；每次键盘输入都会调用接口API，太别频繁；能不能等用户不在输入了，在请求后端，做个延迟；这里就需要用到lodash了，话不多说上代码：1.安装lodash插件npm install lodash2.引入插件开干/* * CRH文件下载 */import React, { Component } from "react";import Storage from "store2";import axios fro...
2020-08-14 16:23:05
810
原创 下载导出文件，处理二进制文件
1.在做一些管理后台项目中，很多表格，需要导出excel的功能；但是很多的后端的哥们，返回的是二进制流文件，这里需要咱们自己处理一下了。话不多说上代码：这里的客户端http请求用的是axios//处理下载流 const download = (content, fileName) => { const blob = new Blob([content]); //创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象 const u
2020-08-12 10:24:25
557
原创 前端起node服务，看前端项目
光大同学，在学习githup上，发现了一些好项目，down下来了，需要看没有后端服务怎么办？那就基于node,起个服务吧，方法如下：看下目录结构: 一个前端文件包 html, 一个node配置server.jsserver.js引用了express和ip两个依赖包，自己npm 安装一下，命令：npm install express ip//引入express中间件，需要下载依赖安装 npm install expressvar express = require('express');
2020-07-20 16:29:11
705
原创 antd 表单动态添加表单项编辑回显数据
在做一些后台管理会用到很多的表单，比如动态项表单，如下图这样的话不多说，上代码/* * 创建修改版本 */import React from "react";import { Form, Notification, Button, Input, Row, Col, Select, Radio, Icon } from "antd";import Request from "@utils/request";import Storage from "store2";import ".
2020-07-07 14:27:17
8447
3
原创 react组件返回上级时，记录上级组件状态
最近开发项目中，做管理后台，很多表格列表，有搜索条件，有分页；在跳转到详情页面，返回时，列表组件重新渲染，之前的搜索条件，分页什么的，都没有记住；还需要重新选，点击，交互体验很不好。1.这里想到2两个办法，一个是吧搜索条件存到缓存中；每次进行读写；条件太多，或者多个上级页面跳转到同一页面，再返回是还得区分，很是麻烦。而且点击浏览器的返回按钮，没办法记录这里我们用路由传递，参数的办法；上级页面把搜索条件传给，下级页面；下级页面返回时，在传给上级页面主要看，state和history传值就行了上
2020-07-01 12:15:04
488
原创 js调取设备摄像头
webAPi,使用js调取设备摄像头<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>video</title> <style> #video { width: 100%; } </style></head><body> <video autoplay
2020-06-10 17:54:23
760
Navicat+Premium_12.0.26_xclient.info.dmg
2021-03-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人