Ts Elements Vue 合并table表格

/**

?*?合并行方法

?*?@param?{Number}?rowIndex?行索引

?*?@param?{Number}?columnIndex?列索引

?*?@param?{Array}?dataSource?數(shù)據(jù)源

?*?@param?{Array}?mergeCfg?合并配置?例如:[{searchKey:?'score',?columnIndex:?0?}]?searchKey:需檢索的屬性,columnIndex:代表要合并的列數(shù)

?*/

export?function?mergeRows(rowIndex:any,?columnIndex:any,?dataSource:any,?mergeCfg:any)?{

????for?(let?item?of?mergeCfg)?{

????????let?searchKey?=?item.searchKey

????????if?(columnIndex?===?item.columnIndex)?{?//?要合并的列

????????????if?(rowIndex?!==?0?&&?dataSource[rowIndex][searchKey]?===?dataSource[rowIndex?-?1][searchKey])?{?//?非第一行合并規(guī)則

????????????????return?[0,?0]

????????????}?else?{?//?第一行合并規(guī)則

????????????????let?rowIndexCount?=?rowIndex

????????????????let?count?=?0

????????????????while?(rowIndexCount?+?1?<?dataSource.length)?{?//??用當(dāng)前行數(shù)據(jù)跟后續(xù)行數(shù)數(shù)據(jù)對(duì)比

????????????????????if?(dataSource[rowIndexCount?+?1][searchKey]?===?dataSource[rowIndexCount][searchKey])?{

????????????????????????rowIndexCount++

????????????????????????count++

????????????????????}?else?{?//?數(shù)據(jù)不相等跳出循環(huán)

????????????????????????break

????????????????????}

????????????????}

????????????????return?[count?+?1,?1]

????????????}

????????}

????}

}



//調(diào)用

cellMerges(?{row,?column,?rowIndex,?columnIndex}:any){

????????????//?合并行條件

????????????????const?mergeCfg?=??[

????????????????????{?searchKey:?'typeIndex',?columnIndex:?0?},

????????????????????{?searchKey:?'typeIndex',?columnIndex:?1?},

????????????????????{?searchKey:?'typeIndex',?columnIndex:?3?},

????????????????????{?searchKey:?'typeIndex',?columnIndex:?5?}

????????????????]

????????????????return?mergeRows(rowIndex,?columnIndex,?this.dataSource,?mergeCfg)

????????????}

// Element

<el-table?

????????????????????:data="dataSource"?

????????????????????:span-method="cellMerges"

>

</el-table?>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 記錄一下在對(duì)el-tabel進(jìn)行簡(jiǎn)單封裝并實(shí)現(xiàn)行內(nèi)編輯,單元格合并等功能 <el-table id="i...
    me_is_i閱讀 2,413評(píng)論 0 0
  • 1、el-table 上綁定方法:span-method="objectSpanMethod" //表格合并行 o...
    歐小肥OuO閱讀 629評(píng)論 0 0
  • 1、樹與數(shù)組轉(zhuǎn)換對(duì)應(yīng)的目錄如下圖所示: 1、樹與數(shù)組轉(zhuǎn)換 /* * @Author: zhr */ import...
    08f1b6c52d2a閱讀 26,649評(píng)論 8 3
  • 實(shí)現(xiàn)的效果 思路el-table 的有一個(gè)指令span-method 在此屬性上使用方法:span-method...
    戀雪1991閱讀 8,988評(píng)論 1 5
  • 推薦指數(shù): 6.0 書籍主旨關(guān)鍵詞:特權(quán)、焦點(diǎn)、注意力、語言聯(lián)想、情景聯(lián)想 觀點(diǎn): 1.統(tǒng)計(jì)學(xué)現(xiàn)在叫數(shù)據(jù)分析,社會(huì)...
    Jenaral閱讀 6,038評(píng)論 0 5

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