element ui tabs 修改成hover触发点击出现js HTMLCollection数组中的数据无法获取 dorado onRenderCell

本文链接：https://blog.youkuaiyun.com/m0_57454052/article/details/124007258

本文介绍了如何将Element UI的Tabs组件修改为hover触发，并在遇到HTMLCollection数组数据无法获取的问题时，提供了解决方案，包括使用setTimeout函数和等待HTML元素加载的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在el-tabs里添加个ref，删去el-tab-pane里的：name绑定，然后在mounted里添加代码

mounted() {
    this.$nextTick(() => {
      this.$refs.你在el-tabs定义的ref名称.$refs.nav.$nextTick(() => {
        // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
        var target = document.getElementsByClassName("el-tabs__item");
        let that = this;
        for (let i = 0; i < target.length; i++) {
          target[i].addEventListener("mouseover", () => {
            that.$refs.你在el-tabs定义的ref名称.handleTabClick(1, String(i));
          });
        }
      });
    });
  },

这样会出现HTMLCollection数组中的数据无法获取问题

解决方案

- 方法1 使用setTimeout函数

//设置300ms后执行
        setTimeout(function () {
          let target = document.getElementsByClassName('el-tabs__item is-left')
          let that = this as any
          for (let i = 0; i < target.length; i++) {
            console.log(target[i], i)

            target[i].addEventListener('mouseover', () => {
              that.$refs.navTabs.handleTabClick(1, String(i))
            })
          }
        }, 300)

方法2 等待加载 html 元素

      window.addEventListener('load', () => {
          let target = document.getElementsByClassName('el-tabs__item is-left')
          let that = this as any
          for (let i = 0; i < target.length; i++) {
            console.log(target[i], i)

            target[i].addEventListener('mouseover', () => {
              that.$refs.navTabs.handleTabClick(1, String(i))
            })
          }
        })
      })