element el-table 表格横纵双表头，横纵表头交换，表头样式优化，表头背景色样式设置，列样式设置

在Element UI中，可以使用el-table组件的span-method属性来实现横纵双表头，并使用header-cell-style属性来设置表头的样式，包括背景色。

以下是一个简单的例子，展示了如何设置横纵双表头以及表头样式的基本实现：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :span-method="spanMethod"
    :header-cell-style="{ background: '#f2f2f2', color: '#333' }"
  >
    <el-table-column
      label="日期"
      width="150"
      span="2"
    >
      <el-table-column
        prop="date"
        label="序号"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="50"
      ></el-table-column>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180"
    >
      <el-table-column
        prop="name"
        label="姓"
        width="90"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="名"
        width="90"
      ></el-table-column>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          // 其他数据
        },
        // 其他数据行
      ]
    };
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return [1, 2];
        } else {
          return [0, 0];
        }
      }
    }
  }
};
</script>

在这个例子中，我们定义了一个双表头，其中外层表头跨越两列，内层表头跨越一列。通过spanMethod方法，我们实现了基于行索引来决定合并单元格的策略。header-cell-style属性用于设置表头的背景色和文字颜色。

你可以根据自己的需求调整表头的结构和样式。如果需要横纵表头交换，只需调整el-table-column的嵌套顺序即可。