前端表头信息写死还是向服务端请求表头信息呢？

Question

前端表头信息写死还是向服务端请求表头信息呢？

我觉得向服务端请求表头信息可能比较好吧。

比如我设计了下面这个结构用来返回表头信息和数据。表头信息中的prop和数据中键是对应的。

表头信息:
这里我给定了一个width字段用于控制该列的宽度。该列的宽度和该列数据中显示最长的有关，这在后端应该是容易知道的（前端显示的只是一个视图，并不能保证在任何视图下显示的都很好），我觉得这是在后端上设置列宽的一个优点吧。

"fields":  [
    {
      "prop": "dw",
      "name": "单位",
      "width": "160"
    },
    {
      "prop": "xh",
      "name": "序号",
      "width": "60"
    },
    {
      "prop": "jqd",
      "name": "交气点",
      "width": "120"
    },
    {
      "prop": "dlrqgs",
      "name": "代理燃气公司",
      "width": "120"
    },
    {
      "prop": "jqfs",
      "name": "交气方式",
      "width": "100"
    },
    {
      "prop":"jdljjql",
      "name": "阶段累计交气量（方）",
      "width": "200"
    },
    {
      "prop": "rjql",
      "name": "日均气量（方/天）",
      "width": "180"
    },
    {
      "prop": "ljdsl",
      "name": "累计代输量（方）",
      "width": "160"
    },
    {
      "prop": "2024-01-01",
      "name": "1月1日"
    },
    ....
  ],

数据:

"lsqjqltj": [
    {
      "id": "1",
      "xh": "1",
      "dw": "管理2区",
      "jqd": "Bxxxxxx2",
      "dlrqgs": "xxxxxx",
      "jqfs": "代销",
      "jdljjql": 23745,
      "rjql": 156,
      "ljdsl": 0,
      "data": [
        {
          "rq": "2024-01-01",
          "jql": 0
        },
        {
          "rq": "2024-01-02",
          "jql": 1
        },
        {
          "rq": "2024-01-03",
          "jql": 0
        },
        {
          "rq": "2024-01-04",
          "jql": 1
        },
        {
          "rq": "2024-01-05",
          "jql": 0
        },
        {
          "rq": "2024-01-06",
          "jql": 1
        },
        {
          "rq": "2024-01-07",
          "jql": 0
        },
        {
          "rq": "2024-01-08",
          "jql": 1
        }
      ]
    },

此时，前端人员并不需要了解到底有哪些字段？这些字段是什么含义，只需要知道prop和name的含义即可。当后端增加新的表头或者修改表头信息的时候，前端都不需要修改，这是它好的一方面。

前端可能会这样使用获取的表头信息和数据（这里的数据还需要稍作调整）

 <el-table :data="tableData" border>
    <template v-for="item in fields">
      <el-table-column v-if="/\d{4}-\d{1,2}-\d{1,2}/.test(item.prop)" :label="item.name" :prop="item.prop" header-align="center" align="center" :width="item.width">
        <template #header>
          <el-button link type="primary" @click="showDrawer = true">{{item.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column v-else :label="item.name" :prop="item.prop" fixed="left" header-align="center" align="center" :width="item.width">
      </el-table-column>
    </template>
</el-table>

前端人员并不需要了解到底有哪些字段？这些字段是什么含义，只需要知道prop和name的含义即可。

但是这可能还有不利的方面。

如果我们增加编辑信息的功能，

• 首先我们要先要搜索到要编辑的单元格

  • 单位 => 下拉框 => 选择指定的单位
  • 交气点 => 下拉框 => 选择指定的交气点
  • ...

• 最后

  • 交气量 => 输入框 => 填写交气量

这时前端仅仅知道prop和name还足够吗？

弥补措施？后端返回这样的编辑格式信息？然后前端按照这种形式来绘制编辑信息页面？

{
    jql: {
        name: "进气量",
        options: [...]
    }
    ....
}

Answer 1

前端人员并不需要了解到底有哪些字段但总要有人了解，你可能是把前后端对接的工作交到了别人手里，可能是后台，可能给是项目经理，但总的任务并没有减少。这是其一，其二是这种操作增加了业务的复杂性，对于维护及开发都不利。第三，如果表格就这些内容，不会经常变动，那么在前端写死是最省事的，因为在后台做成配置型的，那你需要增加一系列配置型表格的功能，这工作量并不小，其次，也只是把维护人员从前台转移到了不知道谁那里。如果是项目业务需要这种动态配置型的表格，那当我没说