</vue-seamless-scroll> 然后在css中写,这个是隐藏表体 .hiddenBody { ::v-deep .is-scrolling-none { display: none; } } 效果如下 因为借助了el-table,在样式上就有了自适应了。 继续改进表格配合自动滚动数据,因为这次考虑到了窗口屏幕大小的变化会导致表格中数据的错位,这也是el-table配合vue-seamless-...
1.下载安装 npm install vue-seamless-scroll --save 2.引入 import vueSeamlessScroll from "vue-seamless-scroll"; 3.注册使用组件 <vueSeamlessScroll :class-option='defaultOption' :data="activeData" style="height: 194px;"><liv-for="(item, index) inactiveData" :key="index"> <template> {{ i...
} toDetail方法写在vue-seamless-scroll中的div中可以获取到整个item对象,但是有一个bug就是第一个item点击没有反应,网上说是因为vue-seamless-scroll中间包裹的dom复制渲染,没有带上dom的事件导致,使用事件委托方法解决,所以方法加在了外边,通过e.target获取。publicNotificationOption中还有很多属性可以设置滚动样式,可...
一、第一步进行安装 二、引入 2.1、全局引入 2.3、单文件引入 三、使用 注意滚动插件也需要绑定data作为滚动数据
当然,这个插件不止可以滚动表格,像echarts或者自定义的其他样式都是可以进行滚动的,并且可以向上、向下、向左、向右都是可以滚动的,也可以调整滚动速度,鼠标悬浮停止等功能。 官网文档 https://chenxuan0000.github.io/vue-seamless-scroll/zh/ 鹏仔需要实现的交互效果如下图所示 ...
npm install vue-seamless-scroll --save 2、在main.js直接导入 importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importscrollfrom'vue-seamless-scroll'Vue.use(ElementUI).use(vueSeamlessScroll); 3、使用scrollTable.vue ...
VUE vue-seamless-scroll自动滚动,当数据量比较少不让它自动滚动,div<vue-seamless-scroll:data="tableDataLeft0"class="seamless-warp":class-option="classOption"
Vue-seamless-scroll是一个用于实现表格数据自动滚动的插件，通过npm安装并全局挂载到Vue应用中。官网示例通常使用静态数据，处理动态后端请求数据时，曾遇到数据异步和显示不全的问题，因此改用ul和li结构。代码实现中，你可能需要自定义表头并进行绝对定位。通过请求后端接口获取数据，计算属性用于处理数据。
引言:做可视化地图项目,使用vue-seamless-scroll实现表格数据自动滚动,有个bug就是复制出来的数据点击事件失效。这个插件底层的实现是cope的形式, 无限滚动原理:无限滚动的原理就是把之前的遍历的内容复制一份,滚动这两部分内容,达到无缝滚动效果。(一般数据量比较多有这种效果,数据量比较少,我就不让他滚动了)。
<vue-seamless-scroll:data="tableDataLeft0"class="seamless-warp":class-option="classOption">{{item.projectName}}{{item.reviewTime}}