vue ele-table 合并单元格

先上代码,然后一行一行的讲解

以下是全部的逻辑代码,页面用的就是element组件,代码在最下面

每一条都做了解释,有疑惑可以留言~

//tableData是一个多维数组,里面包含products数组,我们的表格是订单-商品关系;tableData是全部的订单,里面每一条[ ]代表一条订单,每一条里都包含了一个products数组代表订单对应的商品,当商品为多条时,相同的数据就要合并展示
data() {
    return {
      tableRowData: [], //用于存放每一行记录的合并数
    };
  },
  watch:{
    tableData(){
       console.log("tabelData",this.$props.tableData)
       //这里的数据是组件传值拿到的,没封装组件正常调接口拿就行
      this.loadRowData();
    }
  },
  loadRowData() {
      this.tableRowData = [];
      let originArr = JSON.parse(JSON.stringify(this.tableData));
    //   console.log("originArr",originArr)
      // 普通的数据转换,将后台格式转换成element表格需要的格式
      if (Array.isArray(originArr)) {
        originArr.map((res) => {
            console.log("map之后的",res)
          if (Array.isArray(res.products)) {
            res.products.map((subRes, subIndex) => {
                // console.log("products",subRes)
                //下面的一些操作是为了把products里的数据穿透到外层
                //跟合并没关系,主要是为了数据展示
              let content = {};
              content = subRes;
              content.orderFormid = res.orderFormid;
              content.number = res.number;
              content.createTime = res.createTime
              content.buyerName = res.buyerName
              content.state = res.state
              content.orderPrice = res.orderPrice
              if (subIndex == 0) { 
                //   console.log("**",res.products.length)
                content.rowNum = res.products.length;
              }
              this.tableRowData=[...this.tableRowData,content];
            //   console.log("/*-",this.tableRowData)
            });
          }
        });
      }
      
     
    },
    //合并的重点在这里
    mergeRowMethod({ row, columnIndex }) {
        // console.log("columnIndex",columnIndex);
        //下面的[ ]里面的数字,是需要合并的列下标
      if ([0,1,6,7,8,9,10].indexOf(columnIndex)!==-1 ) {
        return {
          rowspan: row.rowNum, // 待合并行数 -- 合并的行数长度就等于之前赋值的子数据的长度;未赋值的即表示0,不显示
          colspan: row.rowNum > 0 ? 1 : 0, // 待合并列数 -- 合并的列数自身占一列,被合并的要返回0,表示不显示
        };
      }
    },

页面代码在此

<el-table :data="tableRowData" :span-method="mergeRowMethod">
    <el-table-column align="center" type="index" label="序号" width="80"/>
    .
    .
    .
</el-table>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值