element-ui表头合并

背景描述

公司给的界面是如下效果，但是使用了elment-ui的多行合并时会遇到表格头部内容的设计出的二级表头，不符合我的需求。

官网和期望效果对比：

合并中间的表头（不是首尾）

注意：适用于表头中间的合并

步骤：

1. 为el-table标签上的 header-cell-style 属性绑定回调函数
2. 跨行合并以及对其他列进行隐藏

• 针对上面的效果图就是对 第0行的设置跨2行，对第一行的第0列、第1列不占位置

template代码：

 <!-- 
  1. 多级表头的话，就在 el-table-column中嵌套多层
  2. 如果需要为表头设置颜色，则需要在 tl-table标签上的 header-cell-style 属性绑定回调函数
        回调函数的返回值有两种：
          2.1 可以返回一个对象，来表示需要为表头进行统一样式的设置
          2.2 可以是一个回调函数
 -->
  <div>
    <h4>期望效果</h4>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headerStyle"
    >
      <el-table-column prop="name" label="username"></el-table-column>
      <el-table-column align="center" label="姓名" width="120">
        <el-table-column prop="name"></el-table-column>
        <el-table-column prop="age"></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="地址">
        <el-table-column
          align="center"
          prop="province"
          label="省份"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="city" label="市区" width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
    <hr />
    <h4>官网效果</h4>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="username" prop="name"></el-table-column>
      <el-table-column align="center" label="姓名" width="120">
        <el-table-column prop="name"></el-table-column>
        <el-table-column prop="age"></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="地址">
        <el-table-column
          align="center"
          prop="province"
          label="省份"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="city" label="市区" width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>

js代码：

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          age: 20,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          age: 23,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      // 2.1
      // headerStyle: {
      //   border: "1px solid orange",
      // },
    };
  },
  methods: {
    /*
     2.2 回调函数中接收4个参数分别为：row, column, rowIndex, columnIndex    
        参数的含义：
          row   为表格每一行的元素，数组
          column 为每一列的元素，对象
          rowindex  第几行，从0开始；
          columnIndex  第几列，从0开始；

    */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      // 让第一行的第二个元素占2行
      if (rowIndex == 0) {
        row[1].rowSpan = 2;
      }
      if (rowIndex == 1) {
        row[0].colSpan = 0;
        row[1].colSpan = 0;
        if (columnIndex == 0 || columnIndex == 1) {
          return {
            display: "none",
          };
        }
      }
      // return {
      //   backgroundColor: "green",
      // };
    },
  },
};

合并表头的首尾列

效果图

代码

html

<div>
    <h4>期望效果</h4>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headerStyle"
    >
      <el-table-column align="center" label="姓名" width="120">
        <el-table-column prop="name"></el-table-column>
        <el-table-column prop="age"></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="地址">
        <el-table-column
          align="center"
          prop="province"
          label="省份"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="city" label="市区" width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
    <hr />
    <h4>官网效果</h4>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" label="姓名" width="120">
        <el-table-column prop="name"></el-table-column>
        <el-table-column prop="age"></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="地址">
        <el-table-column
          align="center"
          prop="province"
          label="省份"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="city" label="市区" width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>

js

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          age: 20,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          age: 23,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    headerStyle({ row, column, rowIndex, columnIndex }) {
      const comStyle = { backgroundColor: "green" };
      // 1.1 让第0行的第0列跨2行
      if (rowIndex === 0 && columnIndex === 0) {
        this.$nextTick(() => {
          document
            .getElementsByClassName(column.id)[0]
            .setAttribute("rowSpan", 2);
          return comStyle;
        });
      }
      // 1.2 被覆盖的进行隐藏
      if (rowIndex === 1 && (columnIndex == 0 || columnIndex == 1)) {
        return {
          display: "none",
          ...comStyle,
        };
      }

      return comStyle;
    },
  },
};

参考文章

https://blog.csdn.net/weixin_43842567/article/details/115243092
https://blog.csdn.net/LJX888666/article/details/120704457