页面内容渲染主要是使用 vue-seamless-scroll 插件
前面也看过其他方法,页面方法太多了 ,比较麻烦
这个是目前发现最简单的了,安装下依赖就行,页面直接引用
import VueSeamlessScroll from 'vue-seamless-scroll'
先放效果图:
核心代码如下:
<div class="scroll_table">
<div style="display: inline-block; width: 100%">
<table>
<thead>
<tr>
<th :title="'时间'" valign="middle">时间</th>
<th :title="'号牌号码'" valign="middle">号牌号码</th>
<th :title="'告知/预警类型'" valign="middle">告知/预警类型</th>
</tr>
</thead>
</table>
<vue-seamless-scroll class="seamless-warp" style="width: 100%" :data="list">
<table>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<td :title="item.cjsj">{{ item.cjsj }}</td>
<td :title="item.hphm">{{ item.hphm }}</td>
<td class="warning_type" :title="item.itemname">{{ item.itemname }}</td>
</tr>
</tbody>
</table>
</vue-seamless-scroll>
</div>
</div>
.RealTimeWarning {
height: calc(100% - 38px);
overflow-y: auto;
overflow-x: hidden;
.scroll_table {
display: flex;
height: 100%;
.seamless-warp {
height: calc(100% - 55px);
overflow: hidden;
}
}
table {
width: 100%;
max-width: 100%;
font-size: 12px;
margin: 10px 0 0 0;
th,
td {
max-width: 10px;
padding: 5px;
vertical-align: middle;
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
}
thead {
height: 20px;
line-height: 20px;
color: #39dfffab;
background: transparent;
}
tbody {
color: #fff;
cursor: pointer;
tr {
td {
height: 32px;
line-height: 32px;
}
}
tr:nth-child(odd) {
background: rgba(35, 170, 230, 0.14);
}
tr:nth-child(even) {
background: transparent;
}
}
.warning_type {
color: #15fcff;
}
}
}