创建表格并使用vue3-seamless-scroll组件: 在你的Vue组件模板中,使用el-table(假设你使用的是Element Plus库)来创建表格,并用vue3-seamless-scroll包裹它以实现滚动效果。vue <template> <div class="container"> <el-table :data="tableData" border style="width: 100%;"> <!-...
首先,确保你已经安装了Element-Table和seamless-scroll: bash复制代码 npm install element-table seamless-scroll 在你的Vue组件中,引入所需的依赖: javascript复制代码 import{ElTable,ElTableColumn}from'element-table'; import'seamless-scroll';// 引入seamless-scroll样式 在你的组件的setup()方法中,使用Element-...
这里用的是el-table表格组件。 若直接将el-table表格插入到vue-seamless-scroll组件中,会导致el-table表格中的表头也会进行滚动,这不是想要的效果。 这里用两个el-table,一个保留表头部分,一个保留内容部分。保留内容部分的放入vue-seamless-scroll组件中进行无缝滚动。 <!--第一个表格 保留头部--><el-table cl...
最近需要用到el-table和echarts的滚动播放,在很多关于vue3和echarts的例子中都是这两种的: //html<divref="refinstance">ref</div>//scriptletref=echarts.init(refinstance.value) 结果用到vue3-seamless-scroll中时,就只有一个chart,查看元素,明明是有两个div的,但因为ref只能指向一个div,所以最终echart只会...
查看el-table源码发现内部使用的div来实现table布局,导致产生了大量的dom节点,又由于业务需要无法采用分页,所以当务之急是开发一个无限滚动、滚动加载的组件,而该组件的核心的无限滚动实现逻辑,而且在下拉框中也需要滚动加载,所以干脆抽离出一个无限滚动指令。