前端低代码实现复杂账单表格

前言

相信很多同学都遇见过这样的情况，产品经理要你写一个表格来显示数据

表格简单还好，要是像第一个那样，写起来就头疼

寻常方式就是用 html 自带的 table tr td 来实现

或者说使用一些 UI 库，比如 element plus 中的 el-table

虽然，都可以实现，但是对于刚接触这些比较复杂表格的人来说，写起来还是比较费时间的

有没有什么比较简单的方式来实现呢？

当然是有啦，现在都 2024年了，低代码都很成熟了

我们为何不借助这些工具呢？

实现

我们先建立一个项目

pnpm create vite table-draw --template vue-ts

进入文件夹中

cd table-draw

安装下依赖

pnpm install

启动

pnpm run dev

接下来，我们将使用一个 Vue3 低代码可视化表单工具 Variant Form 3 来绘制下方这个表格

绘制前，我们先来分析下这个表格

这个表格，可以大体分为 6 行

列的话，我们以最多列为主，明显可以看到上图最多列就是 4 列

那我们进入到这个网站中，先建立 6 行 * 4列 的表格

第 2 、4 行，第 2、3、4 列需要合并

第1列，第 5、6 行需要合并

但是和原来的还是有差距啊！

主要相差是每个格子的尺寸与文字

调整尺寸的话，我们点击每个格子，然后在右边就可以设置属性了

全部设置尺寸后，我们可以看到基本架子就出来了

现在的问题是要怎么导入，项目中去使用呢，生成 SFC，复制到项目中

修改下 App.vue

<script setup lang="ts">
import TableDraw from './components/TableDraw.vue'
</script>

<template>
  <TableDraw />
</template>

新增 src/components/TableDraw.vue，将刚才复制的代码粘贴在里面

效果已经有，我们再把图片上的文字加进去，并修改下边框颜色

看下最终效果

复制过来的代码太多，实际上我们用到的代码也就table tr td 这些代码，以及一些样式

<template>
  <div class="table-container">
    <table class="table-layout">
      <tbody>
        <tr>
          <td class="table-cell" style="width: 160px !important">
            工程名称
          </td>
          <td class="table-cell">
          </td>
          <td class="table-cell">
            部位
          </td>
          <td class="table-cell">
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            建筑名称
          </td>
          <td class="table-cell" colspan="3">
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            监理单位
          </td>
          <td class="table-cell">
          </td>
          <td class="table-cell">
            施工单位
          </td>
          <td class="table-cell">
          </td>
        </tr>
        <tr>
          <td class="table-cell" style="height: 300px !important">
            工作量
          </td>
          <td class="table-cell" colspan="3">
          </td>
        </tr>
        <tr>
          <td class="table-cell" rowspan="2">
            会签栏
          </td>
          <td class="table-cell">
            施工单位
          </td>
          <td class="table-cell">
            监理单位
          </td>
          <td class="table-cell">
            建设单位
          </td>
        </tr>
        <tr>
          <td class="table-cell" style="height: 160px !important">
          </td>
          <td class="table-cell">
          </td>
          <td class="table-cell">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #000000;
    }
  }
}
</style>

案例代码上传了案例仓库

小结

实现 Table 的方式很多

• html 的 table tr td
• UI 组件库Element Plus 的 el-table

但是，这样一个个tr、td写，比较耗时

使用低代码工具可视化编写，能很快就搭出一个整体框架，再修修改改基本就完成