element-table实现自动循环滚动
<template>
<div>
<mg-table ref='mgTable' v-if='' :data='data' stripe :height='height' :header-cell-style='headerCellStyle' border='' @header-dragend='headerDragend' style='width: 100%;'>
<template v-for='column in columns'>
<mg-table-column v-if=' !=="production_progress"' :width=' === "product_order_sign" ? 80 :""' show-overflow-tooltip v-bind='column' :key=''>
<template slot-scope='scope'>
<slot :name='`body-cell-${}`' :row='' :col='column'>
<span v-if='!=="warehousing_status"'>{{ scope.row[column.prop] }}</span>
<span v-else :style='{"color": ([].includes("逾期") ? "red" : "#fff")}'>{{ scope.row[column.prop] }}</span>
</slot>
</template>
</mg-table-column>
<mg-table-column v-else show-overflow-tooltip v-bind='column' :key=''>
<template slot='header'>
<span>生产进度</span>
</template>
<template slot-scope='scope'>
<el-progress :format='format()' :show-text='false' :text-inside='true' :stroke-width='15' :percentage='.production_progress'></el-progress>
</template>
</mg-table-column>
</template>
</mg-table>
</div>
</template>
<script>
// **********原理:通过定时器不断改变scrollTop来实现自动滚动，使用两倍的数据，一旦第一次的滚动完毕，将scrollTop置为0
import { storageKey, maxRollTime } from 'assets/constant'
import { updateLocalStorage } from 'assets/'
import { Table, TableColumn } from 'element-ui'
import { mapState } from 'vuex'
const scope = process.env.APP_SCOPE_NAME
export default {
components: {
'mg-table': Table,
'mg-table-column': TableColumn
},
watch: {
height (val) {
this.height = val
}
},
props: {
col: {
type: Array,
default: () => []
},
tableData: {
type: Array,
default: () => []
},
height: {
type: Number,
default: 185
},
scroll: {
type: Boolean,
default: false
},
tableKey: {
type: String,
default: ''
},
fontBigger: {
// 加大号字体
type: Boolean,
default: false
}
},
data () {
return {
containEl: null, // 获取表格的body部分
trHeight: null, // 表格的行高
// workStatus,
storageKey,
headerCellStyle: {
'font-size': '12px'
},
rowHeight: 50
}
},
computed: {
...mapState(scope, ['scrollMilSeconds']),
scrollable () {
// 用户设定的滚动时间不超过最大值才进行滚动
return this.scroll && this.scrollMilSeconds <= maxRollTime
},
data () { // 1.根据表格定义的高度和行高来确定需要滚动的行数
// 需要滚动，且data数超过表格高度
let dataLen = this.tableData.length
let scrollLen = this.height / this.rowHeight - 2 // 表格滚动需要的数据行数
if (this.scrollable && dataLen > scrollLen) {
return this.tableData.concat(this.tableData) // 滚动时，用两倍data
} else {
return this.tableData
}
},
columns () {
let obj = JSON.parse(localStorage.getItem(this.storageKey))
return this.col.map(item => {
let col = {
prop: item.field,
label: item.label,
align: 'center',
resizable: true
}
if (obj && obj[this.tableKey] && obj[this.tableKey][item.prop]) {
col.width = obj[this.tableKey][item.prop]
}
return col
})
}
},
mounted () {
setTimeout(_ => {
this.setScroll()
}, 20)
},
beforeDestroy () {
this.containEl = null
this.trHeight = null
this.scrollable && this.interval && clearInterval(this.interval)
},
methods: {
format (val) {},
setScroll () {
this.$nextTick(_ => {
if (this.scrollable) {
this.containEl = this.$refs.mgTable.$el.querySelector(
'.el-table__body-wrapper'
) // container元素设置scrollTop
let tr = this.$refs.mgTable.$el.querySelector(
'.el-table__body-wrapper tr'
)
if (!this.containEl || !tr) {
return
}
this.trHeight = tr.offsetHeight // 行高
// 2.每20ms滚动一次
this.interval = setInterval(this.autoScroll, this.scrollMilSeconds)
}
})
},
headerDragend (newWidth, oldWidth, column) {
updateLocalStorage(this.storageKey, {
key: this.tableKey,
data: { [column['property']]: newWidth }
})
},
autoScroll () {
if (this.containEl.scrollTop >= (this.tableData.length) * this.trHeight) {
// 3.确保第一次滚动滚动到了底部 scrollTop表示滚动条向下滚动时，上面超出部分的高度
this.containEl.scrollTop = 0
} else {
this.containEl.scrollTop++
}
}
}
}
</script>
<style lang="stylus">
.el-table--striped .el-table__body tr.el-table__row--striped td {
background: rgba(46, 144, 253, 0.1);
}
/* table边框背景色 */
.el-table th {
color: #fff;
background: rgba(46, 144, 253, 0.3);
font-size: 1.48vh !important;
height: 4.63vh;
line-height: 4.63vh;
font-family: ping;
}
.el-table tr {
background-color: rgba(6, 29, 61, 0);
height: 4.63vh;
line-height: 4.63vh;
font-family: ping;
}
.el-table, .el-table__expanded-cell {
background-color: rgba(6, 29, 61, 0);
}
.el-table td, .el-table th.is-leaf {
border-bottom: none;
}
.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: none;
}
.el-table--border, .el-table--group {
border: none;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
background-color: rgba(6, 29, 61, 0);
}
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #182F4A;
}
.el-table {
color: #fff;
font-size: 1.48vh !important;
}
.el-table thead {
color: #003166;
}
.el-table td, .el-table th {
padding: 0;
}
.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
padding-left: 2px;
}
.el-table .cell, .el-table th div {
padding-right: 2px;
}
.el-table .cell {
height: 3.68vh;
line-height: 3.68vh;
white-space: nowrap;
}
.el-table--scrollable-y .el-table__body-wrapper {
// overflow: hidden;
}
.el-table--border th.gutter:last-of-type {
border: none;
}
@font-face {
font-family: ping;
src: url('~assets/');
}
</style>
<style>
.el-progress-bar__outer {
margin-top: 1.4vh;
height: 6px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.1);
overflow: hidden;
position: relative;
vertical-align: middle;
}
.el-progress-bar__inner {
background-image: linear-gradient(
to right,
rgba(7, 141, 190, 1),
rgba(7, 190, 154, 1)
);
}
</style>