vue中使用el-tree的懒加载的时候祛除不必要的三角形,解决HTMLCollection为空
需要将el-tree的懒加载的没有用到的三角形祛除需要祛除的部分,如下图中的第三级的文件,这是最后一层,所以左边的三角形加载按钮没有意义,需要祛除实现思路:如下图,因为三角形按钮是element-ui渲染出来的,无法通过在代码里设置样式,需要使用js操作dom来隐藏三角形。下面的元素是可以获取的元素,上面的是element-ui渲染出来的元素。需要通过已知的元素来查找到三角形的元素如何隐藏。//
·
需要将el-tree的懒加载的没有用到的三角形祛除
需要祛除的部分,如下图中的第三级的文件,这是最后一层,所以左边的三角形加载按钮没有意义,需要祛除
实现思路:如下图,因为三角形按钮是element-ui渲染出来的,无法通过在代码里设置样式,需要使用js操作dom来隐藏三角形。下面的元素是可以获取的元素,上面的是element-ui渲染出来的元素。需要通过已知的元素来查找到三角形的元素如何隐藏。
// 根据图标的类名获取到当前的元素
const childNodeArr = document.getElementsByClassName('r-insert-image')
获取到的结果,HTMLCollection[],虽然显示的是lenght为1,可是list为空,无法操作元素
原因:
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:
// 把代码放到this.$nextTick里面,等整个视图渲染完毕后打印,结果还是没有数据,后面在里面使用延迟函数,将代码延迟10毫秒,这个时候可以获取到数据,不过也有一个问题,不知道内容什么时候渲染完成
this.$nextTick(function() {
setTimeout(() => {
console.log(document.getElementsByClassName('r-insert-image'))
},10)
})
// 实现代码,由上面的图片可以看到元素之间的关系,然后操作元素获取到三角形,然后隐藏掉即可
this.$nextTick(function() {
console.log(document.getElementsByClassName('r-insert-image'))
// eslint-disable-next-line no-unused-vars
setTimeout(() => {
const childNodeArr = document.getElementsByClassName('r-insert-image')
console.log(childNodeArr)
for (let i = 0; i < childNodeArr.length; i++) {
console.log(childNodeArr[i].parentNode.parentNode.parentNode.firstChild)
const loadNode = childNodeArr[i].parentNode.parentNode.firstChild
console.log(loadNode)
const customNode = childNodeArr[i].parentNode
console.log(customNode)
loadNode.style.display = 'none'
customNode.style.marginLeft = '15px'
}
}, 10)
})
实现效果:此时,最后一层的三角形没有了
更多推荐
已为社区贡献10条内容
所有评论(0)