element-plus el-table组件表格自动滚动 9不显示问题 vue3

我想要一个表头不变，内容从下往上的vue3自滚动表格，
然后我把这此段代码引用复制在一个新建的vue文件中但是不显示！控制台是这样：

```html
​
<template>
    <div class="alarm-infoList">
        <div>告警列表</div>
        <el-table class="alarm-table" :data="tableData" style="width: 100%;height:200px;">
            <el-table-column v-for="item in tableHead" :prop="item.prop" :label="label" :key="item.prop" />
        </el-table>
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    const tableHead = [
        {
            prop: 'index',
            label: '序号'
        },
        {
            prop: 'warnDevice',
            label: '告警设备'
        },
        {
            prop: 'warnInfo',
            label: '告警信息'
        },
        {
            prop: 'createTime',
            label: '告警时间'
        },
        {
            prop: 'state',
            label: '状态'
        }
    ]
    const tableData = []
    for (let i = 0; i < 12; i++) {
        tableData.push({
            index: i + 1,
            warnDevice: `设备`,
            warnInfo: '预警信息预警信息预警信息预警信息',
            handlePersonnel: 'admin',
            state: '未确认',
            createTime: '2022-5-31 09:30:00'
        })
    }
let scrollHeight = 0
    let currentScrollTop = 0
    let maxScrollTop = 0
    let timeInter = null
    let timeInter2 = null
    const tableNode = ref(null)
    onMounted(() => {
        setTimeout(() => {
            updateList()
        }, 1000)
    })

    function updateList() {
        // 数据大于3条才会滑动
        if (tableData && tableData.length > 3) {
            // 获取滑动区域DOM 最新版本的element-plus节点有变化, 此版本为1.2.0-beta.3
            tableNode.value = document.querySelector('.alarm-table').querySelector('.el-table__body-wrapper')
            // 设置每次滑动几行
            scrollHeight = tableNode.value.querySelectorAll('tr')[0].offsetHeight * 3
            // 设置每次滑动的PX和滑动区域的高度
            tableNode.value.style.height = `${scrollHeight}px`
            // 获取最大滑动空间
            maxScrollTop = tableNode.value.firstElementChild.offsetHeight - scrollHeight
            // 开始
            restTimeInter()
        }
    }

function restTimeInter() {
        // 清除所有定时器
        clearAllInterval()
        // 设置定时器
        timeInter = setInterval(setMultiLine, 4000)
    }
    function clearAllInterval() {
        clearInterval(timeInter)
        clearInterval(timeInter2)
    }
    function setScrollTop() {
        tableNode.value.scrollTop++
        if (tableNode.value.scrollTop >= currentScrollTop) { // 达到下次应该滑动的位置
            clearInterval(timeInter2)
        }
        if (tableNode.value.scrollTop > maxScrollTop) { // 滑到底了
            tableNode.value.scrollTop = maxScrollTop
            clearInterval(timeInter2)
        }
    }
    function setMultiLine() {
        // 下次应该滑到哪
        currentScrollTop = (tableNode.value.scrollTop || 0) + scrollHeight + currentScrollTop % scrollHeight
        if (tableNode.value.scrollTop >= maxScrollTop) { // 滑完了 重置
            currentScrollTop = 0
            tableNode.value.scrollTop = 0
            restTimeInter()
        } else {
            // 清除上一个定时器
            clearInterval(timeInter2)
            // 开始滑
            timeInter2 = setInterval(setScrollTop, 5)
        }
    }
</script>

<style lang="less" scoped>
    .alarm-infoList {
        padding: 15px;
        box-sizing: border-box;

        :deep(.el-table) {
            background-color: transparent;
            color: #fff;

            th {
                background-color: transparent;
            }

            tr {
                color: #fff;
                background-color: transparent;

                &.el-table__row--striped {
                    td.el-table__cell {
                        background-color: transparent;
                    }
                }

                &:hover {
                    td.el-table__cell {
                        background-color: transparent;
                    }
                }
            }
        }
    }
</style>

​

```

是不是没配置相应的路由和组件对应，控制台提示没有找到/scroll路径对应的match

【以下回答由 GPT 生成】

具体问题是在Vue3中使用element-plus的el-table组件实现自动滚动但不显示。

对于这个问题，我首先需要确认您期望的效果是什么。是希望表格内容自动滚动，同时表格的高度固定并且只显示部分内容，而不是显示所有内容吗？

如果是这样，可以采用以下几个步骤来实现：

1. 首先，确保您已经正确安装了element-plus和Vue3的相关依赖库。

2. 在data中添加一个变量scrollY，用于控制表格的滚动。

import { ref } from 'vue'

// ...

const scrollY = ref(0)

1. 在el-table上添加:style绑定属性，并将scrollY绑定到max-height上。

<el-table :data="tableData" :style="{ 'max-height': scrollY + 'px' }">

1. 在mounted钩子函数中，计算表格的最大高度，并将其赋值给scrollY。

import { onMounted } from 'vue'

// ...

onMounted(() => {
  const tableHeight = document.querySelector('.alarm-table').offsetHeight
  const headerHeight = document.querySelector('.alarm-table .el-table__header-wrapper').offsetHeight
  const rowHeight = document.querySelector('.alarm-table .el-table__row').offsetHeight

  // 根据需要显示的行数计算出最大高度，并将其赋值给scrollY
  const maxRowCount = 5
  scrollY.value = headerHeight + maxRowCount * rowHeight - tableHeight
})

这样，表格就会自动滚动并只显示固定数量的行数，其余的内容会被隐藏起来。

如果您的问题是关于错误或警告信息，请提供更多上下文和详细描述，以便我能更好地帮助您解决问题。如无其他问题，以上是解决问题的具体步骤。

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7633353
• 这篇博客也不错, 你可以看下element el-table表格的vue组件二次封装（附表格高度自适应）
• 除此之外, 这篇博客: element-vue中el-table去除鼠标悬停背景色中的 问题： 部分也许能够解决你的问题。