ElementUI中el-table合并1列单元格

使用 Vue 的 el-table 合并单元格显示混乱列表数据

最新推荐文章于 2025-09-19 15:18:44 发布

原创最新推荐文章于 2025-09-19 15:18:44 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #vue

Vue 专栏收录该内容

5 篇文章

订阅专栏

该博客展示了如何利用 Vue 的 el-table 组件通过 span-method 属性来合并行单元格，从而整理混乱的数据列表。文章提供了一个具体的例子，数据包括多个学生的姓名、课程和分数，并提供了相应的 Vue 模板代码和数据处理方法，包括数据重置和获取合并行数的函数，以实现行合并效果。

1 功能说明

使用el-table中的span-method属性实现将混乱的列表数据合并行单元格显示。数据列表如下：

 [{ name:'张三', course:'英语', score:'90' },
 { name:'李四', course:'数学', score:'50' },
 { name:'王五', course:'语文', score:'90' },
 { name:'张三', course:'政治', score:'30' },
 { name:'李四', course:'英语', score:'80' }]

2 截图

3 源代码

<template>
  <div class="combine_cell">
    <div class="cc_con">
      <el-table
        v-bind:data="dataArr"
        v-bind:span-method="rowSpanMethod">
        <el-table-column prop='name' label='姓名'></el-table-column>
        <el-table-column prop='course' label='课程'></el-table-column>
        <el-table-column prop='score' label='成绩'></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: 'CombineCell',

  data(){
    return{
      dataArr: new Array(),
      rowSpanArr: new Array()
    }
  },

  created(){
    this.dataArr = [
      { name:'张三', course:'英语', score:'90' },
      { name:'李四', course:'数学', score:'50' },
      { name:'王五', course:'语文', score:'90' },
      { name:'张三', course:'政治', score:'30' },

      { name:'李四', course:'英语', score:'80' },
      { name:'王五', course:'数学', score:'90' },
      { name:'张三', course:'语文', score:'70' },
      { name:'李四', course:'政治', score:'60' },
      
      { name:'王五', course:'英语', score:'70' },
      { name:'李四', course:'数学', score:'80' },
      { name:'张三', course:'语文', score:'90' },
      { name:'王五', course:'政治', score:'40' }

    ];

    this.dataArr = this.resetDataArr(this.dataArr, 'name');

    this.rowSpanArr = this.getRowSpanArr(this.dataArr, 'name');
  },

  methods:{

    // 重置数据， tempAttr是合并的那一列的属性名
    resetDataArr: function(tempDataArr, tempAttr){
      let newDataArr = new Array();

      tempDataArr.forEach(originItem => {
        let i=0;
        for(i=0; i<newDataArr.length; i++){
          if(originItem[tempAttr] === newDataArr[i][tempAttr]){
            newDataArr.splice(i, 0, originItem);
            break;
          }
        }
        if(i===newDataArr.length){
          newDataArr.push(originItem);
        }
      });

      return newDataArr;
    },

    // 设置合并的列
    rowSpanMethod: function(param){
      if(this.rowSpanArr.length === 0){
        return;
      }
      if(param.columnIndex === 0){
        const row = this.rowSpanArr[param.rowIndex];
        const col = row>0?1:0;
        return{
          rowspan:row,
          colspan:col
        }
      }
    },

    // 获得合并列的空行数
    getRowSpanArr: function(tempDataArr, tempAttr){      
      let tempRowSpanArr = new Array();
      let startIndex = 0;
      
      if(tempDataArr.length>1){
        tempRowSpanArr.push(1);
      }else{
        return tempRowSpanArr;
      }

      for(let i=1; i<tempDataArr.length; i++){
        if(tempDataArr[i][tempAttr] == tempDataArr[i-1][tempAttr]){
          tempRowSpanArr.push(0);
          tempRowSpanArr[startIndex] = tempRowSpanArr[startIndex] + 1;
        }else{
          tempRowSpanArr.push(1);
          startIndex = i;
        }
      }

      return tempRowSpanArr;
    }
  }

}
</script>

<style scoped>

</style>