vue + elementPlus table合并单元格

嘟嘟嘟zjc

已于 2024-04-30 09:57:57 修改

阅读量300

点赞数 2

文章标签： vue.js 前端 javascript

于 2024-04-29 15:43:48 首次发布

本文链接：https://blog.csdn.net/zjc1952643102/article/details/138314818

版权

文章介绍了如何将来自Git仓库的数据转换成适合表格展示的形式，包括使用JavaScript对数据结构进行操作，以及在ElementUI的el-table中实现对象span方法以合并单元格，展示一年级一班学生的性别和年龄信息。

摘要由CSDN通过智能技术生成

git代码地址

https://gitee.com/zhoujinchuan/merge-cell.git

效果图

在这里插入图片描述

数据格式部分

backendData: [
        {
          id: 1,
          class: "一年级一班",
          genderList: [
            {
              id: 1,
              gender: "男",
              studentList: [
                { name: "张三", age: 7 },
                { name: "李四", age: 7 },
              ],
            },
            {
              id: 2,
              gender: "女",
              studentList: [
                { name: "王五", age: 6 },
                { name: "赵六", age: 8 },
              ],
            },
          ],
        },
        {
          id: 2,
          class: "一年级一班",
          genderList: [
            {
              id: 3,
              gender: "男",
              studentList: [
                { name: "张三", age: 7 },
                { name: "李四", age: 7 },
              ],
            },
            {
              id: 4,
              gender: "女",
              studentList: [
                { name: "王五", age: 6 },
                { name: "赵六", age: 8 },
              ],
            },
          ],
        },
      ],
    };

1、转换为可用的格式

transformData(data) {
      let newData = [];
      for (const classData of data) {
        for (const genderData of classData.genderList) {
          for (const student of genderData.studentList) {
            newData.push({
              id: classData.id,
              class: classData.class,
              genderId: genderData.id,
              gender: genderData.gender,
              name: student.name,
              age: student.age,
            });
          }
        }
      }
      return newData;
    },

tableData: [
        { id: 1, class: "一年级一班", genderId: 1, gender: "男", name: "张三", age: 7 },
        { id: 1, class: "一年级一班", genderId: 1, gender: "男", name: "李四", age: 7 },
        { id: 1, class: "一年级一班", genderId: 2, gender: "女", name: "王五", age: 6 },
        { id: 1, class: "一年级一班", genderId: 2, gender: "女", name: "赵六", age: 6 },
        { id: 2, class: "一年级一班", genderId: 3, gender: "男", name: "张三", age: 7 },
        { id: 2, class: "一年级一班", genderId: 3, gender: "男", name: "李四", age: 7 },
        { id: 2, class: "一年级一班", genderId: 4, gender: "女", name: "王五", age: 6 },
        { id: 2, class: "一年级一班", genderId: 4, gender: "女", name: "赵六", age: 6 },
      ],

2、表格展示

 <el-table
    :data="tableData"
    width="500"
    style="width: 500px"
    border
    :span-method="objectSpanMethod"
  >
    <el-table-column prop="class" width="200" label="班级"></el-table-column>
    <el-table-column prop="gender" width="70" label="性别"></el-table-column>
    <el-table-column prop="name" width="150" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>

:span-method=“objectSpanMethod” 绑定合并单元格处理方法

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     console.log(column);
     // 仅在处理特定列时进行合并操作，这里假设是第一列，即班级列
     if (columnIndex === 0) {
       // 获取当前单元格的id值
       const currentValue = row.id;
       // 获取上一行相同列的id值
       const preRow = this.tableData[rowIndex - 1];
       const preValue = preRow ? preRow.id : null;

       // 如果当前id和上一行的id相同，则不合并，显示当前行
       if (currentValue === preValue) {
         return { rowspan: 0, colspan: 0 };
       } else {
         // 计算当前单元格应该跨越多少行
         let rowspan = 1;
         for (let i = rowIndex + 1; i < this.tableData.length; i++) {
           const nextRow = this.tableData[i];
           if (nextRow.id === currentValue) {
             rowspan++;
           } else {
             break;
           }
         }
         // 返回合并的行数和列数，这里colspan保持为1，因为我们只在一列上进行合并
         return { rowspan, colspan: 1 };
       }
     }
     
   	// 仅在处理特定列时进行合并操作，这里假设是第一列，即性别列
     if (columnIndex === 1) {
       // 获取当前单元格的id值
       const currentValue = row.genderId;
       // 获取上一行相同列的id值
       const preRow = this.tableData[rowIndex - 1];
       const preValue = preRow ? preRow.genderId : null;

       // 如果当前id和上一行的id相同，则不合并，显示当前行
       if (currentValue === preValue) {
         return { rowspan: 0, colspan: 0 };
       } else {
         // 计算当前单元格应该跨越多少行
         let rowspan = 1;
         for (let i = rowIndex + 1; i < this.tableData.length; i++) {
           const nextRow = this.tableData[i];
           if (nextRow.genderId === currentValue) {
             rowspan++;
           } else {
             break;
           }
         }
         // 返回合并的行数和列数，这里colspan保持为1，因为我们只在一列上进行合并
         return { rowspan, colspan: 1 };
       }
     }

     // 如果不是第一列，则不进行合并
     return { rowspan: 1, colspan: 1 };
   },
 },