前言
最近突然想总结一下开发中所遇到的问题和一些小方法，会一直更新直到不在做开发！
1.数组判断长度和元素相等
isContained =(a, b)=>{
if(!(a instanceof Array) || !(b instanceof Array)) return false;
if(a.length != b.length) return false;
for(var i = 0, len = b.length; i < len; i++){
if(a.indexOf(b[i]) == -1 || b.indexOf(a[i]) == -1) {
return false;
}
}
return true;
}
arr1 = [1,2,3,4,'obj'];
arr2 = [4,3,2,1,'obj'];
alert(isContained(arr1,arr2));
2.elementUI 使用心得
双击表格
<el-table @row-dblclick="dbSelected">
</el-table>
el-table的属性show-header，默认值是true，也就是默认有表头，即使我们没有定义，也会默认添加表头。
(2). Tree 树形控件默认勾选指定的子节点
const nodesList = [ 1, 5, 7, 8, 9 ] //后端返回的已勾选的项 通过字段判断出id是选中的
this.$nextTick(() => {
const nodes = []
nodesList.forEach(item => {
const node = this.$refs.tree.getNode(item); // 获取所有的节点
if (node.isLeaf) { //关键，过滤掉不是叶子节点的
nodes.push(item)
}
})
this.$refs.tree.setCheckedKeys(nodes,true) //通过 id 设置目前勾选的节点
})
(3). 隐藏table的滚动条(注意：隐藏后横向滚动条也不会出现 所以以后除了打游戏都应该变成Macbook的触控板 这才是发展方向)
滚动隐藏
/deep/.el-table {
.el-table__body-wrapper{
scrollbar-width: none;
-ms-overflow-style: none;
}
.el-table__body-wrapper::-webkit-scrollbar{
width: 0;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
width: 0;
}
}
(4). InputNumber 计数器的问题
问题描述：
1：在父组件把数据传入到子组件：
2：子组件中使用 el-input-number
3：传入的内容为数量 1 或者其它，
数据可以从父组件传入到子组件，
但是el-input-number 里面不管是按 + 还是 -
只能变成 0 或者2，
无法在进行增加了。
<el-input-number v-model="scope.row.num" :precision="0" :min="1" label="" @change="changeVal($event)">
changeVal() {
this.$forceUpdate();// 解决办法
}
(5). el-table 组件 表头右侧多出一部分
image.png
原因：
所有 el-table-column 都设了宽度，当内容超出高度滚动条出现，表头多出一列滚动条上方的占位
解决：
将 th.gutter 隐藏或将 th.gutter 移动到滚动条上方
/* 隐藏 不兼容iE */
th.gutter {
display: initial;
}
/* 移动 兼容IE*/
th.gutter {
background-color: #f1f1f1;
position: absolute;
height: 100%;
right: 0;
}
/* vue 使用 scoped 需要 /deep/ 深度作用 */
div /deep/ th.gutter {
display: initial;
}
(6). 遇到耗时操作使用loading的时候 不会有效果
// 使用setimeout 将耗时操作放到setimeout里
// 将loading关闭的方法也放入setimeout里
setTimeout(() => {
}, 100);
(7). el-table底部空白，el-table__body-wrapper is-scrolling-left元素高度计算错误
// 设置表格body的高度
.el-table__body-wrapper {
// 减去的是表格header的高度
height: calc(100% - 40px) !important;
}
(8). 多个dialog展示的时候会出现遮罩层一直存在问题
// 设置表格body的高度
.el-table__body-wrapper {
// 减去的是表格header的高度
height: calc(100% - 40px) !important;
}
3.对象数组筛选 并 合并 指定字段完全相同进行项合并
mergerData(arr) {
let result = new Map()
if (arr.length > 1) {
return arr.reduce((list, item)=>{
let key = item.fulfillType + item.currencyCode; // 这里是你需要多少相同字段拼接成字符串 作为标识
if(result.has(key)){
// 如果字段相同 进行需要合并字段合并或者相加 逻辑处理
result.get(key).amount =
new Decimal(result.get(key).amount).add(item.amount).toNumber()
result.get(key).fulfillAmount =
new Decimal(result.get(key).fulfillAmount).add(item.fulfillAmount).toNumber()
}else{
// 如果不相同则加入结果
let data = {...item}
list.push(data)
result.set(key, data)
}
return list
}, []);
} else {
return arr
}
},
4. 对比两个数组 如果不同项进行合并
var arr = [
{id:'9999'},
{id:'8888'},
{id:'7777'},
{id:'5555'},
{id:'4444'},
]
var brr = [
{id:'8888'},
{id:'7777'},
{id:'2222'},
{id:'3333'},
]
let catArr = []
for (let i= 0; i< arr.length; i++) {
for (let j = 0; j < brr.length; j++) {
if(arr[i].id == brr[j].id ){
// 如需替换
// arr[i] = brr[j]
break
}
if( j === brr.length-1 ){
catArr.push(arr[i] )
}
}
}
brr.concat(catArr)
console.log(brr)
5.如何将大型项目从 Vue 2 迁移到 Vue 3
How to Migrate a large project from Vue 2 to Vue 3
6.display:-webkit-box；在IE浏览器中不兼容问题
一般做文字仅显示两行 会这样做
span{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
但是display:-webkit-box；在IE浏览器中不兼容
// 解决方案：注意省略号不会存在 需要自己写样式
加一句display: -ms-flexbox;代码就可以兼容IE了（只能兼容到IE10），
display: -webkit-box; （Chrome 4+, Safari 3.1, iOS Safari 3.2+）
display: -moz-box; （Firefox 17-）
display: -webkit-flex; （Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16）
display: -moz-flex; （Firefox 18+ ）
display: flex;（Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+
7.vue中change事件的冒泡阻止
在Vue中，如果想阻止点击事件冒泡，可以直接使用 .stop 修饰符即可
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
像上面这样，点击按钮时就不会触发到父元素的 divClick 事件。
当我们试着给 change 事件加上 .stop 修饰符时，发现并未起到阻止冒泡的作用，父元素 的 点击 事件还是执行了。
这个时候，我们可以通过使用原生事件 event.stopPropagation() 来解决这个问题。
stepperChange() {
event.stopPropagation(); // 阻止事件冒泡
console.log('change事件触发');
}
像上面这样在方法中加入一行代码，就可以了。
