vue+elementUI 表格合并单元格

1.效果图如下:
在这里插入图片描述
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 // 商品详情显示
			        }
			     })
			}	//截至
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值