element-ui 表格合并

<template>
  <div class="">
    <el-table
        :data="listData"
        :span-method="objectSpanMethod"
        class="tableArea"
        style=" 100%">
        <el-table-column
          prop="type"
          label="序号"
          align="center"
          width="200"/>
        <el-table-column
          prop="sheetType"
          label="工单类型"
          />
        <el-table-column
          prop="taskKey"
          label="taskKey"
          />
        <el-table-column
          prop="templateUrl"
          label="templateUrl"
          />
        <el-table-column
          label="操作"
          >
          <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                      <i class="el-icon-edit-outline"  @click="modify(scope)" />
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <i class="el-icon-delete" @click="deleteData(scope)" />
                    </el-tooltip>
          </template>
        </el-table-column >
      </el-table>
  </div>
</template>
<script>
 
export default {
  name: 'myNeedDeal',
  data() {
    return {
      rowList: [],
      spanArr: [],
      position: 0,
      listData: []
    }
  },
 
  methods: {
      queryData(){//查询操作
          this.listData = [
              {
            id:1,
          type:1,
          sheetType: "事件单",
          taskKey: "shijian_01",
          templateUrl: "/shijian_01"
        },
        {
            id:2,
          type:1,
          sheetType: "事件单",
          taskKey: "shijian_02",
          templateUrl: "/shijian_02"
        },
        {
            id:3,
          type:1,
          sheetType: "事件单",
          taskKey: "shijian_03",
          templateUrl: "/shijian_04"
        },
        {
            id:4,
          type:2,
          sheetType: "问题单",
          taskKey: "wenti_01",
          templateUrl: "/wenti_01"
        },
        {
            id:5,
          type:2,
          sheetType: "问题单",
          taskKey: "wenti_02",
          templateUrl: "/wenti_02"
        },
        {
            id:6,
          type:2,
          sheetType: "问题单",
          taskKey: "wenti_03",
          templateUrl: "/wenti_03"
        }
          ];
          this.rowspan()
      },
      rowspan() {
          this.listData.forEach((item,index) => {
            if( index === 0){
                this.spanArr.push(1);
                this.position = 0;
            }else{
                if(this.listData[index].type === this.listData[index-1].type ){
                    this.spanArr[this.position] += 1;
                    this.spanArr.push(0);
                }else{
                    this.spanArr.push(1);
                    this.position = index;
                }
            }
        })
      },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
        if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row>0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col
            }
        }
        if(columnIndex === 1){
            const _row = this.spanArr[rowIndex];
            const _col = _row>0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col
            }
        }
    }
  },
  mounted() {
    this.queryData();
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  margin-right: 15px;
}
.el-input {
  margin-right: 15px;
   200px;
}
.tableArea {
  margin-top: 20px;
  box-shadow: 0 0 8px 0 #aaa;
}
i[class^="el-icon"] {
  margin-right: 5px;
  font-size: 16px;
  cursor: pointer;
}
.modify_table{
    td{
        padding: 10px ;
    }
}
.item_title{
    text-align: right;    
}
</style>
 

详细说明：

:span-method="objectSpanMethod"  

这个是官方给定的绑定属性和对应的方法，objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }

row: 当前行

column: 当前列

rowIndex：当前行号

columnIndex ：当前列号

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

this.spanArr 数组 ，返回的是相对应的行合并行数

这个示例打印出的this.spanArr为 [3, 0, 0, 3, 0, 0]，比如，第一个元素为3，表示第一行应该向下合并3行（即第一行的rowspan为3），第二个元素的rowspan为0，就让它“消失”。

rowspan（）这个函数就是用来返回 this.spanArr 数组的，定义每一行的 rowspan

rowspan（）函数，if( index === 0)，第一行，直接先给数组push进一个1，表示自己先占一行，this.position是数组元素的位置（此时是从数组元素的第一个开始，所以this.position为0）， this.position为0意思表示的就是数组的第一个元素。

当到了index为2的时候，if(this.listData[index].type === this.listData[index-1].type )，让第二行与第一行作比较，

如果第二行与第一行相等的话，this.position就+1，当有n行第一行相同，this.position就为n，表示向下合并n行；第二行自己就this.spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了啊。

如果第二行与第一行不相等的话，那么this.spanArr.push(1);就让第二行自己独占一行；this.position = index意思就是把指针拿到index这行来，表示设置数组this.spanArr[this.position]的元素值，然后定义从此行开始向下合并几行（可能这句话我表述的不是很清楚你可以根据我这个示例研究下，当index为3时，this.position为3，当index为4时，第四行与第三行需要合并，那么在数组的this.position元素就要+1了，也就是this.spanArr[this.position] += 1）

还有最后一句话

const _col = _row>0 ? 1 : 0;

定义的这一个单元格列的合并，我们项目只合并行，不合并列；

_row：代表合并行的行数，_row的值要么是1，或者更大的自然正整数，要么是0。

1代表：独占一行

更大的自然数：代表合并了若干行

0：代表“消失”的哪那一个单元格，后面的单元格向前推一格

————————————————

版权声明：本文为CSDN博主「兰亭古墨」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/hefeng6500/article/details/82778680

<template>  <div class="">    <el-table        :data="listData"        :span-method="objectSpanMethod"        class="tableArea"        style=" 100%">        <el-table-column          prop="type"          label="序号"          align="center"          width="200"/>        <el-table-column          prop="sheetType"          label="工单类型"          />        <el-table-column          prop="taskKey"          label="taskKey"          />        <el-table-column          prop="templateUrl"          label="templateUrl"          />        <el-table-column          label="操作"          >          <template slot-scope="scope">          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">      <i class="el-icon-edit-outline"  @click="modify(scope)" />    </el-tooltip>    <el-tooltip class="item" effect="dark" content="删除" placement="top-start">            <i class="el-icon-delete" @click="deleteData(scope)" />    </el-tooltip>          </template>        </el-table-column >      </el-table>  </div></template><script> export default {  name: 'myNeedDeal',  data() {    return {      rowList: [],      spanArr: [],      position: 0,      listData: []    }  },   methods: {  queryData(){//查询操作  this.listData = [  {        id:1,          type:1,          sheetType: "事件单",          taskKey: "shijian_01",          templateUrl: "/shijian_01"        },        {        id:2,          type:1,          sheetType: "事件单",          taskKey: "shijian_02",          templateUrl: "/shijian_02"        },        {        id:3,          type:1,          sheetType: "事件单",          taskKey: "shijian_03",          templateUrl: "/shijian_04"        },        {        id:4,          type:2,          sheetType: "问题单",          taskKey: "wenti_01",          templateUrl: "/wenti_01"        },        {        id:5,          type:2,          sheetType: "问题单",          taskKey: "wenti_02",          templateUrl: "/wenti_02"        },        {        id:6,          type:2,          sheetType: "问题单",          taskKey: "wenti_03",          templateUrl: "/wenti_03"        }  ];  this.rowspan()  },  rowspan() {  this.listData.forEach((item,index) => {    if( index === 0){    this.spanArr.push(1);    this.position = 0;    }else{    if(this.listData[index].type === this.listData[index-1].type ){    this.spanArr[this.position] += 1;    this.spanArr.push(0);    }else{    this.spanArr.push(1);    this.position = index;    }    }    })  },    objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行    if (columnIndex === 0) {    const _row = this.spanArr[rowIndex];    const _col = _row>0 ? 1 : 0;    return {    rowspan: _row,    colspan: _col    }    }    if(columnIndex === 1){    const _row = this.spanArr[rowIndex];    const _col = _row>0 ? 1 : 0;    return {    rowspan: _row,    colspan: _col    }    }    }  },  mounted() {    this.queryData();  }}</script><style lang="scss" scoped>.el-select {  margin-right: 15px;}.el-input {  margin-right: 15px;  200px;}.tableArea {  margin-top: 20px;  box-shadow: 0 0 8px 0 #aaa;}i[class^="el-icon"] {  margin-right: 5px;  font-size: 16px;  cursor: pointer;}.modify_table{td{padding: 10px ;}}.item_title{text-align: right;}</style>