el-table复杂表头（多级表头行或列的合并）

第一种

需求

实现效果

实现方式

javascript 复制代码

<el-table
  :data="tableData"
  border
  max-height="550px"
  :header-cell-style="headerCellStyle"
  :span-method="objectSpanMethod"
>
  <el-table-column label="分公司下发" align="center">
    <el-table-column label="总数" prop="index" align="center">
      <el-table-column prop="index" label="序号" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="总数的值" align="center">
      <template #header>
        <div class="tableTitleContent">31</div>
      </template>
      <el-table-column prop="content" label="内容" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="已完成" prop="content" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="已完成的值" align="center">
      <template #header>
        <div class="tableTitleContent">12</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="未完成" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="未完成的值" align="center">
      <template #header>
        <div class="tableTitleContent">19</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="完成率" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="完成率的值" align="center">
      <template #header>
        <div class="tableTitleContent">38.80%</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="中心创建" align="center">
    <el-table-column label="总数" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="总数的值" align="center">
      <template #header>
        <div class="tableTitleContent">12</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="已完成" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="已完成的值" align="center">
      <template #header>
        <div class="tableTitleContent">6</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="未完成" align="center">
      <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="未完成的值" align="center">
      <template #header>
        <div class="tableTitleContent">6</div>
      </template>
      <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="完成率" align="center">
      <el-table-column prop="deptName" label="创建部门" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="完成率的值" align="center">
      <template #header>
        <div class="tableTitleContent">50%</div>
      </template>
      <el-table-column prop="isFinished" label="是否完成" align="center"></el-table-column>
    </el-table-column>
  </el-table-column>
  <template v-slot:empty>
    <table-empty></table-empty>
  </template>
</el-table>

// 计算表头是否展示
const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 2) {
    if (columnIndex > 1 && columnIndex < 12) {
      return { display: 'none' }
    }
  }
  // 然后让第2行第1列的单元格横向占据11个单元格位置填充刚刚隐去导致的空白
  if ((columnIndex == 1) & (rowIndex == 2)) {
    nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute('colspan', '11')
    })
  }
}
// 合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex == 1) {
    return {
      rowspan: 1,
      colspan: 11
    }
  } else if (columnIndex > 1 && columnIndex <= 11) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else {
    return {
      rowspan: 1,
      colspan: 1
    }
  }
}

第二种

需求

实现效果

实现方式

javascript 复制代码

<el-table :data="tableData" border :header-cell-style="headerCellStyle" :span-method="objectSpanMethod">
  <el-table-column label="成果" align="center" show-overflow-tooltip>
    <el-table-column label="占位单元格">
      <el-table-column label="占位单元格">
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column prop="index" label="序号" align="center"></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="专利" align="center" show-overflow-tooltip>
    <el-table-column label="论文" align="center" show-overflow-tooltip>
      <el-table-column label="软著" align="center" show-overflow-tooltip>
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="专利的值" align="center" show-overflow-tooltip>
    <template #header>
      <div class="tableTitleContent">--</div>
    </template>
    <el-table-column label="论文的值" align="center" show-overflow-tooltip>
      <template #header>
        <div class="tableTitleContent">--</div>
      </template>
      <el-table-column label="软著的值" align="center" show-overflow-tooltip>
        <template #header>
          <div class="tableTitleContent">--</div>
        </template>
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>

  <el-table-column label="项目" align="center" show-overflow-tooltip>
    <el-table-column label="占位单元格">
      <el-table-column label="占位单元格">
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="自研产品" align="center" show-overflow-tooltip>
    <el-table-column label="科研项目" align="center" show-overflow-tooltip>
      <el-table-column label="全员双创" align="center" show-overflow-tooltip>
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="自研产品的值" align="center" show-overflow-tooltip>
    <template #header>
      <div class="tableTitleContent">--</div>
    </template>
    <el-table-column label="科研项目的值" align="center" show-overflow-tooltip>
      <template #header>
        <div class="tableTitleContent">--</div>
      </template>
      <el-table-column label="全员双创的值" align="center" show-overflow-tooltip>
        <template #header>
          <div class="tableTitleContent">--</div>
        </template>
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>

  <el-table-column label="标准" align="center" show-overflow-tooltip>
    <el-table-column label="占位单元格">
      <el-table-column label="占位单元格">
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="国家标准" align="center" show-overflow-tooltip>
    <el-table-column label="行业标准" align="center" show-overflow-tooltip>
      <el-table-column label="地方标准" align="center" show-overflow-tooltip>
        <el-table-column label="团体标准" align="center" show-overflow-tooltip>
          <el-table-column label="企业标准" align="center" show-overflow-tooltip>
            <el-table-column label="创新成果分类" align="center" show-overflow-tooltip></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="国家标准的值" align="center" show-overflow-tooltip>
    <template #header>
      <div class="tableTitleContent">--</div>
    </template>
    <el-table-column label="行业标准的值" align="center" show-overflow-tooltip>
      <template #header>
        <div class="tableTitleContent">--</div>
      </template>
      <el-table-column label="地方标准的值" align="center" show-overflow-tooltip>
        <template #header>
          <div class="tableTitleContent">--</div>
        </template>
        <el-table-column label="团体标准的值" align="center" show-overflow-tooltip>
          <template #header>
            <div class="tableTitleContent">--</div>
          </template>
          <el-table-column label="企业标准的值" align="center" show-overflow-tooltip>
            <template #header>
              <div class="tableTitleContent">--</div>
            </template>
            <el-table-column label="详细分类" align="center" show-overflow-tooltip></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <template v-slot:empty>
    <table-empty></table-empty>
  </template>
</el-table>

// 计算表头是否展示
const headerCellStyle = ({row, column, rowIndex, columnIndex}) => {

  // 合并内容列
  if (rowIndex === 5) {
    if (columnIndex > 1 && columnIndex < 7) {
      return { display: 'none' }
    }
    // 然后让第5行第1列的单元格横向占据8个单元格位置填充刚刚隐去导致的空白
    if (columnIndex === 1) {
      nextTick(() => {
        document.querySelector(`.${column.id}`).setAttribute('colspan', '6')
      })
    }
  }
  // 合并成果、专利、标准列
  if (rowIndex > 0 && rowIndex < 5) {
    if (columnIndex === 0 || columnIndex === 3 || columnIndex === 6) {
      return { display: 'none' }
    }
  }
  if (rowIndex === 0 && (columnIndex === 0 || columnIndex === 3 || columnIndex === 6)) {
    nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute('rowspan', '5')
    })
  }
  // 合并其他单元格
  if (rowIndex === 3 || rowIndex === 4) {
    if (columnIndex !== 0 && columnIndex !== 3 && columnIndex !== 6 && columnIndex !== 7 && columnIndex !== 8) {
      return { display: 'none' }
      // return { visibility: 'hidden' }
    }
  }
  if (rowIndex === 2) {
    if (columnIndex == 1 || columnIndex === 2 || columnIndex === 4 || columnIndex === 5) {
      nextTick(() => {
        document.querySelector(`.${column.id}`).setAttribute('rowspan', '3')
      })
    }
  }
}
// 合并单元格
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
  if (columnIndex == 1) {
    return {
      rowspan: 1,
      colspan: 6
    }
  } else if (columnIndex > 1 && columnIndex < 7) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else {
    return {
      rowspan: 1,
      colspan: 1
    }
  }
}