场景:当左侧为菜单选项,右侧为列表展示;由模块进入当前页面时,需要实现左侧默认选中第一条,且修改对应样式,并根据第一条的id去查询右侧列表数据;这时就需要获取第一条的dom,并触发点击事件。
解决方式:获取最新的dom并触发事件即可。
<span class="custom-tree-node" :class="{ 'specialSpan': colorIndex === index }"> this.$nextTick().then(() => { const firstNode = document.querySelector('.custom-tree-node') firstNode.click() // 触发clickGroup }) clickGroup(obj, ind) { this.colorIndex = ind let params = { group_id: obj.id } // 调用右侧列表 this.getGroupMemberList(params) }
注意:回调方式和 Promise方式均可实现。
1)this.$nextTick(cb)
2)this.$nextTick().then(cb)