使用vue-seamless-scroll实现el-table轮播
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
要实现el-table轮播效果,并且顶部th固定,鼠标移入暂停滑动
我看了好多方法,有人自己写的js,但是感觉太麻烦了,我找了半天找到了一个神器vue-seamless-scroll
安装方法如下:
npm 安装
npm install vue-seamless-scroll --save
yarn 安装 (我用的这个)
yarn add vue-seamless-scroll
还有直接引入
<scriptsrc="vue-seamless-scroll.min.js"></script>
使用方法
// **main.js**//
1.全局 install
import Vue from'vue'import scroll from'vue-seamless-scroll'
Vue.use(scroll)
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName:'scroll-seamless'})
// 2.单个.vue文件局部注册(推荐)
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
vueSeamlessScroll
}
}
</script>
<template>
<div class="container">
<el-table
:data="tableData"
border
class="top"
:header-cell-style="{background:'#eee',color:'#000000'}">
style="width: 100%">
<el-table-column
fixed
prop="company"
label="企业">
</el-table-column>
<el-table-column
prop="highrisk"
label="腐蚀高风险">
</el-table-column>
<el-table-column
prop="lowrisk"
label="腐蚀中风险">
</el-table-column>
</el-table>
<vue-seamless-scroll
:data="tableData"
:class-option="optionSingleHeight"
class="seamless-warp">
<el-table
:data="tableData"
border
class="bottom"
:header-cell-style="{background:'#eee',color:'#000000'}">
style="width: 100%">
<el-table-column
fixed
prop="company"
label="企业">
</el-table-column>
<el-table-column
prop="highrisk"
label="腐蚀高风险">
</el-table-column>
<el-table-column
prop="lowrisk"
label="腐蚀中风险">
</el-table-column>
</el-table>
</vue-seamless-scroll>
</div>
</template>
import vueSeamlessScroll from'vue-seamless-scroll'
export default {
name:'TableData',
components:{
vueSeamlessScroll//注册组件
},
data(){
return{
optionSingleHeight:{
step:0.2,//数值越大滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
hoverStop:true,//是否开启鼠标悬停stop
direction:1,//0向下1向上2向左3向右
openWatch:true,//开启数据实时监控刷新dom
singleHeight:26,//单步运动挺值得高度(默认值0是无缝不停止的滚动)//竖着
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)//横着
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
},
}
}
}
<style lang="scss" scoped>
*{
list-style: none;
}
ul,li,ol{
padding: 0;
}
.seamless-warp {
height: 100px;
width: 100%;
overflow: hidden;
}
::v-deep .table-style{
.el-table__header-wrapper{
display: none;
}
}
::v-deep .top {
.el-table__body-wrapper{
display: none;
}
}
::v-deep .bottom {
.el-table__header-wrapper{
display: none;
}
}
</style>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)