vue-seamless-scroll我想多条数据同时滚动，请问有什么方法或建议呢？

Question

代码部分：

<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>

效果图：
想改成的效果：将数据从一条一条滚动，改为一页一页的滚动

Answer 1

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;
}

Answer 2

？表示我的懵逼，

UI 的 table 组件有的吧？！
你要几列的数据，
把表头改成重复表头的循环
[...{ key: 'n1' }, { key: 'v1' }]
按照分页量的循环次数 n 取数据
即，你要20行，3次循环取 60 条数据
然后取到的数据按 20 的长度重命名 key
三个数组合并一个 ...