vue ele-table 合并单元格

最新推荐文章于 2024-08-08 09:56:27 发布

liberalhumblehopeful

最新推荐文章于 2024-08-08 09:56:27 发布

阅读量849

点赞数

本文链接：https://blog.csdn.net/fhrlhh/article/details/121795708

版权

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

以下是全部的逻辑代码，页面用的就是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>