使用vueSeamlessScroll
组件
在线观看:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
参考文档:https://chenxuan0000.github.io/vue-seamless-scroll/guide/
npm install vue-seamless-scroll --save
<vue-seamless-scroll class="wrap" ref="scroll" :class-option="classOption" :data="listData" style="overflow: hidden;">
<div class="list">
<div class="item ccitem" :class="{red:item.status==0}" v-for="(item, index) in listData" :key="index">
<span style="width:10%">{{ item.MONo }}</span>
<span style="width:8%">{{ item.StyleNo }}</span>
<span style="width:4%">{{ item.Customer }}</span>
<span style="width:8%">{{ item.TotalQty ? item.TotalQty : 0 }}</span>
<span style="width:8%">{{ item.Billdate ? item.Billdate.split('T')[0] : '--' }}</span>
<span style="width:8%">{{ item.DeliveryDate ? item.DeliveryDate.split('T')[0] : '--' }}</span>
<span style="width:8%">{{ item.MInDate ? item.MInDate.split('T')[0] : '--' }}</span>
<span style="width:8%">{{ item.FInDate ? item.FInDate.split('T')[0] : '--' }}</span>
<span style="width:8%">{{ item.TotalCutQty ? item.TotalCutQty : 0 }}</span>
<span style="width:8%">{{ item.TotalSewQty ? item.TotalSewQty : 0 }}</span>
<span style="width:8%">{{ item.TotalBackEndQty }}</span>
<span style="width:8%">{{ item.InQty ? item.InQty : 0 }}</span>
<span style="width:8%">{{ item.OutQty ? item.OutQty : 0 }}</span>
</div>
</div>
</vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
data() {
return {
classOption: {
isSingleRemUnit: true,
singleHeight: 3.4,
step: 1,
waitTime: 1 * 10 * 1000,
limitMoveNum: 17,
autoPlay: true,
},
orders: '',
showDate: true,
listData: [],
socketState: '',
socketDate: '',
}
},
components: { vueSeamlessScroll },
}