vue-seamless-scroll我想多条数据同时滚动，请问有什么方法或建议呢？
代码部分：
<template><div class="board-bottom-left">
<table style="width:100%; height:10%" cellspacing="0" cellpadding="0">
<thead style="clear: both;">
<tr class="compound-table-tr-one">
<th style="width:16%">物料</th>
<th style="width:16%">生产数量</th>
<th style="width:16%">物料</th>
<th style="width:16%">生产数量</th>
<th style="width:16%">物料</th>
<th style="width:16%">生产数量</th>
</tr>
</thead>
</table>
<!-- 生产明细（日） 滚动表格 -->
<vue-seamless-scroll :data="detailData" :class-option="classOptionThree" class="warp">
<table style="width:100%; height:90%" cellspacing="0" cellpadding="0">
<tbody class="page">
<tr v-for="(page, index) in detailData" :key="index"
style="width:100%; height: 100%; text-align:center;"
class="compound-table-tr-two">
<!-- 套料文件名 -->
<td class="date2" v-text="page.onLineQty"
style="width:16%; text-align:center; font-size: 27px;">
</td>
<!-- 生产班数 -->
<td class="date5" v-text="page.zconLineQty"
style="width:16%; text-align:center; font-size: 27px;border-right: 1px solid #e8e8e8; ">
</td>
<!-- 已生产班数 -->
<td class="date3" v-text="page.zcoffLineQty"
style="width:16%; text-align:center; font-size: 27px; ">
</td>
<!-- 结束时间 -->
<td class="date4" v-text="page.ctFitQty"
style="width:16%; text-align:center; font-size: 27px;border-right: 1px solid #e8e8e8;">
</td>
<!-- 开始时间 -->
<td class="date4" v-text="page.linkQty"
style="width:16%; text-align:center; font-size: 27px;"></td>
<!-- 生产状态 -->
<td class="date4" v-text="page.playQty"
style="width:16%; text-align:center; font-size: 27px;"></td>
</tr>
</tbody>
</table>
</vue-seamless-scroll>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll' // 引入 滚动图表 scroll
export default {
name: 'Example01Basic',
components: {
vueSeamlessScroll
},
data() {
return {
detailData: [
{
onLineQty: 'A00007',
zconLineQty: '1',
zcoffLineQty: 'A00007',
ctFitQty: '3',
linkQty: 'A00007',
playQty: '6'
},
{
onLineQty: 'A00008',
zconLineQty: '1',
zcoffLineQty: 'A00008',
ctFitQty: '3',
linkQty: 'A00008',
playQty: '6'
},
{
onLineQty: 'A00009',
zconLineQty: '1',
zcoffLineQty: 'A00009',
ctFitQty: '3',
linkQty: 'A00009',
playQty: '6'
},
{
onLineQty: 'A00010',
zconLineQty: '1',
zcoffLineQty: 'A00010',
ctFitQty: '3',
linkQty: 'A000010',
playQty: '6'
},
{
onLineQty: 'A00011',
zconLineQty: '1',
zcoffLineQty: 'A00011',
ctFitQty: '3',
linkQty: 'A00011',
playQty: '6'
},
{
onLineQty: 'A00012',
zconLineQty: '1',
zcoffLineQty: 'A00012',
ctFitQty: '3',
linkQty: 'A00012',
playQty: '6'
},
{
onLineQty: 'A00013',
zconLineQty: '1',
zcoffLineQty: 'A00013',
ctFitQty: '3',
linkQty: 'A00013',
playQty: '6'
},
{
onLineQty: 'A00014',
zconLineQty: '1',
zcoffLineQty: 'A00014',
ctFitQty: '3',
linkQty: 'A00014',
playQty: '6'
},
],
},
classOptionThree: {
singleHeight: 30,
limitMoveNum: 8,
},
</script>
效果图：
想改成的效果：将数据从一条一条滚动，改为一页一页的滚动
回答：
1.先拆成多个数组
data() { return {
detailData: [
[
{ /* 第一条数据 */ },
{ /* 第二条数据 */ },
{ /* 第三条数据 */ }
],
[
{ /* 第四条数据 */ },
{ /* 第五条数据 */ },
{ /* 第六条数据 */ }
],
// ...
],
// ...
}
}
2.遍历
<div class="board-bottom-left"> <table>
<!-- 表头 -->
</table>
<div class="scroll-container">
<div v-for="(group, groupIndex) in detailData" :key="'group-' + groupIndex" class="scroll-group">
<vue-seamless-scroll :data="group" :class-option="classOptionThree" class="warp">
<table>
<tbody>
<tr v-for="(page, index) in group" :key="'row-' + groupIndex + '-' + index" class="compound-table-tr-two">
<!-- 表格数据 -->
</tr>
</tbody>
</table>
</vue-seamless-scroll>
</div>
</div>
</div>
3.css
.scroll-container { display: flex;
flex-direction: row;
width: 100%;
}
.scroll-group {
flex: 1;
overflow: hidden;
}
回答：
？表示我的懵逼，
UI 的 table 组件有的吧？！你要几列的数据，
把表头改成重复表头的循环
[...{ key: 'n1' }, { key: 'v1' }]
按照分页量的循环次数 n 取数据
即，你要20行，3次循环取 60 条数据
然后取到的数据按 20 的长度重命名 key
三个数组合并一个 ...
以上是 vue-seamless-scroll我想多条数据同时滚动，请问有什么方法或建议呢？ 的全部内容， 来源链接： utcz.com/p/934241.html
