创建表格并使用vue3-seamless-scroll组件: 在你的Vue组件模板中,使用el-table(假设你使用的是Element Plus库)来创建表格,并用vue3-seamless-scroll包裹它以实现滚动效果。vue <template> <div class="container"> <el-table :data="tableData" border style="width: 100%;"> <!-...
这里用的是el-table表格组件。 若直接将el-table表格插入到vue-seamless-scroll组件中,会导致el-table表格中的表头也会进行滚动,这不是想要的效果。 这里用两个el-table,一个保留表头部分,一个保留内容部分。保留内容部分的放入vue-seamless-scroll组件中进行无缝滚动。 <!--第一个表格 保留头部--><el-table cl...
npm install element-table seamless-scroll 在你的Vue组件中,引入所需的依赖: javascript复制代码 import{ElTable,ElTableColumn}from'element-table'; import'seamless-scroll';// 引入seamless-scroll样式 在你的组件的setup()方法中,使用Element-Table和seamless-scroll: javascript复制代码 import{ ref }from'vue'...
项目实际应用demo地址: 有pc端和移动端,分别用电脑和手机浏览器访问下面网址就能看到效果 实现: 1,安装: npm install --save vue-fullpage.js 1. 2,引用: import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 1. 2. 3. 在public下面的ind...
最近需要用到el-table和echarts的滚动播放,在很多关于vue3和echarts的例子中都是这两种的: //html<divref="refinstance">ref</div>//scriptletref=echarts.init(refinstance.value) 结果用到vue3-seamless-scroll中时,就只有一个chart,查看元素,明明是有两个div的,但因为ref只能指向一个div,所以最终echart只会...
vue3数据可视化大屏项目开发时,经常会遇到table效果,但是限于页面大小,table的数据并不能完全的显示出来,这就需要让table滚动起来,之前使用vue2已经实现过了类似的效果,vue table组件结合vue-seamless-scroll实现滚动,这次是使用的vue3组件变了所以从新记录一下。