机缘
刚接触到CSDN的时候只是看到里面有很多大牛分享的博客、技术代码,感觉好厉害,遇到问题的时候也会习惯性在里面搜找解决方法,后来想想我自己遇到的问题并解决以后是不是也可以分享给大家,所以就决定也通过这种方式来记录一下吧。
收获
2023都过去一半了,时间是真的快,从创作第一篇博客到现在已经3年时间了,在这漫漫的岁月长河中我也学习到、接触到了很多新的前端知识。从0到1,一点一点成长起来,通过写博客的方式记录下了自己学习的内容以及项目实践中遇到的难点,回头看,轻舟已过万重山,见证到了自己努力的那一刻,还是蛮有成就感的。还有看到自己部分博客阅读量大几千的时候、被收藏点赞的时候,还是挺开心的,证明自己写的内容还有有点用处的 嘿嘿~
日常
现在的博客创作还是主要以分享自己遇到的难点解决方法为主,功能开发完成以后都会整理下来分享到这里,但是可能随着经验的增长也或者是最近接触到的项目没那么难,特别难处理的功能也没那么多了,不过遇到的话还是会第一时间在这里分享记录出来,以后也会多加学习,再分享一些新学到的小技巧。
成就
这是一块处理树状图半选状态并灵活父子级关联功能的一块代码,感觉还是比较有成就感的,在博客中也发布过。
// 覆盖原有勾选功能,父与子关联,子与父不关联
handCheck (data, node) {
this.hanleCheck(data, node, 'tree')
},
hanleCheck (data, node, treeName) {
// console.log(data, node);
const _this = this
// 获取当前节点是否被选中
const isChecked = _this.$refs[treeName].getNode(data).checked
// 如果当前节点被选中,则遍历下级子节点并选中,如果当前节点取消选中,则遍历下级节点并取消
if (isChecked) {
// 判断该节点是否有下级节点,如果有那么遍历设置下级节点为选中
data.children && data.children.length > 0 && setChildreChecked(data.children, true)
} else {
// 如果节点取消选中,则取消该节点下的子节点选中
data.children && data.children.length > 0 && setChildreChecked(data.children, false)
}
function setChildreChecked (node, isChecked) {
node.forEach(item => {
item.children && item.children.length > 0 && setChildreChecked(item.children, isChecked)
// 修改勾选状态
_this.$refs[treeName].setChecked(item.name, isChecked)
})
}
},
checkChange (data, checked, indeterminate) {
let _this = this;
// console.log(data, checked, indeterminate);
// 选中全部子节点,父节点也默认选中,但是子节点再次取消勾选或者全部子节点取消勾选也不会影响父节点勾选状态
let checkNode = _this.$refs.tree.getNode(data)//获取当前节点
// 勾选部分子节点,父节点变为半选状态
if (checkNode.parent && checkNode.parent.childNodes.some(ele => ele.checked)) {
checkNode.parent.indeterminate = true
}
// 勾选全部子节点,父节点变为全选状态
if (checkNode.parent && checkNode.parent.childNodes.every(ele => ele.checked)) {
checkNode.parent.checked = true
checkNode.parent.indeterminate = false
}
// 如果取消所有第二节点的勾选状态,则第一层父节点也取消勾选
if (checkNode.level == 2 && checkNode.parent.childNodes.every(ele => !ele.checked)) {
checkNode.parent.checked = false
checkNode.parent.indeterminate = false
}
},
憧憬
未来还是会多多学习新的技术,同事也会复习基本内容,还有自己项目中遇到的功能难点,这些都会尽可能多的在这里记录分享,一起进步,加油呀!!!