vue+element table 合並單元格(根據相同id)


            getData() {
                // 先給所有的數據都加一個v.rowspan = 1
                this_.yulanList.forEach((item) => {
                    item.rowspan = 1;
                });
                // 雙層循環
                for (let i = 0; i < this_.yulanList.length; i++) {
                    // 內層循環,上面已經給所有的行都加了item.rowspan = 1
                    // 這里進行判斷
                    // 如果當前行的CCOITEM_ID和下一行的CCOITEM_ID相等
                    // 就把當前item.rowspan + 1
                    // 下一行的item.rowspan - 1
                    for (let j = i + 1; j < this_.yulanList.length; j++) {
                        //此處可根據相同字段進行合並,此處是根據的id
                        if (this_.yulanList[i].CCOITEM_ID === this_.yulanList[j].CCOITEM_ID) {
                            this_.yulanList[i].rowspan++;
                            this_.yulanList[j].rowspan--;
                        }
                    }
                    // 這里跳過已經重復的數據
                    i = i + this_.yulanList[i].rowspan - 1;
                }
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                //第一列
                if (columnIndex === 0) {
                    return {
                        rowspan: row.rowspan,
                        colspan: 1,
                    };
                }
            },
 <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
</el-table>

官方文檔:https://element.eleme.cn/#/zh-CN/component/table

   

 

 

 

 span-method

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM