脚本宝典收集整理的这篇文章主要介绍了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>

脚本宝典总结

以上是脚本宝典为你收集整理的grid画表格全部内容，希望文章能够帮你解决grid画表格所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。