滚动表格
在vue页面中实现表格的定时滚动,在网上找了类似的组件(vue-seamless-scroll ),但是有一个致命的问题就是,
<div v-html="copyHtml" :style="float"></div>
在组件中封装的v-html解析渲染,绑定的事件丢失
解析:由于HTML代码是静态的,并不会被Vue进行编译和解析,因此默认情况下v-html
指令渲染的代码是不会绑定事件的。所以,在上述代码中使用v-html
指令渲染的内容是无法触发点击事件的。
如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发。
解决办法:找到一个循环滚动列表插件 ------@david-j/vue-j-scroll
该插件为 vue-seamless-scroll 的升级版 ,可以自动滚动也可以手动滚动。dom 中的事件也保存了下来。 推荐数据量小于 1000,以保证插件的性能。
npm install @david-j/vue-j-scroll --save-dev 来安装 在src根目录下的引用页面进行引入;根据项目结构而定(main.js) import VueScroll from '@david-j/vue-j-scroll'; Vue.use(VueScroll);
<vue-j-scroll class="list-style" :data="shipList" :steep="1" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50" :class-option="{singleHeight: 40,waitTime: 1500,limitMoveNum: 6}" > <div v-for="(item, index) in shipList" :key="index" class="table-item table_body" > <p>{{ item}}</p> </div> </vue-j-scroll>
配置项:
key | description | default | val |
---|---|---|---|
step | 数值越大速度滚动越快 | 1 | Number |
limitMoveNum | 开启无缝滚动的数据量 | 5 | Number |
hoverStop | 是否启用鼠标hover控制 | true | Boolean |
direction | 方向 0 往下 1 往上 2向左 3向右 | 1 | Number |
openTouch | 移动端开启touch滑动 | true | Boolean |
singleHeight | 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | 0 | Number |
singleWidth | 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 | Number |
waitTime | 单步停止等待时间(默认值1000ms) | 1000 | Number |
switchOffset | 左右切换按钮距离左右边界的边距(px) | 30 | Number |
autoPlay | 1.1.17版本前手动切换时候需要置为false | true | Boolean |
switchSingleStep | 手动单步切换step值(px) | 134 | Number |
switchDelay | 单步切换的动画时间(ms) | 400 | Number |
switchDisabledClass | 不可以点击状态的switch按钮父元素的类名 | disabled | String |
isSingleRemUnit | singleHeight and singleWidth是否开启rem度量 | false | Boolean |
navigation | 左右方向的滚动是否显示控制器按钮,true的时候autoPlay自动变为false | false | Boolean |
注意: 因为该组件中,在数据量很少的情况下,比如你设置的limitMoveNum = 6,但是后端返回的数据在你定义的数组中
:data="shipList",this.shipList.length < 6,此时在表格中的数据会出现数据煽动,不稳定的情况,此时,直接遍历数组,不使用该组件就不会出现该情况;
下面是我代码中的案例:
<div class="h35 data_body__btm">
<div class="visual_box">
<ul class="table-item table_header">
<li style="width: 10%">序号</li>
<li style="width: 15%">中文船名</li>
<li style="width: 15%">英文船名</li>
<li style="width: 10%">航次</li>
<li style="width: 10%">装港码头</li>
<li style="width: 10%">预计到港时间</li>
<li style="width: 10%">实际到港时间</li>
<li style="width: 10%">靠泊时间</li>
<li style="width: 10%">开港时间</li>
</ul>
<vue-j-scroll
class="list-style"
:data="shipList"
:steep="1"
scrollDirection="top"
:isRoller="true"
:rollerScrollDistance="10"
:class-option="{singleHeight: 40,waitTime: 1500,limitMoveNum: 6}"
style="height: calc(100% - 40px);overflow:hidden;"
v-if="shipList.length>=6"
>
<ul class="table-item table_body" v-for="(item, index) in shipList" :key="index" @click="handleShipTable(item)">
<li style="width:10%">{{ index + 1 }}</li>
<li style="width:15%">{{ (item.vesselCn || "-") }}</li>
<li style="width:15%">{{ (item.vesselEn || "-") }}</li>
<li style="width:10%">{{ (item.voyageEn || "-") }}</li>
<li style="width:10%">{{ (item.workAreaName || "-") }}</li>
<li style="width:10%">{{ (item.arrivaLdate || "-") }}</li>
<li style="width:10%">{{ (item.realArrivalDate || "-") }}</li>
<li style="width:10%">{{ (item.bearthDate || "-") }}</li>
<li style="width:10%">{{ (item.openPortDate || "-") }}</li>
</ul>
</vue-j-scroll>
<div v-else>
<ul class="table-item table_body" v-for="(item, index) in shipList" :key="index" @click="handleShipTable(item)">
<li style="width:10%">{{ index + 1 }}</li>
<li style="width:15%">{{ (item.vesselCn || "-") }}</li>
<li style="width:15%">{{ (item.vesselEn || "-") }}</li>
<li style="width:10%">{{ (item.voyageEn || "-") }}</li>
<li style="width:10%">{{ (item.workAreaName || "-") }}</li>
<li style="width:10%">{{ (item.arrivaLdate || "-") }}</li>
<li style="width:10%">{{ (item.realArrivalDate || "-") }}</li>
<li style="width:10%">{{ (item.bearthDate || "-") }}</li>
<li style="width:10%">{{ (item.openPortDate || "-") }}</li>
</ul>
</div>
</div>
</div>
css代码:
.data_body__btm {
padding-top: 10px;
.table-item {
height: 40px;
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: 1px solid #124881;
box-sizing: border-box;
li {
text-align: center;
color: #fff;
font-size: 14px;
flex-shrink: 0;
padding: 0 5px;
}
}
.table_header {
height: 50px;
background: #0d3a77;
border-bottom: 0;
li {
font-weight: bold;
font-size: 14px;
}
}
.table_body {
cursor: pointer;
&:hover {
background: #0d3a77;
}
}
}
查找资料出处:@david-j/vue-j-scroll - npm