1、树形数据转换
在处理商品分类数据、企业列表数据等情况下,后台会返回到前台所有的数据。我们需要根据parentId,数据ID将数据转换为树形数据进行渲染。
/**
* 树形数据转换
* @param {*} data
* @param {*} id
* @param {*} pid
*/
export function treeDataTranslate(data, id = 'id', pid = 'parentId') {
var res = []
var temp = {}
for (var i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i]
}
for (var k = 0; k < data.length; k++) {
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
if (!temp[data[k][pid]]['children']) {
temp[data[k][pid]]['children'] = []
}
if (!temp[data[k][pid]]['_level']) {
temp[data[k][pid]]['_level'] = 1
}
data[k]['_level'] = temp[data[k][pid]]._level + 1
temp[data[k][pid]]['children'].push(data[k])
} else {
res.push(data[k])
}
}
return res
}
2、获取当前年月日
/**
* 获取当前年与日
* 格式为 YYYY-MM-DD
*/
export function getNowFormatDate() {
let date = new Date();
let seperator1 = "-";
let year = date.getFullYear();
let month = date.getMonth() + 1;
let strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
let currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
3、对象的深拷贝
在vue项目中,常常会碰到编辑数据的问题。当用户点击了编辑,进行数据编辑。然而并没有进行保存,这样就会导致页面数据保留更改(双向数据绑定)造成很不好的体验。这时就需要对对象进行深拷贝来避免这个问题。
export function deepClone(source) {
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'shallowClone')
}
const targetObj = source.constructor === Array ? [] : {}
for (const keys in source) {
if (source.hasOwnProperty(keys)) {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = source[keys].constructor === Array ? [] : {}
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys]
}
}
}
return targetObj
}
未完待续。。。