vue3 数据大屏项目 开发中Vue3SeamlessScroll滚动组件在与element-plus的el-tooltip使用时，会导致页面崩溃，所以这里我们需要调整一下，当鼠标移入对应的区域的时候才会切换到el-tooltip,当鼠标移开后，则恢复到最简单的p标签，这样就不会导致页面崩溃了。

实现代码

<template>
  <div class="cardBodyInfo">
    <Vue3SeamlessScroll :step="0.5" :wheel="true" :hover="true" :list="list" class="cardBodyInfo2">
      <div class="item" @mouseover="showComponent(index)" @mouseleave="hideComponent(index)"
           v-for="(item,index) in list" :key="index">
        <el-tooltip
            v-if="showComponents==index"
            effect="dark"
            raw-content
            :content="item.bt+'<br>'+item.fbrq+'<br>'+item.dzz"
            placement="top">
          <p>{{ item.bt }}</p>
        </el-tooltip>
        <p v-else>{{ item.bt }}</p>
      </div>
    </Vue3SeamlessScroll>
  </div>
</template>

<script>
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";

export default {
  name: "title",
  data() {
    return {
      showComponents: -1
    }
  },
  components: {Vue3SeamlessScroll},
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {},
  mounted() {

  },
  methods: {
    showComponent(itemId) {
      this.showComponents = itemId;
    },
    hideComponent(itemId) {
      this.showComponents = -1;
    }
  }
}
</script>

<style lang="scss" scoped>
.cardBodyInfo {
  position: relative;
  width: calc(100% - 35px - 20px);
  margin-left: 35px;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .cardBodyInfo2 {
    width: 100%;
    position: relative;
    height: calc(100% - 20px);
    overflow: hidden;
  }

  .item {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);

    p {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #94B9D4;
      line-height: 30px;
    }

    span {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #94B9D4;
      line-height: 30px;
    }
  }

  .item:hover {
    p {
      color: rgba(2, 228, 255, 1);
    }
  }
}

</style>