vue+elementUI 表格合并单元格

1.效果图如下:
《vue+elementUI 表格合并单元格》
2.原理:
合并单元格,如果id列值一致,则合并
1、getSpanData(data)方法 data就是我们从后台拿到的数据,通常是一个数组;
2、spanArr是一个空的数组,用于存放每一行记录的合并数;
3、pos是spanArr的索引。
如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;
如果不是第一条记录,则判断它与前一条记录是否相等,
如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1,
以此往复,得到所有行的合并数,0即表示该行不显示
3.html代码块

 <el-dialog title="商品" :visible.sync="detailsfalg" width="60%">
      <el-table :data="tableData1"  :span-method="objectSpanMethod"  border style="width: 100%;margin-top:10px;">
            <el-table-column prop="commodityname"  label="商品名称"></el-table-column>
            <el-table-column prop="normal"  label="货品"></el-table-column>
            <el-table-column prop="price"  label="价格"></el-table-column>
            <el-table-column prop="flag"  label="商品状态">
              <template slot-scope="scope">
                <span v-if="scope.row.flag==0">上架</span>
                <span v-if="scope.row.flag==1">下架</span>
              </template>
            </el-table-column>
	        <el-table-column  label="操作" >
	          <template slot-scope="scope">
	            <el-button type="text" size="small" @click="editor1(scope.row.commodityid)" v-if="scope.row.state==1">点看审批</el-button>
	            <el-button type="text" size="small" @click="agree(scope.row.id)" v-if="scope.row.state!=1">同意</el-button>
	          </template>
	        </el-table-column>
      </el-table>
    </el-dialog>
    export default{ 
    	data(){ 
	        return{ 
				detailsfalg:false, //弹框默认关闭
				tableData1:[],//数据源 
			}
        },
        methods:{ 
             //提示:后端返回的数据格式前提是一维数组 
        	objectSpanMethod({  row, column, rowIndex, columnIndex }) { 
		      //根据下标合并商品名称、商品状态、操作列
		      if (columnIndex === 0 || columnIndex==3 || columnIndex === 4) { 
		        const _row = this.spanData[rowIndex]
		        const _col = _row > 0 ? 1 : 0
		        return { 
		          rowspan: _row,
		          colspan: _col
		        }
		      }
		    },
              getSpanData(data) { 
		      // 存放计算好的合并单元格的规则
		      this.spanData = []
		      for (var i = 0; i < data.length; i++) { 
		        if (i === 0) { 
		          this.spanData.push(1)
		          this.pos = 0
		        } else { 
		          // 判断当前元素与上一个元素是否相同
		          if (data[i].id === data[i - 1].id) { 
		            this.spanData[this.pos] += 1
		            this.spanData.push(0)
		          } else { 
		            this.spanData.push(1)
		            this.pos = i
		          }
		        }
		      }
		    },
        	specificationsClick(id){ 
			     this.detailsfalg=true;
			      this.$http({ 
			        url: Api.getgoodsapplyinfos.url + `/${ id}`,
			        method: Api.getgoodsapplyinfos.method
			      }).then(res => { 
			        if (res.status === 200) { 
			          this.tableData1 = res.data.result;
			          this.getSpanData(this.tableData1)
			          this.huopinflag = true // 商品详情显示
			        }
			     })
			}	//截至
        }
    }
    原文作者:Y_余悸
    原文地址: https://blog.csdn.net/Yujis/article/details/116594136
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞