vue中实现自动滚动表格 |
您所在的位置：网站首页 › 北国tms › vue中实现自动滚动表格 |
|
vue-seamless-scroll官方说明文档：github.com/chenxuan000… 插件在线demo：chenxuan1993.gitee.io/component-d… demo演示的都是文本形式的数据，但是需求是表格做成自动滚动。直接套上去会出现表头也被滚动的现象，所以此处用了个小技巧：上面使用一个表格，只取表头部分，下面用vue-seamless-scroll包裹一个表格，只取tbody部分。 下面看关键代码： 复制代码需要样式上的配合，隐藏两个表格的对应部分： .hidden-tbody.el-table { height: 34px; box-sizing: border-box; tbody { //隐藏上面表格的tbody display: none; overflow: hidden; } } .auto-scorll-table { height: calc(100% - 34px); overflow: hidden; } .hidden-thead.el-table { border-top: none; //防止边框重叠 thead { //隐藏下面表格的thead display: none; overflow: hidden; } } 复制代码 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |