前端用element-ui设计两行的表格，每一列的上下两行一一对应的关系

可以使用 Element UI 中的表格组件 `el-table` 来实现两行的表格，其中每一列的上下两行一一对应的关系可以通过使用 `span-method` 属性来实现。

具体步骤如下：

1. 在 `el-table` 中使用 `:data` 属性绑定数据源。

2. 在表格中定义两行，分别使用 `slot-scope` 属性来指定上下两行的数据源。

3. 在表格中使用 `span-method` 属性来指定每一列的上下两行的对应关系。`span-method` 属性是一个函数，接收 `row` 和 `column` 两个参数，需要返回一个包含 `rowspan` 和 `colspan` 两个属性的对象，分别指定单元格的行合并数和列合并数，若不需要合并则返回 `{ rowspan: 1, colspan: 1 }`。

示例代码如下：

<template>
  <el-table :data="tableData">
    <el-table-column label="列1" prop="col1" :span-method="spanMethod">
      <template slot-scope="{ row }">
        <div>{{ row.col1_top }}</div>
        <div>{{ row.col1_bottom }}</div>
      </template>
    </el-table-column>
    <el-table-column label="列2" prop="col2" :span-method="spanMethod">
      <template slot-scope="{ row }">
        <div>{{ row.col2_top }}</div>
        <div>{{ row.col2_bottom }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          col1_top: '1-1',
          col1_bottom: '1-2',
          col2_top: '1-3',
          col2_bottom: '1-4',
          col3_top: '1-5',
          col3_bottom: '1-6'
        },
        {
          col1_top: '2-1',
          col1_bottom: '2-2',
          col2_top: '2-3',
          col2_bottom: '2-4',
          col3_top: '2-5',
          col3_bottom: '2-6'
        }
      ]
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return { rowspan: 2, colspan: 1 }
      } else {
        return { rowspan: 1, colspan: 1 }
      }
    }
  }
}
</script>

在上面的示例代码中，表格中的每一列都包含上下两行，`spanMethod` 函数中通过判断 `columnIndex` 来确定当前单元格属于哪一列，然后返回包含 `rowspan` 和 `colspan` 两个属性的对象，指定单元格的行合并数和列合并数。