vue3滚动列表不显示

<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.vue文件中，npm run dev不显示呢？需要改什么吗？

需要做这么多操作吗？
固定表头，然后定高不就行了

Table 表格 | Element Plus a Vue 3 based component library for designers and developers https://element-plus.org/zh-CN/component/table.html#%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4

【以下回答由 GPT 生成】

问题原因是在Vue3中，使用<script setup>语法编写的组件不支持对JSX元素直接使用自闭合标签，需要使用完整的开始和结束标签。

修改代码如下：

<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="item.label" :key="item.prop"></el-table-column>
    </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: '预警信息预警信息预警信息预警信息'
    })
}
</script>

将<el-table-column>的使用改为完整的开始和结束标签 <el-table-column></el-table-column>，即可解决滚动列表内容不显示的问题。

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7744105
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue监听scroll事件无效？（踩坑记录）
• 除此之外, 这篇博客: vue无缝滚动轮播 scroll中的 1.安装 部分也许能够解决你的问题。