前端 - el-table的表格如何渲染成如图所示的模样?

Question

各位大佬们好，最近在开发前端项目，采用的是vue2+element-ui,遇到了一个需求是要渲染一个如下所示的表格

对于这种表格的表头想请教一下各位大佬要如何渲染成这样

Answer 1

<el-table-column
  label="数值"
  width="180">
  <template slot-scope="scope">
         <el-input-number v-model="value" size="small" />
  </template>
</el-table-column>
<el-table-column
  label="单位"
  width="180">
  <template slot-scope="scope">
         {{scope.row.dw}}
  </template>
</el-table-column>

我不明白是否你的具体需求，如果仅此而已，还是要多看文档呀

Answer 2

为了在 Vue 2 + Element UI 中渲染出如图所示的复杂表头（包括跨列和跨行的表头），你可以使用 Element UI 的 <el-table> 组件，并结合其 span-method 属性来实现跨行或跨列的表头。但是，Element UI 原生并不直接支持复杂的跨行跨列表头布局，如完全合并的复杂表头（如图中所示）。不过，你可以通过一些技巧和额外的布局来近似实现。

以下是一个基本的思路，使用 Element UI 的 <el-table> 和 <el-table-column>，以及 CSS 样式调整来尝试实现：

1. 使用 <el-table-column> 的 label 和 colspan 属性：colspan 可以用来合并列，但 Element UI 不支持 rowspan 合并表头行。
2. 自定义表头内容：通过 header 插槽自定义表头内容，并在其中使用 <el-row> 和 <el-col>（来自 Element UI 的布局组件）来构建复杂的表头布局。
3. 隐藏不需要的列：如果使用了额外的列来辅助布局，可以通过 CSS 隐藏这些列。
4. 注意表格数据对齐：确保数据按照表头布局正确对齐。

由于这里不能直接编写完整的 HTML/CSS/Vue 代码，我将提供一个简化的代码示例来说明如何使用 header 插槽自定义表头：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 自定义表头，使用 header 插槽 -->
    <el-table-column
      label=" "
      width="100"
      :render-header="renderHeader">
    </el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ /* ...数据... */ }],
    };
  },
  methods: {
    renderHeader(h, { column, $index }) {
      // 这里使用 Element UI 的渲染函数 h 来构建复杂的表头
      // 注意：这里只是示意，具体实现需根据具体需求调整
      return h('div', [
        h('el-row', [
          h('el-col', { span: 8 }, '表头1'),
          h('el-col', { span: 8 }, '表头2（跨两列）'),
          // ... 其他表头项
        ]),
        // 如果有需要，可以添加更多的 el-row 和 el-col 来构建更复杂的表头
      ]);
    },
  },
};
</script>

<style scoped>
/* 可能需要一些额外的 CSS 来调整布局和样式 */
</style>

注意：上面的代码示例仅用于说明如何通过自定义表头来尝试实现复杂表头布局。由于 Element UI 的限制，你可能需要结合使用 HTML/CSS 布局技巧来精确控制表头的外观。此外，对于极端复杂的表头布局，可能需要考虑使用其他库或自定义组件来实现。

如果表头布局非常复杂，且难以通过 Element UI 的现有功能实现，你也可以考虑使用纯 CSS 网格布局（如 CSS Grid）或 Flexbox 来构建一个自定义的表格头部，然后将表格数据以某种方式（如通过绝对定位或额外的列）与表头对齐。但这种方法可能会比较复杂，且难以与 Element UI 的表格组件无缝集成。