let obj = this.role.find(v => v.code === res.company.role) 循环 data对象中的role数组 ，每个数组元素用v代替，code为他的键，返回找到的数组元素对象。 from:https://www.cnblogs.com/erfsfj-dbc/p/10063533.html
View Details效果： 要点：在表格外加一层div，div宽固定 html：
|
1 2 3 4 5 6 7 |
<div class="project-tests"> <table> <tr v-for="arr in projectTests" v-bind:key="arr[0]"> <td v-for="item in arr" v-bind:key="item">{{item}}</td> </tr> </table> </div> |
postcss：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
div.project-tests { width: 100%; overflow-x:scroll; & table { border-collapse:collapse; & tr { height: 40px; &:nth-child(odd) { background-color: #FAFAFA; } &:first-child { background-color: #EEF1F6; } &:hover { background-color: #EEF1F6; } } & td { border: 1px solid #DFE6EC; padding:8px; white-space:nowrap; text-overflow: ellipsis; } } } |
from:https://www.cnblogs.com/XHappyness/p/7819246.html
View Details两种类型的表格布局 你有两种方式使用表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。 HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。 在W3C关于<table>相关标签的文档中我们可以找到，HTML 4中<table>相关标签的默认样式表： js 代码: table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } 显而易见HTML Table使用标签<table>、<tr>、<td>等标签，就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中可以看出他们的使用对于CSS属性的情况： table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2） inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2） table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2） table-row：指定对象作为表格行。类同于html标签<tr>（CSS2） table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2） table-column：指定对象作为表格列。类同于html标签<col>（CSS2） table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2） table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2） 下面是一些 display:table 示例，你可能会发现它很有用： · 动态垂直居中对齐
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
Html: <button>添加多行</button> <div class="box"> <p>Double Line</p> <p>Double Line</p> </div> LESS body { color: @beige; background: @green; display: table; width: 100%; height: 100%; } .box { display:table-cell; vertical-align: middle; text-align: center; } /*====== Ignore section below ======*/ @orange: #BD4932; @yellow: #FFD34E; @green: #105B63; @beige: #FFFAD5; /* Basic Style*/ * { margin:0; padding:0;} html, body { height: 100%; } button { padding: 5px 10px;position:absolute;bottom: 20px;left:20px;display: block; -webkit-appearance: none;background: @orange; outline: none; border: 2px solid #DB9E36; color: @yellow; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.5);cursor: pointer;} button:active {border-color: @beige; color:@beige;} JS document.querySelector("button").addEventListener("click", function(){ var element = document.createElement("p"); element.innerText = "额外添加的行"; document.querySelector(".box").appendChild(element); |
这也许是使用display:table最常见的例子了。对于动态高度的元素，有了它，就可以实现真正的垂直（居中）对齐。 还有另一个不用display:table实现的垂直居中的简单方式，您可能感兴趣： table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法 找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的：table-layout:fixed; 原理很简单，有爱研究的童鞋可以去css官网看看说明文档。 直接贴代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>转载自·威易网CSS教程</title> <style> table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1em ) } table thead th{ background:#ccc;} </style> </head> <body> <table width="80%" border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>出生年月</th> <th>手机号码</th> <th>单位</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张三封</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴与四十大盗</td> </tr> <tr> <td>张小三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>腾讯科技</td> </tr> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>浏阳河就业</td> </tr> <tr> <td>张三疯子</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张大三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张三五</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张刘三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>张三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> </tbody> </table> </body> </html> |
from:https://www.cnblogs.com/susan-home/p/8761574.html
View Details子组件主动获取父组件的数据和方法： this.$parent.数据 this.$parent.方法 在子组件Header.vue里面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<template> <div> <h2>我是头部组件</h2> <button @click="getParentData()">获取子组件的数据和方法</button> </div> </template> ------------------------------------------------------------------------ <script> export default{ data(){ return{ msg:'子组件的msg' } }, methods:{ run(){ alert('我是子组件的run方法') }, getParentData(){ /* 子组件主动获取父组件的数据和方法： this.$parent.数据 this.$parent.方法 */ alert(this.$parent.msg);//数据 this.$parent.run(); //方法 } } } </script> |
from:https://www.cnblogs.com/sulanlan/p/9932986.html
View Details在微信小程序开发过程中，使用了promise,但是在使用的过程中报Uncaught (in promise)错误，第一次遇到这种错误，所以在此记录下，方便以后解决问题
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
getImage: function(url) { return new Promise((resolve, reject) => { wx.getImageInfo({ src: url, success: function(res) { resolve(res) }, fail: function() { reject("") } }) }); }, //原来 //修改后 getImage: function(url) { return new Promise((resolve, reject) => { wx.getImageInfo({ src: url, success: function(res) { resolve(res) }, fail: function() { reject("") } }) }).catch((e) => {}); }, |
只要在后面加上.catch((e) => {})，就不会报错了 from:https://blog.csdn.net/dwb123456123456/article/details/89083464
View Details一.同步与异步 1. Promise作用：解决异步回调的问题 二.Promise对象 目的：创建异步对象，当异步对象中的异步操作执行完之后，再执行想要执行的东西。 1. resolve 表示将状态变成成功完成，reject 表示将状态变成失败完成。 2. 当resolve方法执行完成之后，再执行then方法。
|
1 2 3 4 5 6 7 8 9 10 |
let p = new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log('执行完毕！'); resolve(); //表示完成 },3000) }); p.then(()=>{ console.log('promise异步操作完成了'); }); |
三.Promise传参 resolve里的参数可以传给then
|
1 2 3 4 5 6 7 8 9 10 |
let p = new Promise((resolve,reject)=>{ setTimeout(()=>{ //console.log('脱完衣服'); resolve(3); },3000) }); p.then((d)=>{ console.log('去洗'+d+'件衣服'); }); -->打印去洗3件衣服 |
四.Promise错误处理 1. reject中存储错误处理的参数，可以传给then方法中的第二个参数
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let p = new Promise((resolve,reject)=>{ setTimeout(()=>{ //resolve('读写成功'); reject('读写失败'); },2000) }); p.then((d)=>{ console.log('执行成功'); },(err)=>{ console.log(err); }); -->读写失败 |
五.Promise.all()-->一个脚本中有多个promise时，监控多个Promise对象执行完成 1.Promise.all([p1,p2,p3]):把promise打包，扔到一个数组里面，打包完还是一个promise对象.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
let p1 = new Promise((resolve,reject)=>{ let time = Math.random()*4000+1000; setTimeout(()=>{ console.log('p1完成'); resolve(); },time) }); let p2 = new Promise((resolve,reject)=>{ let time = Math.random()*4000+1000; setTimeout(()=>{ console.log('p2完成'); resolve(); },time) }); let p = Promise.all([p1,p2)]; p.then(()=>{ console.log(全部执行完毕); }) -->p1和p2全部执行完毕后，才会执行p.then方法里的操作 |
必须确保所有promise对象都是resolve状态 输出["aaaa","bbbb","cccc"] 六. 1.Promise对象的then方法有两个参数，一个是成功后的参数，另一个是失败的参数方法 promise.then(success,fail) 失败鸟 2.new Promise().catch()-->错误捕获 等同于上面的reject，返回“失败鸟” 也可这样使用 七.Promise的方法 1.Promise.resolve('xxx'):将现有的东西，转成一个Promise对象，且是resolve成功状态 输出aaa 等价于下面这句话 2.Promise.reject('xxx'):将现有的东西，转成一个Promise对象，且是reject失败状态 输出aaaa 4.Promise.race():与all的不同之处在于，只要有一个是resolve状态就可以返回 输出aaaa 八. 作者：祝名 链接：https://www.jianshu.com/p/7b1dd9c50d2b 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details今天在一个原来使用AJAX自动缩小选择内容的项目上突然发现当输入名称时，如果输入有特殊字符&的时候，选择的内容不会发生变化，也就是说输入的内容在&后面的内容会被截断，经过查证才发现在客户端使用AJAX发送获取到客户端数据的时候，数据内容是没有经过url编码的就是直接放在url地址上发送了，因为当时考虑到输入的是公司名称，一般不会有特殊字符，也没认真考虑，使用当输入特殊字符&的时候后面的内容就会被截断。解决办法是对要发送的内容进行url编码，可以使用如下javascript函数： escape()，encodeURI()，以及encodeURIComponent()。这几种编码所起的作用各不相同。 escape() 方法： 采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。 不会被此方法编码的字符： @ * / + encodeURI() 方法： 把URI字符串采用UTF-8编码格式转化成escape格式的字符串。 不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + ' encodeURIComponent() 方法： 把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后URL将显示错误。 不会被此方法编码的字符：! * ( ) ' 因此，对于中文字符串来说，如果不希望把字符串编码格式转化成UTF-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用 escape。如果你的页面是GB2312或者其他的编码，而接受参数的页面是UTF-8编码的，就要采用encodeURI或者 encodeURIComponent。 另外，encodeURI/encodeURIComponent是在javascript1.5之后引进的，escape则在javascript1.0版本就有。 本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/nich262/archive/2008/11/03/3208573.aspx from:https://www.cnblogs.com/seasons1987/p/3357775.html
View Details方式1：splice函数 arrayObject.splice(index,howmany,element1,…..,elementX) index：必选，规定从何处添加/删除元素。 howmany：必选，规定应该删除多少元素。未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 element1:可选，规定要添加到数组的新元素。
|
1 2 3 4 |
<script type ="text/javascript"> var arr = [1,2,3,4]; arr.splice(0,arr.length); </script> |
方式2：给数组的length赋值为0
|
1 2 3 4 |
<script type ="text/javascript"> var arr = [1,2,3,4]; arr.length = 0; </script> |
赋予数组的长度小于本身的长度，数组中后面的元素将被截断。 赋予数组的长度大于本身的长度，将扩展数组长度，多的元素为undefined。 方式3：直接赋予新数组 []
|
1 2 3 4 |
<script type ="text/javascript"> var arr = [1,2,3,4]; arr = []; </script> |
这种方式为将arr重新复制为空数组，之前的数组如果没有被引用，将等待垃圾回收。 效率比较： 效率测试代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> var a = []; var b = []; var c = []; for(var i =0 ; i < 100000000;i++){ a.push(i); } console.time('splice'); a.splice(0,a.length); console.timeEnd('splice'); for(var i =0 ; i < 100000000;i++){ b.push(i); } console.time('length'); b.length = 0; console.timeEnd('length'); for(var i =0 ; i < 100000000;i++){ c.push(i); } console.time('赋值[]'); c = []; console.timeEnd('赋值[]'); </script> |
测试结果： splice: 0.010986328125ms length: 0.009033203125ms 赋值[]: 0.024169921875ms 多次测试发现第二种方式最快，第一种其次，大数据量下 第三种最慢。 测试结果可能不严谨。大家仅做参考。 from:https://www.cnblogs.com/jichi/p/10516576.html
View Details先重点说一下可能遇到的坑：主要在原本默认参数的设置以及两个方法的选择上，看完这篇总结你就知道怎么回事了~ throttle API走起 _.throttle(func, [wait=0], [options={}]) func (Function): 要节流的函数。 [wait=0] (number): 需要节流的毫秒数。 [options={}] (Object): 选项对象。 [options.leading=true] (boolean): 指定调用在节流开始前，默认true。 [options.trailing=true] (boolean): 指定调用在节流结束后，默认true。 throttle Demo走起（Vue写法）
|
1 2 3 4 5 6 |
testThrottle: _.throttle(function() { console.log("throttle"); }, 5000, { leading: true, trailing: false }) |
testThrottle方法被绑定在一个按钮上，demo最终的效果是 ： 1、按钮点击后控制台立马打印了throttle——19:39:00； 2、5秒内点击多次按钮，最终只打印一次throttle——19:39:05前； 3、5秒后再点击一次，会重新打印throttle——19:39:05后； PS：lodash默认trailing为true，那么最终的效果是在点击时会立即打印throttle，且5秒后又会再打印一次，即节流之前和之后都会执行该节流函数。 throttle 总结走起 预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期。 简言之：结束时间点不会随点击改变 debounce API走起 _.debounce(func, [wait=0], [options={}]) func (Function): 要防抖动的函数。 [wait=0] (number): 需要延迟的毫秒数。 [options={}] (Object): 选项对象。 [options.leading=false] (boolean): 指定在延迟开始前调用，默认false。 [options.maxWait] (number): 设置 func 允许被延迟的最大值。 [options.trailing=true] (boolean): 指定在延迟结束后调用，默认true。 debounce Demo走起
|
1 2 3 4 5 6 |
testDebounce: _.debounce(function() { console.log("debounce"); }, 2000, { leading: true, trailing: false }) |
testDebounce方法被绑定在一个按钮上，demo最终的效果是 ： 1、按钮点击后控制台立马打印了debounce——19:39:00； 2、5秒内点击多次按钮，最终只打印一次debounce——19:39:05前，假设19:39:04完成了最后一次点击； 3、相对于最后一次点击的5秒后再点击一次，会重新打印debounce——19:39:09后； PS：lodash默认leading为false、trailing为true，那么最终的效果是在点击后等待5秒才会打印debounce，即延迟之前不执行函数，而是在延迟之后执行。 debounce 总结走起 当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔。 简言之：结束时间点会随点击改变 综上所述，适用情况如下： throttle （1）对于键盘事件，当用户键入非常频繁，但我们又必须要在一定时间（阀值）内执行处理函数的时候。例如：一些网页游戏的键盘事件。 （2）对于鼠标移动和窗口滚动，鼠标的移动和窗口的滚动会带来大量的事件，但是在一段时间内又必须看到页面的效果。例如：对于可以拖动的div，如果使用debounce，那么div会在拖动停止后突然跳到目标位置；这时就需要使用throttle。 debounce （1）对于键盘事件，当用户输入比较频繁的时候，可以通过debounce合并键盘事件处理。例如：需要在用户输入完成时进行字符串校验。 （2）对于ajax请求的情况。例如：当页面下拉超过一定范围就通过ajax请求新的页面内容，这时候可以通过debounce合并ajax请求事件。 from:https://www.cnblogs.com/dreamsqin/p/11305028.html
View Details一、安装
|
1 |
cnpm i lodash -S |
二、方法一 1、引入
|
1 2 |
import _ from 'lodash' Vue.prototype._ = _ |
2、使用
|
1 |
this._.debounce(this.handleClick,1000,false) |
二、方法二 1、引入
|
1 |
let _ = require('lodash') |
2、使用
|
1 |
_.debounce(this.handleClick,1000,false) |
三、vue单文件组件中使用 里面分别有我自己写的debounce函数和lodash的debounce函数，效果一样！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<template> <div> <el-button @click="myDebounce">我的debounce</el-button> <el-button @click="_debounce">lodash的debounce</el-button> </div> </template> <script> import { debounce } from '@/utils/util' let _ = require('lodash') export default { methods: { handleClick1() { console.log(`真正执行的函数，次数比较少：handleClick1.....`) }, handleClick2() { console.log(`真正执行的函数，次数比较少：handleClick2.....`) }, myDebounce() { console.log(`myDebounce.....`) this.DB() }, _debounce() { console.log(`_debounce.....`) this._DB() } }, created() { this.DB = debounce(this.handleClick1, 1000, false) this._DB = this._.debounce(this.handleClick2,1000,false) } } </script> |
debounce测试.png 注意：以前我是在data选项里面定义DB:null，然后再methods里面初始化函数，但是需要判断‘如果有了就不赋函数，如果为空就赋’，发现比较麻烦；后来直接在created钩子里面定义，就很方便了！ 作者：斐鸽传书 链接：https://www.jianshu.com/p/907e8a0ee5d7 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details