Vue 学习随笔系列十三 -- ElementUI 表格合并单元格

ElementUI 表格合并单元格

### 文章目录

[ElementUI 表格合并单元格](#文章目录 ElementUI 表格合并单元格 @TOC 一、表头合并二、单元格合并 1、示例代码 2、示例效果)
[@[TOC](文章目录)](#文章目录 ElementUI 表格合并单元格 @TOC 一、表头合并二、单元格合并 1、示例代码 2、示例效果)
[一、表头合并](#文章目录 ElementUI 表格合并单元格 @TOC 一、表头合并二、单元格合并 1、示例代码 2、示例效果)
[二、单元格合并](#文章目录 ElementUI 表格合并单元格 @TOC 一、表头合并二、单元格合并 1、示例代码 2、示例效果)
[1、示例代码](#文章目录 ElementUI 表格合并单元格 @TOC 一、表头合并二、单元格合并 1、示例代码 2、示例效果)
[2、示例效果](#文章目录 ElementUI 表格合并单元格 @TOC 一、表头合并二、单元格合并 1、示例代码 2、示例效果)

一、表头合并

参考： https://www.jianshu.com/p/2befeb356a31

二、单元格合并

1、示例代码

bash 复制代码

<template>
  <div>
    <el-table
      size="small"
      border
      class="custom-tab"
      :data="tableBody"
      :span-method="objectMergeMethod"
      :cell-style="columnStyle"
      :row-class-name="rowStyle"
      :header-cell-style="{
        background: '#87CEFA',
        color: '#38434F',
        fontWeight: '500',
        fontSize: '14px',
      }"
    >
    
      <!-- <el-table-column type="index" label="序号" width="58" align="center"></el-table-column> -->
      <el-table-column prop="type" label="姓名" align="center" width="140px"></el-table-column>
      <el-table-column prop="name" label="科目" align="center"></el-table-column>
      <el-table-column prop="sysData" label="成绩" align="center"></el-table-column>
      <el-table-column prop="contractData" label="排名" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    DiffData: {},
    isShowOpr: {
      default: false
    },
  },
  data() {
    return {
      // 表体数据
      tableBody: [
        {
          type: "小明",
          name: "语文",
          sysData: 10,
          contractData: "1",
          isDiff: "是",
          fhsj: "",
        },
        {
          type: "小明",
          name: "数学",
          sysData: 20,
          contractData: "2",
          isDiff: "是"
        },
        {
          type: "小明",
          name: "英语",
          sysData: 30,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小明",
          name: "地理",
          sysData: 30,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小明",
          name: "生物",
          sysData: 30,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小李",
          name: "语文",
          sysData: 88,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小李",
          name: "数学",
          sysData: 44,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小李",
          name: "英语",
          sysData: 44,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小李",
          name: "历史",
          sysData: 44,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小李",
          name: "生物",
          sysData: 44,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小王",
          name: "语文",
          sysData: 1001,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小王",
          name: "数学",
          sysData: 1001,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小王",
          name: "英语",
          sysData: 1001,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小王",
          name: "地理",
          sysData: 1001,
          contractData: "1",
          isDiff: "是"
        },
        {
          type: "小王",
          name: "生物",
          sysData: 1001,
          contractData: "1",
          isDiff: "是"
        },
      ],
      cellList: [], // 单元格数组
      count: null, // 计数
    };
  },
  watch: {
    tableBody: {
      immediate: true,
      deep: true,
      handler() {
        this.computedColumns(this.tableBody)
      },
    },
  },
  // mounted() {
  //   // 第1步，根据表体信息，计算合并单元格的信息
  //   this.computedColumns(this.DiffData);
  // },
  methods: {
    columnStyle({row, column, rowIndex, columnIndex}) {
      if(columnIndex === 0) {
        // 表头样式
        // return "background: #F5F6FA; color: #171A23; font-weight: 500; font-size: 14px; ";
        if(row.type == '小明') {
          return 'row-m1'
        } else if(row.type == '小李') {
          return 'row-m2'
        } else if(row.type == '小王') {
          return 'row-m3'
        } else if(row.type == 'xxx') {
          return 'row-m4'
        }
      }
    },
    rowStyle({ row, rowIndex }) {
      if(row.type == '小明') {
        return 'row-m1'
      } else if(row.type == '小李') {
        return 'row-m2'
      } else if(row.type == '小王') {
        return 'row-m3'
      } else if(row.type == 'xxx') {
        return 'row-m4'
      }
      // 指定行或列信息样式
      // if(rowIndex === 7) {
      //   return 'target-row'
      // }
    },
    // 第1步，遍历表格数据
    computedColumns(tableBody) {
      // 循环遍历表体数据
      for (let i = 0; i < tableBody.length; i++) {
        if (i == 0) {
          // 先设置第一项，往 cellList 中追加 1， 若下一项与当前项相同，则往 cellList中追加 0 
          // count 初始值为 0 
          this.cellList.push(1); 
          this.count = 0; 
          // console.log("索引", 0, this.count);
        } else {
          // 判断当前项与上一项的类别(type)是否相同，若相同则合并这一列的单元格
          if (tableBody[i].type == tableBody[i - 1].type) {
            // 如果相同, this.cellList 增加计数 1 ，并向数组追加数据 0
            this.cellList[this.count] += 1; 
            this.cellList.push(0); 
            // console.log("索引", this.count);
          } else {
            // 如果不同，往cellList数组中追加 1，并将索引赋值给 count
            this.cellList.push(1); 
            this.count = i; 
            // console.log("索引", this.count);
          }
        }
      }
    },
    // 第2步，将计算好的结果返回给el-table，表格会根据结果做出对应合并列渲染
    objectMergeMethod({ row, column, rowIndex, columnIndex }) {
      // 给第一列做单元格合并。0 是第一列，1 是第二列。
      if (columnIndex === 0) {
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          // 清除所有单元格数据，防止动态数据出现表格偏移现象
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
  .vueWrap {
    .custom-tab {
      margin: 0 0 20px 0;
    }
  }
  .data-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      height: 7px;
      width: 7px;
      background-color: '#333';
      margin: 0 2px 0 0;
    }
  }
  ::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {

  }

  ::v-deep .target-row {
    color: #3363FF;
    font-weight: 500;
  }

  ::v-deep .row-m1 {
    background-color: #BBFFFF;
    color: #333;
  }
  ::v-deep .row-m2 {
    background-color: #FFF8DC;
    color: #333;
  }
  ::v-deep .row-m3 {
    background-color: #F0FFF0;
    color: #333;
  }
  ::v-deep .row-m4 {
    background-color: #E0EEE0;
    color: #333;
  }
  .update-btn {
    color: #4597EB;
    cursor: pointer;
  }
</style>

Vue 学习随笔系列十三 -- ElementUI 表格合并单元格

ElementUI 表格合并单元格

### 文章目录

一、表头合并

二、单元格合并

1、示例代码

2、示例效果