您好,登錄后才能下訂單哦!
今天小編給大家分享一下elementUi表格合并行數(shù)據(jù)并展示序號的方法是什么的相關(guān)知識點,內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
效果如下:屬于同一個廠商的數(shù)據(jù)要合并成一行
element官網(wǎng)對于合并行和列是這樣說的:
通過給
table
傳入span-method
方法可以實現(xiàn)合并行或列,方法的參數(shù)是一個對象,里面包含當(dāng)前行row
、當(dāng)前列column
、當(dāng)前行號rowIndex
、當(dāng)前列號columnIndex
四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組,第一個元素代表rowspan
,第二個元素代表colspan
。 也可以返回一個鍵名為rowspan
和colspan
的對象。
實現(xiàn)合并行思路:需要一個數(shù)據(jù)來記錄需要合并的行數(shù)據(jù)(數(shù)字幾就代表合并幾行,比如 [1, 2, 0, 1]就是第一行第四行不變,第二三行合并成一行),還要有一個變量來記錄數(shù)組下標(biāo)。 注意:后臺返回的數(shù)據(jù)一定要有能區(qū)分唯一性的數(shù)據(jù),來判斷前后兩條數(shù)據(jù)是否一樣。 主要代碼如下:
<base-table :table-data="tableData" :table-title="tableTitle" :span-method="objectSpanMethod" max-height="600px" v-bind="$attrs" > <template slot-scope="scope" slot="serialNo"> {{ scope.row.serialNo }} </template> .... </base-table>
const tableTitle = [ { key: 'serialNo', title: '序號', align: 'center', width: '100', scopedSlots: { customRender: 'serialNo' } }, { key: 'unionList', title: '廠商名稱(編號)', align: 'center', width: '300px', scopedSlots: { customRender: 'unionList' } }, { key: 'unionName', title: 'MQ廠商', tooltip: true, align: 'center' }, ] export default { data() { return { tableTitle, tableData: [], spanArr: [], // 存合并行數(shù)據(jù)的數(shù)組 pos: 0,// 合并行數(shù)據(jù)數(shù)組下標(biāo) rowIndex: 1 // 序號 } }, methods: { getTableData() { this.tableData = [ { accessId: '1', id: 1, mqPassword: '1011', privateKey: '1011', publicKey: '1011', unionList: "[{\"union_name\":\"樂樂\",\"union_id\":\"200160\"}]", unionName: '1011' }, { accessId: '2', id: 2, mqPassword: '1012', privateKey: '1012', publicKey: '1012', unionList: "[{\"union_name\":\"小太陽\",\"union_id\":\"200734\"},{\"union_name\":\"包子\",\"union_id\":\"200737\"}]", unionName: '1012' }, { accessId: '3', id: 3, mqPassword: '1013', privateKey: '1013', publicKey: '1013', unionList: "[{\"union_name\":\"小太陽\",\"union_id\":\"200734\"},{\"union_name\":\"包子\",\"union_id\":\"200737\"}]", unionName: '1013' }, { accessId: '4', id: 4, mqPassword: '1014', privateKey: '1014', publicKey: '1014', unionList: "[{\"union_name\":\"測試\",\"union_id\":\"200160\"}]", unionName: '1014' }, ] this.getSpanArr(this.tableData) // 獲取合并單元格數(shù)據(jù)和序號 }, getSpanArr(data) { // 重新查詢后,要清空行數(shù)據(jù)數(shù)組、序號重置為1 this.spanArr = [] this.rowIndex = 1 // 遍歷數(shù)據(jù),判斷前后兩條數(shù)據(jù)是否相同 for (let i = 0; i < data.length; i++) { data[i].unionList = JSON.parse(data[i].unionList) data[i].unionArr = data[i].unionList.map(i => i.union_id).join(',') if (i === 0) { this.spanArr.push(1) this.pos = 0 data[i].serialNo = this.rowIndex this.rowIndex++ } else { // 判斷當(dāng)前元素與上一元素是否相同 if (data[i].unionArr === data[i - 1].unionArr) { this.spanArr[this.pos] += 1 this.spanArr.push(0) } else { this.spanArr.push(1) this.pos = i data[i].serialNo = this.rowIndex this.rowIndex ++ } } } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并操作和廠商名稱 if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 // rowspan和colspan都為0,則表示這一行不顯示,[x, 1]則表示合并了多少行 return { rowspan: _row, colspan: _col } } }, } }
以上就是“elementUi表格合并行數(shù)據(jù)并展示序號的方法是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。