Vue3中如何将el-table与seamless-scroll结合实现长尾滚动效果？

本文共计444个文字，预计阅读时间需要2分钟。

GitHub开源地址：[https://github.com/xfy520/vue3-seamless-scroll](https://github.com/xfy520/vue3-seamless-scroll)

步骤：

1.安装：`npm install vue3-seamless-scroll --save`

2.Vue代码：

github开源地址：github.com/xfy520/vue3-seamless-scroll

步骤

1. 安装

npm install vue3-seamless-scroll --save

2. vue代码

<template> <el-table :data="tableData" style="width: 100%" class="top" > <el-table-column prop="name" label="名称" align="center" /> <el-table-column prop="date" label="日期" align="center" /> <el-table-column prop="money" label="金额" align="center" /> </el-table> <vue3-seamless-scroll class="seamless-warp scroll" :list="tableData" :step="0.3" style="width: 100%"> <el-table :data="tableData" style="width: 100%" class="bottom" > <el-table-column prop="name" label="名称" align="center" /> <el-table-column prop="date" label="日期" align="center" /> <el-table-column prop="money" label="金额" align="center" /> </el-table> </vue3-seamless-scroll> </template> <script> import { defineComponent, reactive, onMounted, toRefs } from 'vue' import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; export default defineComponent({ components: { Vue3SeamlessScroll }, setup() { const state = reactive({ tableData: null, }) onMounted(() => { setTimeout(() => { state.tableData = [ { date: '2022-05-03', name: '名称名称', money: 200333, }, { date: '2022-05-02', name: '名称名称', money: 190333, }, { date: '2022-05-04', name: '名称名称', money: 220333, }, { date: '2022-05-01', name: '名称名称', money: 310333, }, { date: '2022-05-04', name: '名称名称', money: 220333, }, { date: '2022-05-01', name: '名称名称', money: 310333, }, { date: '2022-05-04', name: '名称名称', money: 220333, }, { date: '2022-05-01', name: '名称名称', money: 310333, }, ] }, 3000) }) return { ...toRefs(state), } }, }) </script> <style lang="scss" scoped> ::v-deep .seamless-warp { height: 229px; overflow: hidden; } ::v-deep .top .el-table__body-wrapper { display: none; } ::v-deep .bottom .el-table__header-wrapper { display: none; width: 100%; } </style>

思路：创建两个table，隐藏第一个table的body部分，这样就能得到一个固定的head。再隐藏第二个table的head部分，同时第二个table又是在滚动组件中，所以整个table都是滚动的，这时候隐藏head再搭配第一个table的head就能得到固定head并且body数据滚动的效果。

到此这篇关于vue3el-table结合seamless-scroll实现表格数据滚动的文章就介绍到这了,更多相关vue3表格数据滚动内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！