element el-tree 默认调用点击事件

原创于 2020-05-06 15:57:16 发布 · 9.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

本文介绍如何在Vue项目中实现当点击表格某数据时，自动跳转到包含树组件的页面并触发默认点击事件。通过监听路由参数和树节点数据，利用$nextTick确保DOM更新后，使用document.querySelector定位树节点并触发点击。

在项目中遇到需求，点击表格中的某一个数据，跳转到有树组件的页面，并默认调用一次点击事件

在watch中监听树绑定的数据

watch: {
    dataList(val) {
      if (this.$route.query.source) {
        if (val) {
          this.$nextTick(() => {
            document.querySelector('.el-tree-node__content').click()
            const type = this.$route.query.nologgingType
            if (type === 'index') {
              this.activeName1 = 'five'
            } else if (type === 'zoneIndex') {
              this.activeName1 = 'six'
            } else if (type === 'zoneTable') {
              this.activeName1 = 'seven'
            } else if (type === 'zoneTableSon') {
              this.activeName1 = 'eight'
            } else if (type === 'table') {
              this.activeName1 = 'nine'
            }
          })
        }
      }
    }
  },