ant design vue中table動態合並列

 

需求：查看詳情中的表格模板，第一列需要合並。

<!-- 表格 -->
  <a-table
     :columns="columns2"
     :data-source="form1.prePlanProjectAppends"
     bordered
     rowKey=""
     style="margin-top: 20px"
    :scroll="{ y: 500 }"
    :pagination="false">
  </a-table>

　　

data() {
     return {
         columnsgcsljbxx: [
               {
                  title: "實體工程",
                  width: '150px',
                  dataIndex: "columnOne",
                  align: 'center',
                  sorter: (a, b) => {
                    return a.columnOne.localeCompare(b.columnOne);
                  },
                  customRender:(text, row, index)=>{
                   return {
                      children: <span>{text}</span>,
                      attrs: {
                         rowSpan: row.spans[0],//需要合並的數據
                       }
                    }
                  }
              },
             {
                title: "項目",
                width: '250px',
                dataIndex: "columnTwo",
                align: 'center'
            },
            {
                title: "量",
                dataIndex: "columnThree",
                align: 'center',
                scopedSlots: { customRender: "columnThree" },
            }
          ]
     }
}
        

　　

methods: {
     //合並第一列
     handleTableColumnSpanMethod(projectQuantities) {
         const uniqueKey = [];
         //遍歷源數據，columnOne是第一列的名字，找到第一列從當前開始合並
         projectQuantities.forEach(item => {
            if (uniqueKey.some(keyItem => keyItem === item.columnOne)) {
               item.spans = [0,1]
               return
            }
            const projectQuantitiesFilterList =  projectQuantities.filter(projectItem => item.columnOne === projectItem.columnOne)
            const projectLength = projectQuantitiesFilterList.length
              item.spans = [projectLength,1]
              uniqueKey.push(item.columnOne)
            })
            return projectQuantities
         }
}

　　回顯的表格調用合並列方法

init(mode, data) {
     this.form1.prePlanProjectAppends = this.handleTableColumnSpanMethod(data.prePlanProjectAppends);
     this.visible = true;
}