vue3 el-table结合seamless-scroll实现表格数据滚动

github开源地址：https://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数据滚动的效果。

vue3 el-table结合seamless-scroll实现表格数据滚动相关推荐

利用CSS动画制作 Html 表格数据滚动显示
直接上图看最终实现效果: DataV里有这个效果,看起来高大上,实际自己开发也不难实现.实现的方法很多,下面是本人的一种实现方案,分享给大家. 这个效果需要解决2个问题: 1:首尾的数据衔接: 2:c ...
导入excel表格到数据库、导入excel表格到数据库代码、根据excel表格路径将数据导入到数据库、验证要导入的excel表格数据、根据路径获取MultipartFile、FileItem文件
导入excel表格到数据库.根据路径导入excel表格到数据库代码.根据excel表格路径将数据导入到数据库.验证要导入的excel表格数据.根据路径获取MultipartFile.FileItem文 ...
el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 ) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间 ...
asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
代码: 1 /// <summary> 2 /// HTML Table表格数据(html)导出EXCEL 3 /// </summary> 4 /// <param n ...
table中的td表示table data（表格数据），tr表示table row（表格行），th表示table head（表格头）
<table>中的 <td>表示table data(表格数据) <tr>表示table row(表格行) <th>表示table head(表格头)
Vue + Element-ui 实现table表格数据相同项合并
Vue + Element-ui 实现table表格数据相同项合并通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
使用Pandas的read_html方法读取网页Table表格数据
本文通过一个小实例,说明使用Pandas的read_html方法读取网页Table表格数据要读取的网页表格数据 http://vip.stock.finance.sina.com.cn/q/go.p ...
table表格自动滚动
大屏展示表格数据,需要进行实时滚动的效果当前没使用json数据渲染,如果渲染要把内容放在 id="fTbody" 的表格中 <table><tbody>& ...
iview table 横向拖动表格内容滚动
当表格纵向滚动比较长的时候,横向滚动是很不方便的,要是横向可以拖动滚动就完美了,解决办法就是给表格添加拖动指令,代码如下: const directive = {inserted (my_el) {l ...

vue3 el-table结合seamless-scroll实现表格数据滚动

步骤

vue3 el-table结合seamless-scroll实现表格数据滚动相关推荐

最新文章

热门文章