1. 多级表头的话，就在 el-table-column中嵌套多层 2. 如果需要为表头设置颜色，则需要在 tl-table标签上的 header-cell-style 属性绑定回调函数 回调函数的返回值有两种： 2.1 可以返回一个对象，来表示需要为表头进行统一样式的设置 2.2 可以是一个回调函数

期望效果

官网效果

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",
      // };
合并表头的首尾列
    <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>
    <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>
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