詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回)
之前寫了一些關(guān)于element-ui表格合并的方法,不過用的數(shù)據(jù)都是確定的數(shù)據(jù)(死數(shù)據(jù)),但是很多時(shí)候我們的數(shù)據(jù)都是通過后臺(tái)獲得的,數(shù)據(jù)不穩(wěn)定,這個(gè)時(shí)候使用表格合并就需要先處理一下數(shù)據(jù),先看一下一種很常見的數(shù)據(jù)展示場(chǎng)景
直接上代碼,HTML代碼就不放了,都是差不多的,下面另一種場(chǎng)景有
// 模擬后臺(tái)返回的值 getTable () { this.tableData = [{ id: 1, region: '中國', type: [{ sortName: '器械', sortList: [{ name: '器械1' }, { name: '器械2' }] }, { sortName: '軟件', sortList: [{ name: '軟件1' }, { name: '軟件2' }, { name: '軟件3' }] }] }, { id: 2, region: '美國', type: [{ sortName: '器械', sortList: [{ name: '器械1' }, { name: '器械2' }] }, { sortName: '軟件', sortList: [{ name: '軟件1' }, { name: '軟件2' }] }] }] this.dealTable() }, // 處理表格數(shù)據(jù) dealTable () { let getDate = [] // 存儲(chǔ)新表格數(shù)據(jù) let typeIndex = [0] // 保存id,地區(qū)需要合并的值 let nameIndex = [0] // 保存類型需要合并的值 let a // id,地區(qū)需要合并的行是所有類型的長(zhǎng)度 this.tableData.forEach((v, index) => { if (v.type && v.type.length) { a = 0 v.type.forEach((subV, i, typeData) => { if (subV.sortList && subV.sortList.length) { subV.sortList.forEach((ss, k, data) => { if (k === data.length - 1) { typeIndex.push(data.length) // 把每一個(gè)類型下面數(shù)據(jù)長(zhǎng)度存起來 a += data.length // 把所有類型下面的數(shù)據(jù)長(zhǎng)度相加 if (i === typeData.length - 1) { nameIndex.push(a) // 類型循環(huán)完成后把數(shù)據(jù)長(zhǎng)度存起來 } } getDate.push({ id: v.id, region: v.region, type: subV.sortName, name: ss.name }) }) } }) } }) console.log(nameIndex) // [0, 5, 4] // 看一下打印出來的規(guī)律,除去第一項(xiàng),5是第一次需要合并的行 // 第二次合并又是從第五行開始合并4行 console.log(typeIndex) // [0, 2, 3, 2, 2] // 類型的數(shù)據(jù)存儲(chǔ)規(guī)律也是一樣,第一次合并2行 // 第二次從2行開始,合并3行,以此類推 // 根據(jù)這個(gè)規(guī)則,只需要給數(shù)據(jù)加上兩個(gè)額外的屬性控制是否合并就OK let k = 0 let t = 0 nameIndex.forEach((v, i, nameArr) => { if (nameArr[i + 1]) { getDate[k].nameIndex = nameArr[i + 1] k += nameArr[i + 1] } }) typeIndex.forEach((v, i, typeArr) => { if (typeArr[i + 1]) { getDate[t].typeIndex = typeArr[i + 1] t += typeArr[i + 1] } }) this.tableData6 = getDate console.log(getDate) // 0: {id: 1, name: "器械1", nameIndex: 5, region: "中國", type: "器械", typeIndex: 2}, // 1: {id: 1, name: "器械2", region: "中國", type: "器械"} // .... // 5: {id: 2, name: "器械1", nameIndex: 4, region: "美國", type: "器械", typeIndex: 2} }, // 表格合并方法 arraySpanMethod ({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || columnIndex === 1) { if (row.nameIndex) { // 如果有值,說明需要合并 return [row.nameIndex, 1] } else return [0, 0] } if (columnIndex === 2) { if (row.typeIndex) { return [row.typeIndex, 1] } else return [0, 0] } },
再說一下另一種場(chǎng)景,用的另一種方法實(shí)現(xiàn),原理都是大同小異
假設(shè)后臺(tái)返回的數(shù)據(jù)是這樣的:
在這種情況下,一般我們會(huì)選擇對(duì)行進(jìn)行合并,因?yàn)檫@時(shí)候表格的列是知道的,只要把需要合并的列提取出來,合并行就OK,下面看代碼
<el-table :data="tableData6" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-table-column prop="region" label="深圳"> </el-table-column> <el-table-column prop="type" label="類型"> </el-table-column> <el-table-column prop="company" label="企業(yè)名稱"> </el-table-column> </el-table>
js代碼,首先需要處理一下后臺(tái)數(shù)據(jù)
getIndex () { let arr = [] let s = 0 let table = this.tableData6 let getTable = [] table.forEach((item, i, data) => { if (arr.length) { s = arr[arr.length - 1].row + data[i - 1].company.length } arr.push({ row: s, index: item.company.length }) if (item.company && item.company.length) { item.company.forEach(subItem => { getTable.push({ id: item.id, region: item.region, type: item.type, company: subItem.name }) }) } }) this.arr = arr this.tableData6 = getTable },
數(shù)據(jù)處理之后就進(jìn)行表格合并
// 合并表格方法 arraySpanMethod ({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { let obj = [0, 0] this.arr.some(v => { if (rowIndex === v.row) { obj = [v.index, 1] } }) return obj } }
PS: 在這里說一下樓主遇到的一個(gè)坑,其實(shí)也是因?yàn)閷?duì)函數(shù)的return不熟悉造成的,一開始我是這樣寫的,
結(jié)果頁面一直不對(duì),debugger了一下,發(fā)現(xiàn)函數(shù)中根本沒接收到return回去的數(shù)據(jù),這是因?yàn)槲襯eturn之后又寫了代碼,函數(shù)真正結(jié)束時(shí)沒有返回值.所以在函數(shù)中,return之后就不要在寫執(zhí)行代碼了.
正確的寫法后debugger就能接收到正確的返回值了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決Element中el-date-picker組件不回填的情況
這篇文章主要介紹了解決Element中el-date-picker組件不回填的情況,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue3中事件總線mitt代碼實(shí)例(第三方庫mitt)
這篇文章主要給大家介紹了關(guān)于vue3中事件總線mitt(第三方庫mitt)的相關(guān)資料,Mitt是一個(gè)在Vue.js應(yīng)用程序中使用的小型事件總線庫,該庫允許組件進(jìn)行通信,而不必過度依賴父級(jí)或子級(jí)組件之間的props,需要的朋友可以參考下2023-09-09vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
這篇文章主要介紹了vue router下的html5 history在iis服務(wù)器上的設(shè)置方法,需要的朋友參考下吧2017-10-10Vue項(xiàng)目自動(dòng)轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue項(xiàng)目自動(dòng)轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法,本文是通過一系列的配置后,轉(zhuǎn)換成熱門,具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2018-10-10Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑
這篇文章主要介紹了Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue實(shí)現(xiàn)指定區(qū)域自由拖拽、打印功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定區(qū)域自由拖拽、打印功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue通過for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例
今天小編就為大家分享一篇Vue通過for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11