elementUI动态合并单元格无敌详细解释版

基础调用

table传入span-method方法可以实现合并行或列  :span-method="spanMethod"
1

 <el-table
      :data="tableData"
      :span-method="spanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      el-table-column>
       <el-table-column
        prop="name"
        label="姓名"
        width="180">
      el-table-column>
    el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

data(){
	return{
        spanArr:[],
        position:0,
        key:'name'
	}
}
methods:{
   spanMethod({ row, column, rowIndex, columnIndex }) {
   // this.key 定义的要合并哪一列 
   // 如上合并姓名,  data中定义或者直接等于 name
        if(column.property==[this.key]){
          const _row=this.spanArr[rowIndex];
          const _col=_row>0?1:0;
          return {
            rowspan:_row,
            colspan:_col
          }
        }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

获取到数据之后调用
	this.rowspan()
1
2

  rowspan() {
       this.spanArr=[];
       this.position=0;
      // this.data 列表数据
       this.data.forEach((item,index)=>{
         if(index===0){
         // 第一列默认push一个1 然后position位置为0
           this.spanArr.push(1)
           this.position=0;
         }else{
         //除第一列以外就判断 后一个和前一个要合并的值是否相同
           if(this.data[index][this.key]===this.data[index-1][this.key]){			//相同 就给spanArr位置变量position的值+1
             this.spanArr[this.position] +=1;
             //然后往列表中push 0 占位 并且当前位置rowspan值为0 不展示达到合并效果
             this.spanArr.push(0)
           }else{
           //否则就 push 1 证明需要合并的值不想同,无发合并 rowspan值为 1
             this.spanArr.push(1)
             //位置变量再继续 设置为当前列id的值
             this.position=index
           }
         }
       })
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

来个进化版 我想合并单元格但是 需要合并的每个列不相同
1

  rowspan() {
      this.spanArr1=[];
      this.spanArr2=[];
      this.position1=0;
      this.position2=0;
      this.crudData.forEach((item,index)=>{
        // console.log(item,index,'查看数据------')
        if(index===0){
          this.spanArr1.push(1)
          this.spanArr2.push(1)
          this.position1=0;
          this.position2=0;
        }else{
          if(this.crudData[index][this.key]===this.crudData[index-1][this.key]){
            this.spanArr1[this.position1] +=1;
            this.spanArr1.push(0)
          }
          else{
            this.spanArr1.push(1)
            this.position1=index

          }
//这里可以优化判断 
          if(this.crudData[index][this.key2]===this.crudData[index-1][this.key2]){
            this.spanArr2[this.position2] +=1;
            this.spanArr2.push(0)
          }else{
            this.spanArr2.push(1)
            this.position2=index
          }
        }
      })
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if(column.property=='county' ){
        const _row=this.spanArr1[rowIndex];
        const _col=_row>0?1:0;
        return {
          rowspan:_row,
          colspan:_col
        }
      }
      // 这个 || 就是这个age想要和 name 合并一样的列  就加判断就行
      if(column.property == 'name || column.property == 'age' || ){
        const _row=this.spanArr2[rowIndex];
        const _col=_row>0?1:0;
        return {
          rowspan:_row,
          colspan:_col
        }
      }

    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54