a-table表格合并

插槽

    //插槽
    <template slot="status" slot-scope="key, record, index, column">  </template>
//表头中
 {
                 key:"projectStatus",
              dataIndex:"projectStatus",
                  title: "状态",
                  width: 70,
                  align: "center",
                  scopedSlots: { customRender: "status" },
                },
                
    

合并表头

//要合并的列
   {
              key: "performanOne",
              dataIndex: "performOne",
              title: "指标",
              width: 60,
              fixed: true,
              align: "left",
              colSpan: 2,//合并两列,下一列设置为0
              }
              
              

合并表格

  {
              key: "performanOne",
              dataIndex: "performanOne",
              title: "指标",
              width: 60,
              fixed: true,
              align: "left",
              colSpan: 2,
              customRender: (value, key, index) => {
                const obj = {
                  children: value,
                  attrs: {
                    colSpan: this.colSpanC[index],//合并列数组,1不合并
                    rowSpan: this.spanArrC[index],//合并行数组
                  },
                };
                return obj;
              },
            },

// arr.reduce计算合并数组
  getSpanC(arr) {
      let pos2 = 0;
      this.spanArrC = [];
      this.colSpanC = [];
      let pos1 = 0;
      let arr1=arr//表格数组
      arr.reduce((old, cur, i) => {
        // old 上一个元素  cur 当前元素  i 索引
        if (i === 0) {
          // 第一次判断先增加一个 1 占位 ,索引为0
          arr[i].index=1
          this.spanArrC.push(1);
          pos2 = 0;
          if (cur.performanOne && cur.performanTwo == null) {//列相同
            this.colSpanC.push(2);
          } else {
            this.colSpanC.push(1);
          }
        } else {
          if (cur.performanOne == old.performanOne) {//相同项
            
            this.spanArrC[pos2] += 1;
             arr[i].index=arr[i-1].index
            this.spanArrC.push(0);
          } else {
             arr[i].index=arr[i-1].index+1
            this.spanArrC.push(1);
            pos2 = i;
          }
          if (cur.performanOne && cur.performanTwo == null) {
            this.colSpanC.push(2);
          } else {
            this.colSpanC.push(1);
          }
        }
        return cur;
      }, {});
          this.tableDataC=arr
    },
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐