element-table实现⾃动循环滚动
<template>
<div>
<mg-table ref='mgTable' v-if='data.length':data='data' stripe :height='height':header-cell-style='headerCellStyle' border='' @header-dragend='header Dragend' style='width: 100%;'>
<template v-for='column in columns'>
<mg-table-column v-if='column.prop !=="production_progress"':width='column.prop === "product_order_sign" ? 80 :""' show-overflow-tooltip v-bi nd='column':key='column.prop'>
<template slot-scope='scope'>
<slot :name='`body-cell-${column.prop}`':row='w':col='column'>
<span v-if='column.prop!=="warehousing_status"'>{{ w[column.prop]}}</span>
<span v-else:style='{"color": (w[column.prop].includes("逾期") ? "red" : "#fff")}'>{{ w[col
umn.prop]}}</span>
</slot>
</template>
</mg-table-column>
<mg-table-column v-else show-overflow-tooltip v-bind='column':key='column.prop'>
<template slot='header'>
<span>⽣产进度</span>
</template>
<template slot-scope='scope'>
<el-progress :format='w)':show-text='false':text-inside='true':stroke-width='15':percentage='w.production_progres s'></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/untils.js'
import{ Table, TableColumn }from'element-ui'
import{ mapState }from'vuex'
const scope = v.APP_SCOPE_NAME
export default{
components:{
'mg-table': Table,
'mg-table-column': TableColumn
},
watch:{
height(val){
this.height = val
}
},
props:{
col:{
type: Array,
element表格横向滚动条default:()=>[]
},
tableData:{
type: Array,
default:()=>[]
},
height:{
type: Number,
default:185
},
scroll:{
type: Boolean,
default:false
},
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 /wHeight -2// 表格滚动需要的数据⾏数if(this.scrollable && dataLen > scrollLen){
return at(this.tableData)// 滚动时，⽤两倍data
}else{
return this.tableData
}
},
columns(){
let obj =JSON.Item(this.storageKey))
l.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.scrollable &&this.interval &&clearInterval(this.interval)
},
methods:{
setScroll(){
this.$nextTick(_ =>{
if(this.scrollable){
'.el-table__body-wrapper'
)// container元素设置scrollTop
let tr =this.$Table.$el.querySelector(
'.el-table__body-wrapper tr'
)
if(!ainEl ||!tr){
return
}
// 2.每20ms滚动⼀次
this.interval =setInterval(this.autoScroll,this.scrollMilSeconds)
}
})
},
headerDragend(newWidth, oldWidth, column){
updateLocalStorage(this.storageKey,{
key:this.tableKey,
data:{[column['property']]: newWidth }
})
},
autoScroll(){
ainEl.scrollTop >=(this.tableData.length)*Height){
// 3.确保第⼀次滚动滚动到了底部 scrollTop表⽰滚动条向下滚动时，上⾯超出部分的⾼度
}else{
}
}
}
}
</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/ping.OTF');
}
</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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论