grid画表格
作者:互联网
如果element表格功能不能实现需求,那就自己整一个把
0.需求
表格参数获取是乱序的,没法装成一个对象塞进去,我就想到自己画一个表格。
那么,欢迎卡密二代GRID大佬登场!!!
1.思路
表格就是一个个单元格构成的聚集体,和grid的分割线分割后组成的空间差别不大。grid间距调到极小,(我用的0.1px/刚刚看了下我居然没用间距,行吧),视觉效果类似表格的无间距。如果有多格的表格,注意它所占据的长宽即可。
gird-template-columns 行格式
grid-template-rows 列格式
2.实现代码
<template>
<div>
<div class="tableBox">
<span v-for="(i, index) in titleArr" :key="index">{{ i }}</span>
<!-- energy -->
<span>{{ energy.name }}</span>
<span>{{ energy.clearPurcase }}</span>
<span>{{ energy.purchase }}</span>
<span>{{ energy.outProvide }}</span>
<span>{{ energy.COGene }}</span>
<span>{{ energy.consumeSum }}</span>
<span>{{ energy.COTotalSum }}</span>
<!-- heat -->
<span>{{ heat.name }}</span>
<span>{{ heat.clearPurcase }}</span>
<span>{{ heat.purchase }}</span>
<span>{{ heat.outProvide }}</span>
<span>{{ heat.COGene }}</span>
<span>{{ heat.consumeSum }}</span>
<span>{{ heat.COTotalSum }}</span>
<!-- COTotalSum -->
<span>{{ COTotalSum.name }}</span>
<span class="COTotalSum">{{ COTotalSum.COTotalSum }}</span>
</div>
</div>
</template>
<script>
export default {
props: ["titleArr", "energy", "heat", "COTotalSum"],
};
</script>
<style lang="scss" scoped>
.tableBox {
display: grid;
color: aliceblue;
grid-template-columns: repeat(7, 180px);
grid-template-rows: repeat(3, 50px);
overflow: auto;
span {
width: 100%;
text-align: center;
line-height: 50px;
border: 0.1px solid rgb(255, 255, 255);
}
.COTotalSum {
grid-column-start: span 6;
}
}
</style>
标签:表格,energy,COTotalSum,heat,grid,template,画表格 来源: https://www.cnblogs.com/lepanyou/p/15495982.html