vue-seamless-scroll

<div ref="header">
            <div ref="list" class="operate-table-header">
                <div style="width: 20%">序号</div>
                <div style="width: 20%">工作内容</div>
                <div style="width: 20%">计划完成时间</div>
                <div style="width: 20%">责任人</div>
                <div style="width: 20%">关闭时间</div>
            </div>
        </div>
        <vue-seamless-scroll :data="listData" class="seamless-warp">
            <div class="operate-table-content"  v-for="(item, index) in listData" :key="index">
                <div style="width: 20%">{{index + 1}}</div>
                <div style="width: 20%">{{item.title}}</div>
                <div style="width: 20%">{{item.date}}</div>
                <div style="width: 20%">{{item.date}}</div>
                <div style="width: 20%">{{item.date}}</div>
            </div>
        </vue-seamless-scroll>

<script>
    export default {
        data: function(){
            return {
                listData: [{
                   'title': '无缝滚动第一行无缝滚动第一行',
                   'date': '2017-12-16'
                 }, {
                    'title': '无缝滚动第二行无缝滚动第二行',
                    'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第三行无缝滚动第三行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第四行无缝滚动第四行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第五行无缝滚动第五行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第六行无缝滚动第六行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第七行无缝滚动第七行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第八行无缝滚动第八行',
                     'date': '2017-12-16'
                 }, {
                     'title': '无缝滚动第九行无缝滚动第九行',
                     'date': '2017-12-16'
                 }]
            }
        },
        methods: {
            _initMove () {
                this.$nextTick(() => {
                    let slotListWidth = this.$refs.list.offsetWidth
                    console.log(slotListWidth)
                    const { autoPlay, isHorizontal } = this
                    // 水平滚动设置warp width
                    if (isHorizontal && autoPlay) {
                        // 修正offsetWidth四舍五入
                        slotListWidth = slotListWidth * 2 + 1
                    }
                    this.$refs.header.style.width = slotListWidth + 'px'
                })
            }
        },
        mounted () {
            this._initMove()
        }
    }
</script>

来源：https://www.cnblogs.com/adbg/p/12166438.html