element单元格类型相同的合并

最新推荐文章于 2024-08-23 14:49:37 发布

真的不想哇

最新推荐文章于 2024-08-23 14:49:37 发布

阅读量83

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/xiaoHelloWord/article/details/139356437

版权

在这里插入图片描述

<el-table :data="tableDataFile" border style="width: 100%" :span-method="objectSpanMethod">
          <el-table-column prop="fileType" label="文件类型"  >
              <template #default="scope">{{ scope.row.fileType }} </template>
          </el-table-column>
          <el-table-column prop="originalName" label="文件名称"  />
          <el-table-column prop="fileSize" label="文件大小"  />
          <el-table-column prop="fileVersion" label="版本号"  >
            <template #default="scope">V{{scope.row.fileVersion }} </template>
          </el-table-column>
          <el-table-column prop="updateBy" label="更新人"  />
          <el-table-column prop="updateTime" label="上传时间"  />
          <el-table-column  label="操作" width="120">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>


			
      const tableDataFile = [
      { fileType: 2, originalName: 'File 4', fileSize: '8MB', fileVersion: 1, updateBy: 'User 4', updateTime: '2024-05-28' },
      { fileType: 2, originalName: 'File 5', fileSize: '8MB', fileVersion: 1, updateBy: 'User 4', updateTime: '2024-05-28' },
      { fileType: 2, originalName: 'File 6', fileSize: '8MB', fileVersion: 1, updateBy: 'User 4', updateTime: '2024-05-28' },
      { fileType: 3, originalName: 'File 7', fileSize: '8MB', fileVersion: 1, updateBy: 'User 4', updateTime: '2024-05-28' },
      { fileType: 1, originalName: 'File 1', fileSize: '10MB', fileVersion: 1, updateBy: 'User 1', updateTime: '2024-05-31' },
      { fileType: 1, originalName: 'File 2', fileSize: '15MB', fileVersion: 2, updateBy: 'User 2', updateTime: '2024-05-30' },
      { fileType: 1, originalName: 'File 3', fileSize: '12MB', fileVersion: 1, updateBy: 'User 3', updateTime: '2024-05-29' },
      { fileType: 2, originalName: 'File 3', fileSize: '12MB', fileVersion: 1, updateBy: 'User 3', updateTime: '2024-05-29' },
      { fileType: 2, originalName: 'File 8', fileSize: '8MB', fileVersion: 1, updateBy: 'User 4', updateTime: '2024-05-28' }
    ];


	const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
            console.log('objectSpanMethod',row, column, rowIndex, columnIndex)
            if (columnIndex === 0) {
            const _row = flitterData(tableDataFile).one[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col,
            };
		      }
        }

    const flitterData = (arr) => {
            // 合并表格第一列
            let spanOneArr = [];
            let concatOne = 0;
            arr.forEach((item, index) => {

                if (index === 0) {
                    spanOneArr.push(1);
                    }
                else {
                    console.log('item',item,index)
                    console.log('arr',arr[index-1])
                    // 这里的fileType是表格绑定的字段，也就是需要合并的字段，根据自己的需求来改
                    if (item.fileType == arr[index -1].fileType) {
                        // 第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1;
                        spanOneArr.push(0);
                    } else {
                        spanOneArr.push(1);
                        concatOne = index;
                    }

                }
            });
            return {
                one: spanOneArr,
            };
        }