vue2 数据可视化大屏 项目开发时,经常会遇到table效果,但是限于页面大小,table的数据并不能完全的显示出来,这就需要让table滚动起来。当前是使用的vue2如果是vue3项目中开发的话,可以用:vue3 table结合vue3-seamless-scroll实现滚动
组件代码
<template>
<div class="tableCom">
<div class="tableHead">
<div class="tableHeadItem" v-for="(item,index) in head" :key="index" :style="{flex:item.flex}">{{ item.title }}
</div>
</div>
<vue-seamless-scroll
:data="list"
:class-option="defaultOption"
class="tableBody"
>
<div class="tableBody2" v-for="(item,index) in list" :key="index">
<div class="tableBody2Item" :style="{flex:head[i].flex,color:v.color?v.color:v.color}"
v-for="(v,i) in item" :key="i">{{ v.title }}
</div>
</div>
</vue-seamless-scroll>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: "tableCom",
components: {vueSeamlessScroll},
props: {
list: {
type: Array,
default() {
return [
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11:18'}],
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11:18'}],
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11:18'}],
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11:18'}],
[{title: '荥阳路文化1'}, {title: '张三'}, {title: '待处理'}, {title: '11:18'}],
];
}
},
head: {
type: Array,
default() {
return [{
title: '车场',
flex: 1.2
}, {
title: '维修员',
flex: 1
}, {
title: '状态',
flex: 1
}, {
title: '时间',
flex: 1
},];
}
},
},
computed: {
defaultOption() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 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)
}
}
},
data() {
return {}
},
watch: {},
mounted() {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.tableCom {
width: calc(100% - 40px);
margin-left: 20px;
position: relative;
height: 100%;
overflow: hidden;
.tableHead {
width: 100%;
height: 36px;
background: rgba(#013367, 0.8);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.tableHeadItem {
font-size: 14px;
font-family: PingFang;
font-weight: 500;
color: #DCEBFC;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
padding-left: 5px;
flex: 1;
}
}
.tableBody {
position: relative;
height: calc(100% - 36px);
overflow: hidden;
.tableBody2 {
min-height: 36px;
padding-top: 5px;
padding-bottom: 5px;
background: rgba(#031F3D, 0.8);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.tableBody2Item {
font-size: 14px;
font-family: PingFang;
font-weight: 500;
color: #DCEBFC;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
padding-left: 5px;
flex: 1;
}
}
.tableBody2:nth-child(2n) {
background: rgba(1, 51, 103, 0.8);
}
}
.status {
color: rgba(13, 206, 242, 1);
}
}
</style>