<template>
|
<div class="video_scroll_table">
|
<div class="container">
|
<el-table :data="tableList" :class="['table', 'customerTable', tableClass]">
|
<slot></slot>
|
</el-table>
|
<vue-seamless-scroll
|
:data="tableList"
|
class="seamless-warp"
|
style="width: 100%"
|
:class-option="classOption"
|
>
|
<el-table :data="tableList" :class="['table_scroll', tableClass]" :row-class-name="myclass">
|
<slot></slot>
|
</el-table>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</template>
|
<script>
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
export default {
|
name: 'ScrollTable',
|
components:{
|
vueSeamlessScroll
|
},
|
props: {
|
listDatas: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
stepNum: {
|
type: Number,
|
default: () => {
|
return 0
|
}
|
},
|
className: {
|
type: String,
|
default: () => {
|
return ''
|
}
|
},
|
tableClass: {
|
type: String,
|
default: () => {
|
return ''
|
}
|
}
|
},
|
data () {
|
return {
|
tableList: []
|
}
|
},
|
created() {
|
this.tableList = this.listDatas
|
// console.log(this.tableList)
|
},
|
computed: {
|
classOption () {
|
return {
|
step: this.stepNum, // 数值越大速度滚动越快
|
limitMoveNum: this.tableList.length, // 开始无缝滚动的数据量 this.tableList
|
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)
|
}
|
}
|
},
|
methods: {
|
// 修改单元格样式的方法
|
myclass({row,column,rowIndex,columnIndex}){
|
// console.log(row)
|
if(row.status == 1){
|
return this.className
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.video_scroll_table {
|
display: flex;
|
::v-deep .table .el-table__body-wrapper {
|
display: none;
|
}
|
// 重点注意这段样式
|
.seamless-warp {
|
// height: 150px;
|
overflow: hidden;
|
height: calc(100% - 40px);
|
::v-deep .table_scroll .el-table__header-wrapper {
|
display: none;
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
.video_scroll_table{
|
height: 100%;
|
.container{
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
.seamless-warp{
|
&>div{
|
&>div{
|
&:nth-child(1) {
|
.el-table{
|
.el-table__empty-block{
|
min-height: 32px;
|
line-height: 32px;
|
.el-table__empty-text{
|
display: none;
|
}
|
}
|
}
|
}
|
.el-table__empty-text{
|
font-size: 16px;
|
font-family: Alimama ShuHeiTi;
|
font-weight: bold;
|
color: #FFFFFF;
|
opacity: 0.6;
|
letter-spacing: 2px;
|
}
|
}
|
}
|
}
|
.el-table{
|
th.is-leaf {
|
// 去除上边框
|
border: none !important;
|
}
|
&::before{
|
// 去除下边框
|
height: 0;
|
}
|
background-color: transparent !important;
|
.el-table__header-wrapper{
|
.el-table__header{
|
text-align: center;
|
background: rgba(0, 198, 255, 0.3);
|
.has-gutter{
|
tr{
|
background-color: transparent !important;
|
th{
|
background-color: transparent !important;
|
&.el-table__cell{
|
border: none;
|
}
|
.cell{
|
line-height: 14px;
|
font-size: 14px;
|
font-family: Alimama ShuHeiTi;
|
font-weight: bold;
|
color: #FFFFFF;
|
opacity: 0.6;
|
}
|
}
|
}
|
}
|
}
|
}
|
.el-table__body-wrapper{
|
.el-table__body{
|
-webkit-border-vertical-spacing: 5px; // 垂直间距
|
.el-table__row{
|
background-color: transparent;
|
&:hover>td {
|
background-color: transparent; //修改成自己想要的颜色即可
|
}
|
.el-table__cell{
|
background-color: transparent;
|
border-bottom: unset;
|
padding: 10px 0;
|
&:nth-child(1) {
|
padding: 0;
|
.cell{
|
&.el-tooltip{
|
min-width: 10px;
|
}
|
}
|
}
|
.cell{
|
padding: 0;
|
line-height: 14px;
|
font-size: 14px;
|
font-family: Alimama ShuHeiTi;
|
font-weight: bold;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.setClass {
|
background: linear-gradient(90deg,rgba(255,183,86,0.3) 0%, rgba(255,183,86,0.1) 100%) !important;
|
}
|
}
|
}
|
&.tableAll{
|
.el-table__header-wrapper{
|
.el-table__header{
|
.has-gutter{
|
tr{
|
background-color: rgba(43,102,145,0.29) !important;
|
th{
|
.cell{
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
}
|
.el-table__body-wrapper{
|
.el-table__body{
|
.el-table__row{
|
background-color: rgba(25,44,65,0.6);
|
.el-table__cell{
|
.cell{
|
color: #FFFFFF;
|
}
|
}
|
}
|
.setClass {
|
background: linear-gradient(90deg,rgba(255,183,86,0.3) 0%, rgba(255,183,86,0.1) 100%) !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
