对el-table表格的表头操作

 效果1：单层表头合并

图示1：

 说明：

• header-cell-style函数用于给表头添加样式，其返回的值会被添加到表头对应样式中去
• 注意函数的形参中的column.id为单元格的class类
• 大家最好打印一下，结合审查dom看类名

代码：

 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "孙悟空",
          age: 500,
          home: "花果山水帘洞",
          hobby: "大闹天宫",
        },
        {
          name: "猪八戒",
          age: 88,
          home: "高老庄",
          hobby: "吃包子",
        },
        {
          name: "沙和尚",
          age: 1000,
          home: "通天河",
          hobby: "游泳",
        },
        {
          name: "唐僧",
          age: 99999,
          home: "东土大唐",
          hobby: "取西经",
        },
      ],
    };
  },
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      // 第一步：设置表头的第0列暂不操作，将地1列和第2列隐去使其消失
      if ((columnIndex == 1) | (columnIndex == 2)) {
        return { display: "none" };
      }
      // 第二步， 由于1、2列没有了，后续列就会贴上来（后续列往左错位问题）
      if ((rowIndex == 0) & (columnIndex == 0)) {
        // 解决后续列错位问题，就是将隐去的第1、2列的位置再补上，通过第0列来补
        this.$nextTick(() => {
          // 原来第0列只占据一个位置，现在要去占据三个位置。即占据三列，即设置为横向三个单元格
          document.querySelector(`.${column.id}`).setAttribute("colspan", "3");
          // 这里的column.id实际是dom元素的class，故用点.不用井#，可审查dom验证
          // 通过设置原生的colspan属性，让原来的第一列只占据一个单元格的表头占据3个单元格即可
        });
      }
    },
  },
};
script>
 
<style lang="less">
.el-table {
  th {
    font-weight: bold;
    color: #333;
  }
}
style>

看，基本上一样的用法：先隐藏再设置横跨竖跨单元格

colspan='number' 属性，设置单元格可以横跨几列（默认一个单元格横向只占据一列）

图示2：

代码：

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 第一步：隐去第2列单元格
  if (columnIndex == 2) {
    return { display: "none" };
  }
  // 第二步，让第1列单元格横跨两列（默认单元格只是横跨一列）
  if ((rowIndex == 0) & (columnIndex == 1)) {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
    });
  }
},

图示3：

代码：

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 第一步：隐去第3列单元格
  if (columnIndex == 3) {
    return { display: "none" };
  }
  // 第二步，让第2列单元格横跨两列（默认单元格只是横跨一列）
  if ((rowIndex == 0) & (columnIndex == 2)) {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
    });
  }
},

图示4：

代码：

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 第一步：隐去第1、2、3列单元格
  let hideColArr = [1, 2, 3];
  if (hideColArr.includes(columnIndex)) {
    return { display: "none" };
  }
  // 第二步，让第0列单元格横跨四列（默认单元格只是横跨一列）
  if ((rowIndex == 0) & (columnIndex == 0)) {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "4");
    });
  }
},

效果2：el-table多级表头合并

图示1：

说明： 

• 多级表头，需要进一步通过rowIndex去找到对应的单元格
• 因为单层表头，表头只有1行，rowIndex肯定是0，所以写不写都无所谓
• 但是多级表头有不少行，所以需要使用 columnIndex，rowIndex 进一步定位单元格
• 类似于通过X轴 Y轴的坐标定位到某个单元格位置

代码：

html部分需要el-table-column标签进行嵌套

<template>
  <el-table
    :data="tableData"
    border
    style="width: 600"
    :header-cell-style="headerCellStyle"
  >
    <el-table-column prop="name" label="姓名" width="150" align="center">
      <el-table-column
        prop="name"
        label="三列基础信息"
        width="150"
        align="center"
      >el-table-column>
    el-table-column>
    <el-table-column prop="name" label="年龄" width="150" align="center">
      <el-table-column
        prop="age"
        label="年龄"
        width="150"
        align="center"
      >el-table-column>
    el-table-column>
    <el-table-column prop="name" label="家乡" width="150" align="center">
      <el-table-column
        prop="home"
        label="家乡"
        width="150"
        align="center"
      >el-table-column>
    el-table-column>
    <el-table-column
      prop="hobby"
      label="爱好"
      width="150"
      align="center"
    >el-table-column>
  el-table>
template>

js部分：

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 把第1列第1行和第2列第1行的单元格隐去
  if ((columnIndex == 1) | (columnIndex == 2)) {
    if (rowIndex == 1) { // 加上rowIndex精准定位
      return { display: "none" };
    }
  }
  // 然后让第0列第1行的单元格横向占据3个单元格位置填充刚刚隐去导致的空白
  if ((columnIndex == 0) & (rowIndex == 1)) { // 加上rowIndex精准定位
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "3");
    });
  }
},

图示2：

代码：

html部分

js部分：

• 还可以，直接通过column.label找到对应单元格，然后进行合并单元格操作，不使用rowIndex和columnIndex了
• 这种方式，在某些情况下，会更加方便
• 但无论哪种方式，本质思路都是先找到单元格，再进行合并相关操作

headerCellStyle({ row, column, rowIndex, columnIndex }) {
  // 第一部分的合并
  if (column.label == "年龄") {
    return { display: "none" };
  }
  if (column.label == "家乡") {
    return { display: "none" };
  }
  if (column.label == "基本信息（姓名、年龄、家乡）") {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "3");
    });
    return { background: "pink" };
  }
  // 第二部分的合并
  if (column.label == "性格") {
    return { display: "none" };
  }
  if (column.label == "爱好&性格") {
    this.$nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
    });
    return { background: "orange" };
  }
},