使用element-ui写一个两行的表格，同一列的上下两行存在一一对应的关系,数据是从一个list获取

使用 Element UI 的表格组件可以更加方便地创建表格，并且具有更多的功能和样式可供选择。下面是一个使用 Element UI 的表格组件来创建一个两行的表格，并从一个数组中获取数据的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="top" label="上行内容"></el-table-column>
    <el-table-column prop="bottom" label="下行内容"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { top: '上行内容1', bottom: '下行内容1' },
        { top: '上行内容2', bottom: '下行内容2' },
        { top: '上行内容3', bottom: '下行内容3' },
        { top: '上行内容4', bottom: '下行内容4' },
        // ...
      ]
    };
  }
};
</script>

在上面的代码中，我们使用了 Element UI 的<el-table>标签来创建表格，并将数据绑定到表格的:data属性上。然后使用<el-table-column>标签来定义表格的列，并使用prop属性来指定列对应数据的属性名。最后，我们将数据直接写在组件的data属性中，也可以通过API获取数据并动态更新表格。

如果需要设置同一列上下两行存在一一对应关系的样式，可以使用 Element UI 的row-class-name属性来设置行的class名称，然后使用CSS样式来设置相应的样式。例如：

<el-table :data="tableData" :row-class-name="rowClassName" style="width: 100%">
  <el-table-column prop="top" label="上行内容"></el-table-column>
  <el-table-column prop="bottom" label="下行内容"></el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
        { top: '上行内容1', bottom: '下行内容1' },
        { top: '上行内容2', bottom: '下行内容2' },
        { top: '上行内容3', bottom: '下行内容3' },
        { top: '上行内容4', bottom: '下行内容4' },
        // ...
      ]
    };
  },
  methods: {
    rowClassName(row, index) {
      return index % 2 === 0 ? 'even-row' : 'odd-row';
    }
  }
};
</script>

<style scoped>
.even-row {
  background-color: #f0f0f0;
}
.odd-row {
  background-color: #ffffff;
}
</style>

在上面的代码中，我们通过设置row-class-name属性来指定行的class名称。然后在methods中定义rowClassName方法来根据行的索引来返回对应的class名称，从而实现同一列上下两行的一一对应关系的样式。最后，我们使用CSS样式来设置奇数行和偶数行的背景颜色不同。