您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue中怎么合并el-table第一列相同數(shù)據(jù)”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“Vue中怎么合并el-table第一列相同數(shù)據(jù)”文章能幫助大家解決問題。
需要將el-table表格第一列相同的內(nèi)容進(jìn)行合并。
el-table中使用 :span-method="objectSpanMethod"方法
vue標(biāo)簽
<el-table :data="contractList" border :span-method="objectSpanMethod"> <el-table-column label="各部門部1月-12月合同回款情況" align="center"> <el-table-column prop="quarterly" width="100" align="center" /> <el-table-column prop="mon" width="80" align="center" /> <el-table-column prop="amountReceived" width="180" align="center" /> <el-table-column prop="remark" width="180" align="center" /> </el-table-column> </el-table>
methods內(nèi)部處理
/* 表格合并列和行 */ objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.flitterData(this.contractList).one[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } }, /**合并表格的第一列,處理表格數(shù)據(jù) */ flitterData(arr) { let spanOneArr = []; let concatOne = 0; arr.forEach((item, index) => { if (index === 0) { spanOneArr.push(1); } else { //注意這里的quarterly是表格綁定的字段,根據(jù)自己的需求來改 if (item.quarterly === arr[index - 1].quarterly) { //第一列需合并相同內(nèi)容的判斷條件 spanOneArr[concatOne] += 1; spanOneArr.push(0); } else { spanOneArr.push(1); concatOne = index; } } }); return { one: spanOneArr, }; },
項(xiàng)目需求table表格中,相同的類型合并成一個(gè)單元格展示。
el-table
并沒有相關(guān)的語法直接合并,需要我們自己傳入一個(gè)方法返回一個(gè)數(shù)組格式,來確定要合并行列。
首先需要在 el-table
標(biāo)簽上綁定:span-method="objectSpanMethod"
<el-table :data="tableData" :span-method="objectSpanMethod" > <el-table-column prop="projectName" label="訂單類型" /> </el-table>
再去methods
中定義 objectSpanMethod
方法,data
中定義一個(gè)rowSpanArr
參數(shù)
// 獲取相同名稱的個(gè)數(shù) tableData: 表格的數(shù)據(jù), projectName: 確定相同的參數(shù) handleTableData(tableData){ let rowSpanArr = [], position = 0; for (let [index, item] of tableData.entries()) { if (index == 0) { rowSpanArr.push(1); position = 0; } else { if (item.projectName == tableData[index - 1].projectName) { rowSpanArr[position] += 1; //項(xiàng)目名稱相同,合并到同一個(gè)數(shù)組中 rowSpanArr.push(0); } else { rowSpanArr.push(1); position = index; } } } this.rowSpanArr = rowSpanArr } // 單元格的處理方法 當(dāng)前行row、當(dāng)前列column、當(dāng)前行號(hào)rowIndex、當(dāng)前列號(hào)columnIndex objectSpanMethod({ row, column, rowIndex, columnIndex }){ if (columnIndex === 0) { const rowSpan = this.rowSpanArr[rowIndex]; return { rowspan: rowSpan, //行 colspan: 1 //列 }; } }
objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 判斷是不是第一列,只有第一列才執(zhí)行合并 if (rowIndex % 2 === 0) { // 判斷能不能被2整除 return { rowspan: 2, // 從當(dāng)前單元格開始,執(zhí)行合并2行 colspan: 1, // 從當(dāng)前單元格開始,執(zhí)行合并1列 }; } else { return { // 第一列的其他元素不執(zhí)行合并 rowspan: 0, // 為0,不執(zhí)行合并 colspan: 0 // 為0,不執(zhí)行合并 }; } } }
關(guān)于“Vue中怎么合并el-table第一列相同數(shù)據(jù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。