vue3 数据可视化大屏 项目开发时,经常会遇到table效果,但是限于页面大小,table的数据并不能完全的显示出来,这就需要让table滚动起来,之前使用vue2已经实现过了类似的效果,vue table组件结合vue-seamless-scroll实现滚动,这次是使用的vue3组件变了所以从新记录一下。
安装依赖
组件使用了Vue3SeamlessScroll所以需要先安装一下依赖。
pnpm i Vue3SeamlessScroll
组件代码
<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>
<Vue3SeamlessScroll :wheel="true" :hover="true" :list="list" class="tableBody">
<div class="tableBody2" v-for="(item,index) in list" :key="index">
<div class="tableBody2Item" style="flex: 1.5">
<span class="top1" v-if="index==0">top1</span>
<span class="top2" v-else-if="index==1">top2</span>
<span class="top3" v-else>top{{ index + 1 }}</span>
</div>
<div class="tableBody2Item" style="flex: 1.5">
电站1
</div>
<div class="tableBody2Item">
<span class="num">3680</span>
</div>
</div>
</Vue3SeamlessScroll>
</div>
</template>
<script>
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
export default {
name: "tableCom",
components: {Vue3SeamlessScroll},
props: {
head: {
type: Array,
default() {
return [{
title: '排名',
flex: 1.5
}, {
title: '电站名称',
flex: 1.5
}, {
title: '小时数',
flex: 1
}];
}
},
},
data() {
return {
list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {},]
}
},
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: 34px;
background: rgba(#2E6ACC, 0.2);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.tableHeadItem {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #1CC6FF;
text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
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% - 34px);
overflow: hidden;
.tableBody2 {
min-height: 34px;
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: MicrosoftYaHei;
font-weight: 400;
color: #CAD3ED;
text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
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(#2E6ACC, 0.2);
}
}
.status {
color: rgba(13, 206, 242, 1);
}
}
.num {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #50E693;
line-height: 19px;
text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
}
.top1 {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #FFA10C;
line-height: 19px;
text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
}
.top2 {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #81DDED;
line-height: 19px;
text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
}
.top3 {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #CAD3ED;
line-height: 19px;
text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
}
</style>