Element动态生成表格以及表格内容无缝滚动
最近做了一个表格消息内容滚动的需求,闲暇之余特意封装了一个组件以供参考,该表格基于Element可以动态配置显示内容及数据,支持多级表格内容配置,支持实时推送数据更新,提供插槽自定义数据,当然你如果只想加载数据不想让列表滚动,传入isScroll='false'
即可关闭内容滚动,还有不足之处还请多多指出。
效果如下所示
直接进入主题
1.页面引入组件,新建vue文件test.vue
,引入表格组件,传入表格相关内容以及表格数据,内容如下
<template>
<div style="height:100%;width:80%">
<dt-srcoll :newData="dutyRateData"
:menuData="menuData"
:lineHeight="5"
:tableHeight="50">
<template slot="footerTable"> //自定义插槽
<el-table-column
label="操作">
<template slot-scope="row">
<el-button type="text" size="small">详情</el-button>
</template>
</el-table-column>
</template>
</dt-srcoll>
</div>
</template>
<script>
import DtSrcoll from '../components/scroll'
export default {
components:{
DtSrcoll
},
data() {
return {
menuData:[ //表格内容
{
name:'班级',
prop:'group'
},
{
name:'书本数量',
prop:'bookNum'
},
{
name:'数量',
prop:'sceneNum'
},
{
name:'进度',
prop:'dutyRate'
}
],
dutyRateData: [ //表格数据(也可以通过实时推送更新数据)
{ group: "电工班1", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班2", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班3", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班4", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班5", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班6", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班7", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班8", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班9", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班10", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
{ group: "电工班11", bookNum: 3, sceneNum: 0, dutyRate: "88%" }
],
};
}
};
</script>
2.DtSrcoll.vue
表格组件相关参数内容如下;
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
newData | 表格内容数据 | Array | ------ |
menuData | 表格显示标题 | Array | ------ |
lineHeight | 显示内容行数 | Number | 5 |
tableHeight | 每一行的高度 | Array | 40(px) |
rowTime | 切换时间 | Number | 1500(ms) |
duration | 过渡时间 | Number | 500(ms) |
isScroll | 是否允许内容滚动 | Boolean | true |
isAgain | 数据滚动到最后一行是否重新开始滚动 | Boolean | false |
isClear | 数据滚动到最后一行是否停止滚动 | Boolean | false |
DtSrcoll.vue
表格组件内容如下,复制即可,el-table
内容也可以根据需求自行更改
<template>
<div>
<el-table
:data="newData"
border
style="width: 100%"
align="center"
size="mini"
id="dbM">
<el-table-column
label="序号"
type="index"
width="60">
</el-table-column>
<el-table-column
v-for="item in menuData"
:label="item.name"
:show-overflow-tooltip="true"
:prop="item.prop">
<!--todo 二级表头-->
<el-table-column
v-for="subItem in item.child"
:label="subItem.name">
<template v-if="!subItem.child" slot-scope="scope">
{{subItem.val}}
</template>
<!--todo 三级表头-->
<el-table-column
v-for="subItem2 in subItem.child"
:label="subItem2.name">
<template v-if="!subItem2.child" slot-scope="scope">
{{subItem2.val}}
</template>
</el-table-column>
</el-table-column>
</el-table-column>
<slot name="footerTable"></slot>
</el-table>
</div>
</template>
<script>
export default {
name: 'DtSrcoll',
props:{
newData:Array, //表格数据
menuData:Array, //表格行内容
lineHeight:{ //页面需要显示的行数
type:Number,
default: 4
},
rowTime:{ //每一行滚动切换等待的时间(毫秒)
type:Number,
default: 1500
},
duration:{ //过渡时间
type:Number,
default: 500
},
tableHeight:{ //行高
type:Number,
default: 40
},
isClear:{ //数据滚动到最后一行是否停止滚动
type:Boolean,
default: false
},
isAgain:{ // 数据滚动到最后一行是否重新开始滚动
type:Boolean,
default: false
},
isScroll:{ //是否允许内容滚动
type:Boolean,
default: true
}
},
data(){
return{
active:0,
timer:''
}
},
mounted() {
let _this=this
this.$nextTick(() => {
let elwrapper = document.getElementsByClassName("el-table__body-wrapper")[0];
elwrapper.style.height=this.lineHeight*this.tableHeight+'px'
let elBody = document.getElementsByClassName("el-table__body")[0];
let elRow=document.getElementsByClassName('el-table__row');
for(let node of elRow){
node.style.height=this.tableHeight+'px'
}
elBody.style.top = 0;
elBody.style.transactionDuration=this.duration+'ms'
if(_this.isScroll){
_this.timer=setInterval(function () {
if(_this.active<parseInt(_this.newData.length)-parseInt(_this.lineHeight)){
_this.active+=1
elBody.style.top=parseInt(elBody.style.top)-parseInt(_this.tableHeight)+'px'
}else{
if(this.isClear){
clearInterval(this.timer)
}
if(_this.isAgain){
_this.active=0
elBody.style.top=0
}else{
clearInterval(_this.timer)
}
}
},_this.rowTime)
}
});
},
destroyed () {
clearInterval(this.timer)
}
}
</script>
<style >
.el-table__body{
position: absolute;
transition: all 500ms linear;
}
</style>
一个完整的内容滚动表格就出来了