vue+elementUI 表格合并单元格

1.效果图如下:

2.原理：
合并单元格，如果id列值一致，则合并
1、getSpanData(data)方法 data就是我们从后台拿到的数据，通常是一个数组；
2、spanArr是一个空的数组，用于存放每一行记录的合并数；
3、pos是spanArr的索引。
如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；
如果不是第一条记录，则判断它与前一条记录是否相等，
如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１，
以此往复，得到所有行的合并数，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 // 商品详情显示
			        }
			     })
			}	//截至
        }
    }