1. 数组方法累加 var tasData=[1,2,3,4], eval(tasData.join("+")) 不用遍历,最快捷的一种。
2.两个数组里的数据相加或者相乘 利用内存引用地址 来实现例如:
var arr1=[1,2,4]
var arr2=[3,5,7]
function(arr1,arr2){
if (arr2.length == 0) {
return arr1;
} else {
arr1.map((value,index)=>{
arr2[index] *= value;
})
}
console.log(arr2)
}
3.饿了么ui 里面的 穿梭框 el-transfer 初始化定义必须是数组 否则会报 e.splice is not a function 这个错误。
4. 刷新表格 el-table 可以 给它加 :key="mark3" 需要刷新的地方 写上 this.mark3+=1
5.下拉框列表数据不显示 一般都是this指向问题 看一下 axios的返回值 要使用箭头函数。
6. el-table 里面的属性fixed:right 会导致表格错位 最好不要用。
7. el-table 里面自定义需要用到循环的时候最好使用 template 不要用dev ,会导致表格的数据第一列跑到最后一列,很麻烦。
8. 截取一个数组最后几项 可以使用length:var art=[1,2,4,6] 直接art.length=2 保留前两项。
9.字符串截取最后一项 直接使用 arr.split('=')[1] 表示截取 = 后面的值。
10.将一个数组分割成多个数组。例:
var ketData=[1,2,3,4,5,6,7,8,9,10]
var newArray = [];
var index=0;
while(index < ketData.length) {
newArray.push(ketData.slice(index, index+=2));
}
onsole.log('newArray',newArray)
11. echarts 图表如果发现 数据刷新了,但是图表没有刷新,请设置 var myChart = echarts.init(document.getElementById('areacc')); myChart.setOption(option,true); 设置true后会重新构建图表。
12. Object.assign 可以将所有可枚举属性的值从一个或多个源对象分配到目标对象 例如:
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// { a: 1, b: 4, c: 5 }
13. 【重点】 每次遇到el-input 或者el-form 里面内容项 回显后 或者因为其它的 操作影响了 它本身的值,导致无法输入或者选择等, 这个问题一度困扰了许久,解决方法是: 重新绑定他的form值 例如: this.faaForm = JSON.parse(JSON.stringify(this.faaForm)) 还有一种用 this.$set 方法更新单个值,例如: this.$set(this.faaForm, 'workbenchName', item.quotaName)
14.将一组数据放到多个对象的value里怎么实现:例如:
var arr1=[1,2,3,4,5]
var arr2=[
{name:11,value:''},
{name:22,value:''},
{name:33,value:''},
{name:44,value:''},
{name:55,value:''}
]
//把1,2,3按顺序放到下面的value 里
arr2.forEach((item, index) => {
item['value'] = arr1[index];
})
console.log(arr2)
15. el-form 表单里需要清除校验的方法,必须放在$nextTick里面(searchForm为表单绑定的值):
this.$nextTick(() => {
this.$refs.searchForm.resetFields()
})
16. 循环一个对象的key和value值,可以用for in 例如:
let obj = {
'a':'11',
'b':'22',
'c':'33',
};
for(let i in obj){
console.log(i); //a b c d
console.log(obj[i]); // 11 22 33
}
17. 取消el-form 表单的校验,falForm 为el-form ref="falForm " 的值。
//如果 有弹窗之类的 元素组件,切记 必须等弹框加载完 再去清除表单验证的状态 否则报错 Cannot
//read properties of undefined
this.$nextTick(() => {
this.$refs.falForm.clearValidate()
})
18. el-table 索引自动增长(从1开始),不因分页的点击而重新置为1。
<el-table-column type="index" label="序号" :index="indexMethod" > </el-table-column>
// 索引分页自增累加, (当前页-1)*每页显示的条数+table的索引+1
indexMethod(index) {
return (
(this.currentPage - 1) * this.PageSize + index + 1
)
},
19. 记录在部分vue页面,会出现, 页面未加载完成导致出现{{name}}等变量。然后页面渲染完成后消失,怎么解决这个问题呢?只需要在最外层的div上 加入 v-cloak指令,然后再css里加入:
[v-cloak]{ display: none;} 就行了。
v-cloak 是 Vue.js 框架中的一个指令,用于防止在 Vue.js 实例挂载之前显示未编译的模板内容。
20. 使用饿了么ui里面的 el-dialog 弹框时,如果发现打开你的弹框发现它始终处于遮罩层以下,切记加上 :modal-append-to-body="false" 这个属性 ,遮罩层一定不要插入至 body 元素上。否则怎么加 z-index 都没用 (难受)。
21. es6 导出:
当一个模块只需要导出一个主要功能时,可以使用export default导出的项 可以被其他文件使用时省略花括号的直接引用,这在导入时比较方便。可以将其视为默认的、主要的、主导的导出。
function handleFileData(data){ } export default handleFileData; // fileUtils.js
引用:import handleFileData from './path/to/fileUtils.js';
如果有多个方法需要导出:
export function handleFileData(data) { // handleFileData 的实现 }
export function anotherFunction() { // anotherFunction 的实现 } // fileUtils.js
引用:import { handleFileData, anotherFunction } from './path/to/fileUtils.js'
未完待续,遇到问题随时更新。。。