el-table实现合并表头

暖橘.

已于 2024-02-19 17:23:50 修改

阅读量456

点赞数 3

文章标签： javascript vue.js 开发语言

于 2024-02-19 16:55:18 首次发布

本文链接：https://blog.csdn.net/weixin_46155697/article/details/136174144

版权

el-table实现合并表头
在这里插入图片描述

<template>
  <div ref="appContainer" class="app-container">
    <el-table :data="initialList" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" stripe border :header-cell-style="headFirst"
      height="90%" :span-method="objectSpanMethod">
      <el-table-column v-for="(item, index) in column" :key="index" :label="item.label" :prop="item.prop" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          {{ scope.row[item.prop] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "elTableHead",
  data() {
    return {
      // 表格数据
      initialList: [
        {
          data11: "info11",
          data21: "info21",
          data22: "info22",
          data23: "info23",
          data31: "info31",
          data32: "info32",
          data41: "info41",
          data51: "info51",
          data61: "info61",
          data62: "info62",
          data71: "info71",
        },
        {
          data11: "info11",
          data21: "info21",
          data22: "info22",
          data23: "info23",
          data31: "info31",
          data32: "info32",
          data41: "info41",
          data51: "info51",
          data61: "info61",
          data62: "info62",
          data71: "info71",
        },
        {
          data11: "info11",
          data21: "info21",
          data22: "info22",
          data23: "info23",
          data31: "info31",
          data32: "info32",
          data41: "info41",
          data51: "info51",
          data61: "info61",
          data62: "info62",
          data71: "info71",
        },
        {
          data11: "info11",
          data21: "info21",
          data22: "info22",
          data23: "info23",
          data31: "info31",
          data32: "info32",
          data41: "info41",
          data51: "info51",
          data61: "info61",
          data62: "info62",
          data71: "info71",
        },
        {
          data11: "info11",
          data21: "info21",
          data22: "info22",
          data23: "info23",
          data31: "info31",
          data32: "info32",
          data41: "info41",
          data51: "info51",
          data61: "info61",
          data62: "info62",
          data71: "info71",
        },
      ],
      // 表格列
      formData: [
        {
          label: "列1-1",
          prop: "data11",
          visible: true,
        },
        {
          label: "列2-1",
          prop: "data21",
          visible: true,
        },
        {
          label: "列2-2",
          prop: "data22",
          visible: true,
        },
        {
          label: "列2-3",
          prop: "data23",
          visible: true,
        },
        {
          label: "列3-1",
          prop: "data31",
          visible: true,
        },
        {
          label: "列3-2",
          prop: "data32",
          visible: true,
        },
        {
          label: "列4-1",
          prop: "data41",
          visible: true,
        },
        {
          label: "列5-1",
          prop: "data51",
          visible: true,
        },
        {
          label: "列6-1",
          prop: "data61",
          visible: true,
        },
        {
          label: "列6-2",
          prop: "data62",
          visible: true,
        },
        {
          label: "列7-1",
          prop: "data71",
          visible: true,
        },
      ],
    };
  },
  computed: {
    // 表头的处理
    column() {
      const column = [];
      this.formData.map((group) => {
        if (group.visible) {
          column.push(group);
        }
      });
      return column;
    },
  },
  watch: {},

  activated() {
    this.$forceUpdate();
  },
  created() {},
  mounted() {},
  methods: {
    // 合并表头
    headFirst({ row, colunm, rowIndex, columnIndex }) {
      let base = {
        "background-color": "rgba(67, 137, 249, 0.3)",
        color: "#333",
        "text-align": "center",
        "z-index": 99,
        display: "inline-block",
        width: "200%",
      };
      let hiddenList = ["data22", "data23", "data32", "data62"];
      //这里为了是将第一列的表头隐藏，就形成了合并表头的效果
      if (rowIndex === 0) {
        // 判断对第几列合并  property就是prop传入的属性
        if (row[columnIndex].property === "data21") {
          return { ...base, width: "300%" };
        } else if (row[columnIndex].property === "data31") {
          return { ...base };
        } else if (row[columnIndex].property === "data61") {
          return { ...base };
        } else if (hiddenList.indexOf(row[columnIndex].property) > -1) {
          return { "font-size": 0 };
        }
      }
    },
    // 合并数据
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let visibleData = this.initialList;
      const fields = ["data11", "data21"];
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[rowIndex - 1];
        let nextRow = visibleData[rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
  },
};
</script>
<style scoped>
</style>