grid画表格

如果element表格功能不能实现需求，那就自己整一个把

0.需求

表格参数获取是乱序的，没法装成一个对象塞进去，我就想到自己画一个表格。
那么，欢迎卡密二代GRID大佬登场！！！

卡密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>

 

 

 

3.注意

grid自带的fr与滚动条overflow冲突。
如果用fr等分grid方块面积，就不能出现超过一定长度后出现滚动条，因此要固定grid-template-columns的宽度。