vue3使用antdVue 3.x版本使用table組件合并相同的行

  • 目前支持的api是customCell有個render的那個api是不支持的
  • 大致的說下思路:由于customCell這個函數(shù)中會循環(huán)每個列,如:一行3列,有2行,那就是6遍,你要是在這個函數(shù)中每個下標進行判斷就想官網(wǎng)的案例一樣,那么是沒有問題的,但是你要動態(tài)的在這個函數(shù)中寫邏輯的話,會有問題,所以這個方案直接放棄,那么我們在每條數(shù)據(jù)中加一個rowSpan屬性,直接通過index進行獲取不就可以了嗎
  • 怎么讓每條數(shù)據(jù)加一個rowSpan屬性,相同的數(shù)據(jù)第一條數(shù)量++,后面相同的數(shù)量為0呢,看代碼
               let count = 0;
                while (count < res.data.vos.length) {
                    let item = res.data.vos[count];
                    if (!item.rowSpan) {
                        item.rowSpan = 1;
                    }
                    let indexCount = count + 1;
                    //主要看這里,將你要合并的條件變下即可rishType1
                    while (indexCount < res.data.vos.length && item.riskType1 === res.data.vos[indexCount]?.riskType1) {
                        item.rowSpan++;
                        res.data.vos[indexCount].rowSpan = 0;
                        indexCount++;
                    }
                    count = indexCount;
                }
                  data.tableHeader2  = res.data.vos
                 data.columns2[0].customCell = (record, rowIndex, column) => {
                    return {
                        rowSpan: data.tableHeader2[rowIndex].rowSpan,//這樣就OK啦
                    };
                };
  • 在彈框中使用from表單的校驗,再次點擊彈框,之前的校驗失敗還在,可以使用彈框的屬性,每次關(guān)閉銷毀數(shù)據(jù),或者調(diào)用from中的clearValidate清空校驗的方法,不能調(diào)用重置方法(因為當前數(shù)據(jù)回顯會重置為上次的數(shù)據(jù)),不過這個方法要加一個nextTick
  • 希望可以幫助到你
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容