elementui——表格的相同内容单元格合并

2024-01-09 21:56:58

在今天工作中遇到了相同单元格需要合并的一个需求，实现记录如下。

实现效果：

任务要求：

对表中体系这一列相同的体系进行合并。

思路:
定义一个空数组：[]
定义一个变量：0
遍历数据如果有相同数据在空数组添加一个0(相同数据的起始位加1)，不相同在数据push 一个1（变量改成当前索引）

Table部分代码:

 <el-table ref="TaskListDistributionDetailTable" border :data="value.dataList" class="materialInfoTable clear-input-v" :span-method="objectSpanMethod">
                            <el-table-column type="index" align="center" label="序号" width="60">
                                <template slot-scope="scope">
                                    {{scope.$index+1}}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="体系" min-width="120">
                                <template slot-scope="scope">  
                                    <span>{{scope.row.systemTypeName}}</span>
                                </template>
                            </el-table-column> 
                            <el-table-column align="center" label="部门" min-width="120">
                                <template slot-scope="scope">  
                                    <span>{{scope.row.deptName}}</span>
                                </template>
                            </el-table-column> 
                            <el-table-column align="left" label="年度考核得分" min-width="100">
                                <template slot-scope="scope">  
                                    <span>{{scope.row.assessmentScore}}</span>     
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="考核排名" min-width="100">
                                <template slot-scope="scope"> 
                                    <span>{{scope.row.assessmentRank}}</span>    
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="扣分原因" min-width="300">
                                <template slot-scope="scope"> 
                                    <span>{{scope.row.deductionReason}}</span>      
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="备注" min-width="300">
                                <template slot-scope="scope"> 
                                    <span>{{scope.row.remark}}</span>      
                                </template>
                            </el-table-column>  
                        </el-table>

View Code

Data部分代码：

  data: function () {
            return { 
                spanArr:[], 
            };
        },

Methods部分代码：

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 1) {
                  if(this.spanArr[rowIndex]){
                      return {
                          rowspan:this.spanArr[rowIndex],
                          colspan:1
                      }
                  }else{
                      return {
                          rowspan: 0,
                          colspan: 0
                      }
                  }
              }
          },
          flitterData:function () { 
                    let contactDot = 0;
                    let spanArr = [];
                    $this.value.dataList.forEach((item, index) => {
                        if (index === 0) { 
                            spanArr.push(1)
                        } else {
//注释：systemTypeName  是对应体系,value.dataList 对应table绑定的数据源
                               if (item.systemTypeName === this.value.dataList[index - 1].systemTypeName) {

                                spanArr[contactDot] += 1;
                                spanArr.push(0)
                            } else {
                                contactDot = index
                                spanArr.push(1)
                            }
                        }
                    })
                    this.spanArr = spanArr;
          },

在合适的地方调用 flitterData方法即可，我在项目中是获取数据源之后调用的

参考写法，方式调用与原文不同

elementui——表格的相同内容单元格合并

原文：https://www.cnblogs.com/wofeiliangren/p/14993493.html

码农公寓

相关文章