1.原生得方式
<template>
<el-table
:data="tableData"
style="width: 100%;height:100%">
<el-table-column
stripe
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<!-- <div>
<ul id="con1" ref="con1" :class="{ anim: animate == true }">
<li v-for="(item,index) in items" :key="index">{{ item.name }}</li>
</ul>
</div> -->
</template>
<script>
export default {
data() {
return {
animate:false,
// items:[
// {name:"马云"},
// {name:"雷军"},
// {name:"王勤"}
// ]
tableData: [{
date: '2016-05-01',
name: '王小虎1',
address: '上海市普陀区金沙江路 1 弄'
}, {
date: '2016-05-02',
name: '王小虎2',
address: '上海市普陀区金沙江路 2 弄'
}, {
date: '2016-05-03',
name: '王小虎3',
address: '上海市普陀区金沙江路 3 弄'
}, {
date: '2016-05-04',
name: '王小虎4',
address: '上海市普陀区金沙江路 4 弄'
}]
}
},
created(){
setInterval(this.scroll,2000)
},
methods: {
// scroll(){
// this.animate=true; // 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true
// setTimeout(()=>{ // 这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多
// console.log(this.items[0])
// this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
// this.items.shift(); //删除数组的第一个元素
// console.log(this.items)
// this.animate=false; // margin-top 为0 的时候取消过渡动画,实现无缝滚动
// },500)
// }
scroll(){
let el = document.querySelector('.el-table__body-wrapper')
el.addClassName = 'anim'
setTimeout(()=>{
// console.log(this.items[0])
this.tableData.push(this.tableData[0]); // 将数组的第一个元素添加到数组的
this.tableData.shift(); //删除数组的第一个元素
},2000)
}
}
}
</script>
<style scoped>
/* *{
margin: 0 ;
padding: 0;
}
#box{
width: 300px;
height: 32px;
overflow: hidden;
padding-left: 30px;
border: 1px solid black;
}
.anim{
transition: all 0.5s;
margin-top: -30px;
}
#con1 li{
list-style: none;
line-height: 30px;
height: 30px;
color: red;
} */
.anim{
animation: mymove 1s linear;
}
@keyframes mymove
{
from {
transform: translateY(0px) ;
}
to {
transform: translateY(-20px) ;
}
}
</style>
2.vueSeamlessScroll插件的方式
<div class="user_skills comm-item" style="width: 100%">
// 第一个el-table是固定表头 ,第二个table取消表头
<el-table
border
max-height="80"
:header-row-style="{
background:
'url(../../assets/images/web/table_header_bg.png) no-repeat'
}"
:header-cell-style="{
height: '70px',
padding: '0',
'box-sizing': 'border-box',
'text-align': 'center',
border: 'none',
'font-size': '26px',
color: '#a8b1af',
'font-family': 'Adobe Heiti Std',
'font-weight': 'normal',
'background-color': '#022731'
}"
:row-style="{
'background-color': 'transparent',
background: 'url(/static/images/table_bg.png) no-repeat',
'font-size': '30px',
cursor: 'pointer',
'background-position': 'bottom',
'background-size': '100%'
}"
:cell-style="{
height: '90px',
'text-align': 'center',
'line-height': '60px',
padding: '0',
border: 'none',
'font-family': 'MicrosoftYaHei',
'font-weight': 400,
color: '#dddfe1',
'line-height': '90px',
'font-size': '30px'
}"
>
<el-table-column label="序号" align="center" width="80px">
</el-table-column>
<el-table-column label="断面名称" width="240px">
</el-table-column>
<el-table-column label="监测时间" width="240px">
</el-table-column>
<el-table-column label="水质"> </el-table-column>
<el-table-column label="PH值"> </el-table-column>
<el-table-column label="溶解氧"> </el-table-column>
<el-table-column label="电导率"> </el-table-column>
<el-table-column label="水温"> </el-table-column>
<el-table-column label="浊度"> </el-table-column>
<el-table-column label="总磷" v-if="isShowAll">
</el-table-column>
<el-table-column label="氨氮" v-if="isShowAll">
</el-table-column>
<el-table-column label="总氮" v-if="isShowAll">
</el-table-column>
<el-table-column label="高锰酸盐" v-if="isShowAll">
</el-table-column>
</el-table>
<div style="overflow:hidden">
<vue-seamless-scroll
:data="waterList"
:class-option="defaultOption1"
>
<!-- max-height="560" -->
<el-table
ref="waterTable"
:show-header="false"
@cell-mouse-enter="mouseEnter"
@cell-mouse-leave="mouseLeave"
:data="waterList"
border
max-height="100%"
:header-row-style="{
background:
'url(../../assets/images/web/table_header_bg.png) no-repeat'
}"
:header-cell-style="{
height: '70px',
padding: '0',
'box-sizing': 'border-box',
'text-align': 'center',
border: 'none',
'font-size': '26px',
color: '#a8b1af',
'font-family': 'Adobe Heiti Std',
'font-weight': 'normal',
'background-color': '#022731'
}"
:row-style="{
'background-color': 'transparent',
background:
'url(/static/images/table_bg.png) no-repeat',
'font-size': '30px',
/* color: ' #fffefe',
color: 'red',
*/
cursor: 'pointer',
'background-position': 'bottom',
'background-size': '100%'
}"
:cell-style="{
height: '90px',
'text-align': 'center',
'line-height': '60px',
padding: '0',
border: 'none',
'font-family': 'MicrosoftYaHei',
'font-weight': 400,
color: '#dddfe1',
'line-height': '90px',
'font-size': '30px'
}"
>
<el-table-column label="序号" align="center" width="80px">
<template slot-scope="scope">
<div
:class="[
scope.$index + 1 < 4 ? errorCls : errorCls,
'index'
]"
>
{{ scope.$index + 1 }}
</div>
</template>
</el-table-column>
<el-table-column
prop="crossSectionName"
label="断面名称"
width="240px"
>
<template slot-scope="{ row }">
<span @click="getCenter(row)">
{{ row.crossSectionName }}
</span>
<!-- <span style="color: yellow;"></span>{{ currentDate }}-->
</template>
</el-table-column>
<el-table-column
prop="monitorTime"
label="监测时间"
width="240px"
>
<template slot-scope="{ row }">
<span>
{{
currentCircle === "NOW"
? parseTime(tableDate, "{y}-{m}-{d} {h}")
: tableDate
}}
</span>
<!-- <span style="color: yellow;"></span>{{ currentDate }}-->
</template>
</el-table-column>
<el-table-column prop="quality" label="水质">
<template slot-scope="slot">
<span
class="waterLevelClass"
:style="
'background:' + getWaterColor(slot.row.quality)
"
>{{ getWaterLevel(slot.row.quality) }}</span
>
</template>
</el-table-column>
<el-table-column prop="ph" label="PH值">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span
v-if="item.factorCode == 'PH_DIMENSIONLESS'"
>{{ getDataToFixed(item.value, 1) || "-" }}</span
>
</div>
</template>
</el-table-column>
<el-table-column label="溶解氧">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span v-if="item.factorCode == 'DO'">{{
getDataToFixed(item.value, 2) || "-"
}}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="conductivity" label="电导率">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span v-if="item.factorCode == 'CONDUCTIVITY'">{{
getDataToFixed(item.value, 1) || "-"
}}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="ph" label="水温">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span v-if="item.factorCode == 'TEMPERATURE'">{{
getDataToFixed(item.value, 1) || "-"
}}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="ph" label="浊度">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span v-if="item.factorCode == 'TURBIDITY'">{{
getDataToFixed(item.value, 1) || "-"
}}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="ph" label="总磷" v-if="isShowAll">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span v-if="item.factorCode == 'TP'">{{
getDataToFixed(item.value, 3) || "-"
}}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="ph" label="氨氮" v-if="isShowAll">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span v-if="item.factorCode == 'NH3'">{{
getDataToFixed(item.value, 2) || "-"
}}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="ph" label="总氮" v-if="isShowAll">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span v-if="item.factorCode == 'TN'">{{
getDataToFixed(item.value, 2) || "-"
}}</span>
</div>
</template>
</el-table-column>
<el-table-column
prop="ph"
label="高锰酸盐"
v-if="isShowAll"
>
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row
.factorValueRecords"
:key="index"
>
<span
v-if="item.factorCode == 'PERMANGANATE_INDEX'"
>{{ getDataToFixed(item.value, 1) || "-" }}</span
>
</div>
</template>
</el-table-column>
</el-table>
</vue-seamless-scroll>
</div>
</div>
defaultOption1() {
// if(this.autoPlay1) return this.autoPlay1
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: this.waterList.length, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
// autoPlay: false
};
}