- 博客(391)
- 收藏
- 关注
RSS订阅原创 echarts配置项记录
每次使用echarts的时候，需要自定义样式就得去api里找，怪麻烦的。这里梳理一下工作中一些用的少又容易忽略的。更新中～配置项镜像网站官网。
2023-01-13 14:08:44
217
原创 工作记录 -- el-table自定义表头与表头数据改变不重新不渲染问题(表头嵌套popover弹出框和cascader级联选择器)
背景对表格的某一列增加筛选操作；el-table自带api貌似有点麻烦而且好像不太适合从服务端拿数据进行处理（我太菜不知道怎么操作~）解决方案 – 利用插槽注意的问题：没有加key的时候数据是没有渲染上表头不渲染问题： 配合着v-if和对该列增加key值来使用代码：<el-table> ... <el-table-column show-overflow-tooltip min-width="120" :key="Ma
2021-06-21 20:09:47
889
原创 工作记录 -- el-tree筛选树全选获取当前已勾选数（筛选之后的已勾选数量）
背景在使用el-tree控件时，当要获取当前树已勾选的数量，一般会用this.$refs.tree.getCheckedKeys或者this.$refs.tree.getCheckedNodes但是在有筛选条件时，在筛选之后，点击全选，这两个方法获取的数量是错误的，仍然是原始数据的总数。但显然这不是我们想要的结果思路自定义方法，通过获取原始树的节点对visible属性进行筛选，从而获得已勾选的叶子节点树具体实现<template> <div> ... <s
2021-06-18 10:37:23
2059
2
原创 工作记录 --el-tree组合筛选条件（多重筛选条件）的实现
思路将筛选条件都塞到一个对象里，再用this.$refs.tree.filter(obj)时，传入一个对象具体实现data() { return { level: "", type: "", keyName: "", filterObj: { level: "", type: "", keyName: "" }, }},watc
2021-06-18 10:23:50
882
1
原创 工作记录 -- el-date-picker时间选择器禁用相关
禁用当前时间之前的日期（此刻之前）<el-date-picker v-model="ruleForm.executeTime" value-format="yyyy-MM-dd HH:mm" format='yyyy-MM-dd HH:mm' :picker-options="pickerOptions" type="datetime" placeholder="选择日期时间"></el-date-picker>... c
2021-06-10 14:24:55
279
1
原创 工作记录 -- el-select选择的时候没有双向绑定，值没有响应式变化
可能原因：可能数字和字符串没有对应上(value是数字型，但拿到的值是字符串或者反过来)直接对ruleForm={...}进行赋值，把其他的属性覆盖掉了清除了，所以没有这个值了；可以分开赋值，如：// e.gthis.ruleForm.selectValue = 1;this.ruleForm.radioValue = 1;...
2021-04-16 16:10:56
812
原创 工作记录 -- el-tree的一些常用设置及注意事项
表单中的el-tree表单项非空校验 el-treed的一些属性 给el-tree增加全选checkbox根节点 按需实现checkbox禁止勾选（disabled）
2021-04-16 16:04:45
883
原创 在react中使用addFetchFilter
在react中使用addFetchFilter遇到了，但是不像axios那样有interceptors拦截器，所以找到了这个组件或者可以说是插件…?简单记录一下addFetchFilter 源码github<!--这是没用addFetchFilter之前的写法，有点片面且不完整-->// export function _fetch(url, method, body) {// return fetch(url, {// headers: {//
2021-01-26 15:06:30
239
原创 关于前后端分离的利弊
今天被问到了答得很不好…怒记前后端分离的优点解放前端，前端不需要向后台提供模板或后端在前端html中嵌入后台代码；提高工作效率，分工能加明确。前后端各司其职，两者可并行开发，使得开发更加灵活；局部性能提升。前端的路由配置使得页面能够按需加载，无需在一次性加载掉所有的资源，减少服务器并发/负载压力，在页面交互和用户体验上有很大的提升；降低项目的维护成本难。通过目前主流的前端MVC框架，能够快速定位前端的相关问题，代码重构及可维护性增强；即使服务端出现问题或宕机，前端页面也可以友好展示相关提示
2020-12-25 20:08:57
507
原创 工作记录 -- el-table嵌套时报错 typeError: tableId is undefined...
elementUI组件展示方式是table-cell悬停时展示popover，popover内容仍旧是一个表格结构如下：<el-table row-key="id"> <el-table-column> <template slot-scope="scope"> <el-popover> <el-table row-key="id"></el-table> </el-popover> &l
2020-11-10 16:21:21
667
原创 工作记录 -- el-table 取消鼠标悬浮时行高亮效果
使用elementUI的table组件时，会有默认时间：当鼠标悬停时会高亮当前行。如果不想要，可以把颜色设置成背景色，或者任何你想要的颜色： .el-table tbody tr:hover>td { background: #ccc!important }但如果设置了stripe属性，表格会呈斑马纹两种颜色交替，设置颜色这个方法就失效了，这时候就可以禁用事件：.el-table tbody tr { pointer-events:none; }...
2020-11-10 16:12:53
3357
原创 el-input实现防抖
使用element-ui的input时，需求是输入值有变化时就进行事件绑定。有一个事件是@input：在输入值改变时就会触发一次搜索，而当用户连续输入，就会不停地进行搜索，这样会造成连续调用接口，会有性能影响，影响用户体验；之前看过防抖节流相关的一些知识点，也没用过，这次刚好稍微用一下咯// input不再绑定事件<el-input v-model="searchStr" >watch: { if(typeof str === 'string') { if
2020-10-14 17:01:47
4217
原创 elementui之table多选的checkbox--记住勾选状态&&默认勾选且不可取消
首先是表格记住勾选状态之前用的公司的组件，然后手动写方法用this.$set进行状态的勾选但比较麻烦，开了很多数组与对象watch: { tableData(n, o) { ... this.$nextTick(() => { n.forEach( row => { if(row.id == currentId && checkTmpArr[item.id]) { this.$set(row, '_isChecked', true);
2020-09-29 17:28:37
2411
原创 工作记录--多个el-tree切换记住勾选状态
页面： 生成报告，然后报告表单有一项为树形控件，切换tab页展示对应数据el-tabs循环遍历对象languageObj:[{ language:1,tplId:2 }]????一开始思路是切换一次tab调一次接口，然后拿到数据进行展示所以定义了很多变量：lanAll: 对象，key为语言类型，value为对应数据，data绑定lanAll[curLan]idArrAll: 数组，存所有id值；结构同上；idCur：当前语言的id值，在currentChecked方法里进行增删处理idCo
2020-09-17 15:47:18
1356
原创 ES6扩展运算符
很久之前看的这一块，有段时间没怎么用前几天用的时候都有点模糊了总结一下一般应用场景var fun = function(a,b,c){ console.log(a); console.log(b); console.log(c);}var arr = [1, 2, 3];//一下两种写法等效fun(arr[0],arr[1],arr[2]);fun(...arr);深拷贝var arr = [1,2,3];var arr1 = arr;var arr
2020-09-10 14:34:50
114
原创 工作记录 -- 关于分页组件记住page和size
之前实习的写过关于记住页码的，但是写的很麻烦今天看到了这种写法，记录一下在router下的index.js预处理一下就是把pageSize变为一个对象，key存当前路由，value是size值或许可以实现记住page和size的值（即离开页面再回来的时候还是之前的size和page）router.beforeEach((to, from, next) => { let pageSize = JSON.parse(window.localStorage.getItem('pag
2020-08-14 15:35:54
1059
转载 JS获取浏览器信息
最近做项目用到了该方法，之前没接触过，记录一下userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值function getExplore(){ var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] : (s = ua.match(/msie ([\d\
2020-08-10 14:40:33
443
原创 兼容IE11样式 hack
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){ /*兼容IE11*/ .classA{ background-color:black; //等其他样式 }}
2020-07-10 16:57:55
285
原创 template
H5中的template标签中的内容在页面中不会显示是因为该标签自带属性：display: none；在VUE中，如果该标签放在vue实例绑定的元素内部，那么标签内的内容可显示在页面上，但dom结构中是不存在该标签的；但如果template标签并未在实例内部，那么内容不可显示，但dom结构中存在该标签：<div id="app"> <template> <div>可显示内容但dom中无template标签</div> <template&.
2020-06-24 10:38:18
342
原创 modal组件的.sync修饰符
之前工作中在自定义组件时有用到modal组件，官方文档里都会在modal里写<fui-modal :visible.sync="visible" on-close="close">.sync修饰符：当值更新时，会显示触发更新事件而子组件接受父组件传值时，不能对其直接进行改变因此，自定义组件里要把这个修饰符去掉，不然关闭modal时会报错...
2020-05-21 11:39:29
344
原创 keep-alive组件
用该标签包裹组件时，会缓存不活动的组件实例。主要用于保留组件状态或避免重新渲染。比如，列表有详情页会进行 列表页与详情页 之间的多次切换这时可以对列表组件使用<keep-alive>进行缓存，这样用户每次返回列表时，都能从缓存中快速渲染而非重新渲染。这样会减轻服务器压力，提高性能。...
2020-05-21 11:39:18
140
原创 js深拷贝的实现
deepClone(obj){ var target = {}; //目标数组 for(var key in obj){ //遍历属性 if(Object.prototype.hasOwnProperty.call(obj,key)){ //绑定this，遍历每个属性 if(typeof obj[key] === "Object"){ //如果是Object继续递归赋值 target[key] = this.deepClone(obj[key]); }else{
2020-05-21 09:54:04
135
原创 父子组件通信
this.$emit =>子组件向父组件传递事件并携带参数子组件：向父组件传递事件toDetail并传递参数resthis.$emit('toDetail'.res);父组件：监听事件并输出参数<Child-Comp @toDetail="toDetails"></Child-Comp>...
2020-05-21 09:48:57
190
原创 Element-UI中为上传组件添加表单校验规则的清除
为upload组件外层的form-item添加ref；在upload组件上传成功后(onsuccess), 通过this.$refs.element.clearValidate()清空该组件的校验规则
2020-05-14 16:43:35
879
原创 一些杂七杂八的笔记汇总（前端）
大部分笔记都记在了本子上，现在做个汇总分类，顺便复习一波之前的一些知识点~个人感觉，记笔记的作用，除了方便查阅，更重要的一点是后来的某个时期再回看时会有“这么简单的知识点怎么都往上写”的想法，这就证明，自己又进步了很多呀丿(＾)ﾉHTML一个页面不能存在多个title元素；bgcolor设置背景颜色，background设置背景图片；img标签中的 alt 属性作用是提供替代图片的信息，使屏幕阅读器能获取关于图片的信息<em>表示被强调呈现的内容，<i>是物理上的斜体；
2020-05-14 16:31:55
318
原创 Vue学习笔记（updating~）
v-text 会覆盖元素中原本的内容，但 插值表达式只会替换自己占的这个位置，而不会清空原元素内容/**** msg1: 123** msg2: '<h1>+++h1+++</h1>'*/<p>{{msg1}}</p><h4 v-text="msg1">====</h4><div>{{msg2}}...
2020-05-06 10:42:41
261
原创 JS遍历 之 foreach && map
知识点+1之foreach和map的区别map有返回值（新的数组），foreach没有（undefined）；如果只是遍历而对数组没有什么实质性操作（不改变数据，而只是想用数据做一些事情 – 如存入数据库或打印）的话，用foreach就可。定义foreEach()无返回值，返回undefined会修改原数组foreach的执行速度较慢map()返回一个新数组【exam...
2020-04-04 18:30:05
231
转载 网页添加水印js
参考一通常加动态水印的思路是：后台服务端根据参数动态生成图片，前端设置body的background-url或者利用遮罩层+事件委托的方式实现。本文在这里主要是利用HTML5中canvas来实现动态生成图片，再利用body设置background-url来实现为网页增加文字水印/*** 为网页添加文字水印* @param {String} str 要添加的字符串*/function ...
2019-12-13 16:19:08
279
原创 基础梳理之 定位（position）
一、positionrelative 相对定位（1）参考对象是自己，即自己原来所在位置的左上角为坐标系的原点（2）移动后，之前的位置依旧保留，不会被其他元素占用（3）可能导致元素重叠absolute 绝对定位（1）参考对象是position!=static的最近的祖先元素（如果没有就以页面文档的初始位置为参考点）（2）脱离文档流，即直接在文档流中删除，元素原来的位置会被占用（3）...
2019-12-13 16:04:29
305
原创 基础梳理之 标签默认样式及css reset
一、浏览器标签的一些默认样式部分：body { margin: 8px; line-height: 1.12 }h1 { font-size: 2em; margin: .67em 0 }h2 { font-size: 1.5em; margin: .75em 0 }h3 { font-size: 1.17em; margin: .83em 0 }h4, p, blockquote,...
2019-12-10 16:20:50
377
原创 Angular1.x解析md并展示（代码高亮+行号展示）
源码：angular-markdown-it好像最近和markdown缠上了…?这两天在研究Angular1.x解析md文件网上搜了很多，发现好像使用于1.x版本的只有markdown-it这个插件了对着github上的源码弄了好久照着他的步骤来的话，可以展示标题呀斜体呀这些md格式，也会有代码块，但是代码不高亮引入highlightjs之后发现也不高亮然后想去改highlight...
2019-12-09 15:44:49
673
原创 基础梳理之padding
paddingpadding 不支持任何形式的负值，设置之后没有效果（和 padding：0效果相同）padding 的百分比值为父元素宽度的百分比（ex：padding: 20% 为父元素宽度的20%应用于该元素的padding值）padding设置后会影响元素的尺寸（实际宽度会变成原元素宽度+padding*2）如果元素设置了背景颜色的话，会对内联元素有视觉上的影响，对外部元素的尺寸...
2019-12-06 16:41:47
546
原创 基础梳理之 line-height
line-height一、作用设置行间距二、属性值normal 默认值，大部分浏览器取1.2，取决于font-familynumber 无单位数值，该数字会与当前字号相乘来设置行间距【推荐使用，避免在继承时产生不确定的结果】（可理解为系数，子元素仅仅继承该系数，子元素的行间距是自身元素字号与该系数相乘的结果）length 设置固定的行间距（单位有px、em等）% 基于当前字体尺寸的...
2019-12-06 10:19:03
245
原创 基础梳理之 标签使用规范
部分嵌套规则span 不能嵌套 div，div可以嵌套spanp 不能嵌套块级元素button尽量不要套div，（火狐浏览器下会有bug），不可以嵌套a元素a元素里不能嵌套交互式元素（a,button,select等）form元素里不能直接包含input元素（属于行内元素，form只能包含块状元素）table元素只能包含caption,colgroup,col,thead,tbody...
2019-12-05 16:21:00
500
原创 vue解析markdown字符串并展示（代码高亮+代码行号显示）
上周看了很久的md然后弄得差不多了嘛，但是上次那个只支持md文件的解析，如果是直接解析字符串的话，就没有办法了。所以，今天看了也搞了好久… 解析md文件看这里解析md字符串看下面????在上一次的基础上，安装依赖npm install text-loader --savenpm install vue-markdown --save在 webpack.base.config.j...
2019-12-04 16:36:50
3659
2
原创 基础梳理之 div 与 span 的区别
div 与 span 的区别div 是块级元素，span 是行内元素； div 和 span 单独写出来默认的样子是差不多的，但是div 会占据一整行，而 span 占据的宽度由其内容的宽度决定； div 可以设置 width 和 height，span 不可以； div 可以设置四个方向的 margin 和 padding，span 只能设置左右margin 和 padding，不能...
2019-12-02 10:32:57
466
原创 vue解析markdown文件并展示（代码高亮+代码行号显示）
因为项目需要吧！然后让我看下 vue 解析 markdown 文件怎么处理然后我就开始了茫茫求学路 茫茫百度谷歌之旅为时不知道多少天，总算搞出点效果了吧！！记录一下搜的时候看到了很多插件，最后用的是 vue-markdown-loader下载相关依赖markdown插件npm i vue-markdown-loader@0 -Dmarkdown样式表npm install ...
2019-11-25 17:47:05
6684
6
原创 antd--Menu 遇到的一些问题
目录一、跳转路由后不会自动选中二、滚动条样式设置三、刷新页面后记住滚动条位置并自动滚动项目中写了左菜单栏，用了蚂蚁组件里的 Menu；最终效果类似这样的：记录一下遇到的一些问题；一、跳转路由后不会自动选中这里将leftMenu封装成一个组件，每次加载一个页面时比如点击菜单跳转路由后都会重新渲染 leftMenu，所以会导致默认选中项一直为设置的默认值，不会根据点...
2019-10-25 13:24:40
4272
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人