vue?element?ui表格相同數(shù)據(jù)合并單元格效果實(shí)例
更新時(shí)間：2023年11月22日 10:04:47 作者：弈425
工作中遇到需要根據(jù)單元格某個(gè)屬性合并,特此記錄下,下面這篇文章主要給大家介紹了關(guān)于vue?element?ui表格相同數(shù)據(jù)合并單元格效果的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
先看效果
前提是你的數(shù)據(jù)是扁平的數(shù)據(jù)因?yàn)橐鶕?jù)上下數(shù)據(jù)是否一樣才合并的 如果是子級(jí)數(shù)據(jù)需要改一下數(shù)據(jù)格式了
下面是數(shù)據(jù)的樣式
tableData: [{
id: '1',
name: '王小虎',
amount1: '165',
amount2: '3.2',
amount3: 10
}, {
id: '1',
name: '王小虎',
amount1: '162',
amount2: '4.43',
amount3: 12
}, {
id: '1',
name: '王we虎',
amount1: '621',
amount2: '1.9',
amount3: 9
}, {
id: '2',
name: '王we虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '3',
name: '王小虎',
amount1: '621',
amount2: '4.1',
amount3: 15
}],合并單元格的重點(diǎn)屬性就是 :summary-method="" 這個(gè)是關(guān)鍵
<el-table ref="tableRef" show-summary :summary-method="getSummaries" :span-method="handleSpanMethod" :data="listData" border style="width: 100%; margin-top: 5px">
<el-table-column label="No." type="index" align="center" width="50"></el-table-column>
<el-table-column prop="checkResult" label="Check result"> </el-table-column>
<el-table-column prop="standardChineseName" label="Standard chinese name"> </el-table-column>
<el-table-column prop="ingredientInciCtfaName" label="Ingredient INCI(CTFA) name"> </el-table-column>
<el-table-column prop="RMInFormula" label="RM in formula(%)"> </el-table-column>
<el-table-column prop="ingredientInRM" label="Ingredient in RM(%)"> </el-table-column>
<el-table-column prop="ingredientInFormula" label="Ingredient in formula(%)"> </el-table-column>
<el-table-column prop="purposeOfUse" label="Purpose of use"> </el-table-column>
<el-table-column prop="templateUrl5" label="New RM" align="center" width="100"> </el-table-column>
</el-table>data() {
return {
listData: [],
// 合并單元格
column1Arr: [], // column1
column1Index: 0, // column1索引
column2Arr: [], // column2
column2Index: 0, // column2索引
column3Arr: [], // column3
column3Index: 0, // column3索引
column4Arr: [], // column4
column4Index: 0, // column4索引
column5Arr: [], // column5
column5Index: 0, // column5索引
column6Arr: [], // column6
column6Index: 0, // column6索引
column7Arr: [], // column7
column7Index: 0, // column7索引
}
},mergeTable(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
// 第一行必須存在，以第一行為基準(zhǔn) 合并的數(shù)量根據(jù)直接需求改
this.column1Arr.push(1) // column1
this.column1Index = 0
this.column2Arr.push(1) // column2
this.column2Index = 0
this.column3Arr.push(1) // column3
this.column3Index = 0
this.column4Arr.push(1) // column4
this.column4Index = 0
this.column5Arr.push(1) // column5
this.column5Index = 0
this.column6Arr.push(1) // column6
this.column6Index = 0
this.column7Arr.push(1) // column7
this.column7Index = 0
} else {
// 判斷當(dāng)前元素與上一元素是否相同
// 我是根據(jù)第一個(gè)數(shù)據(jù)合并后續(xù)才可以合并
//如果是 根據(jù)當(dāng)前表格的前一列可以在每一個(gè) column1++ 后面添加上前一個(gè)表格的列
// 如果是只要相同就合并那就每個(gè)column 里面的條件直接當(dāng)前列就可以了
// column1
if (data[i].checkResult === data[i - 1].checkResult) {
this.column1Arr[this.column1Index] += 1
this.column1Arr.push(0)
} else {
this.column1Arr.push(1)
this.column1Index = i
}
// column2
if (data[i].standardChineseName === data[i - 1].standardChineseName && data[i].checkResult === data[i - 1].checkResult) {
this.column2Arr[this.column2Index] += 1
this.column2Arr.push(0)
} else {
this.column2Arr.push(1)
this.column2Index = i
}
// column3
if (data[i].ingredientInciCtfaName === data[i - 1].ingredientInciCtfaName && data[i].checkResult === data[i - 1].checkResult) {
this.column3Arr[this.column3Index] += 1
this.column3Arr.push(0)
} else {
this.column3Arr.push(1)
this.column3Index = i
}
// column4
if (data[i].RMInFormula === data[i - 1].RMInFormula && data[i].checkResult === data[i - 1].checkResult) {
this.column4Arr[this.column4Index] += 1
this.column4Arr.push(0)
} else {
this.column4Arr.push(1)
this.column4Index = i
}
// column5
if (data[i].ingredientInRM === data[i - 1].ingredientInRM && data[i].checkResult === data[i - 1].checkResult) {
this.column5Arr[this.column5Index] += 1
this.column5Arr.push(0)
} else {
this.column5Arr.push(1)
this.column5Index = i
}
// column6
if (data[i].ingredientInFormula === data[i - 1].ingredientInFormula && data[i].checkResult === data[i - 1].checkResult) {
this.column6Arr[this.column6Index] += 1
this.column6Arr.push(0)
} else {
this.column6Arr.push(1)
this.column6Index = i
}
// column7
if (data[i].purposeOfUse === data[i - 1].purposeOfUse && data[i].checkResult === data[i - 1].checkResult) {
this.column7Arr[this.column7Index] += 1
this.column7Arr.push(0)
} else {
this.column7Arr.push(1)
this.column7Index = i
}
}
}
}
},
//我這里是在表格的第二列開(kāi)始合并因?yàn)榈谝涣惺?序號(hào) 不可以合并 從第一個(gè)開(kāi)始合并就把 下表
//改為0 columnIndex === 0
handleSpanMethod({ rowIndex, columnIndex }) {
if (columnIndex === 1) {
// 第二列 column2
const _row_1 = this.column1Arr[rowIndex]
const _col_1 = _row_1 > 0 ? 1 : 0
return {
rowspan: _row_1,
colspan: _col_1,
}
}
else if (columnIndex === 2) {
// 第三列 column3
const _row_2 = this.column2Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2,
}
} else if (columnIndex === 3) {
// 第四列 column4
const _row_3 = this.column3Arr[rowIndex]
const _col_3 = _row_3 > 0 ? 1 : 0
return {
rowspan: _row_3,
colspan: _col_3,
}
} else if (columnIndex === 4) {
// 第五列 column5
const _row_4 = this.column4Arr[rowIndex]
const _col_4 = _row_4 > 0 ? 1 : 0
return {
rowspan: _row_4,
colspan: _col_4,
}
} else if (columnIndex === 5) {
// 第六列 column6
const _row_5 = this.column5Arr[rowIndex]
const _col_5 = _row_5 > 0 ? 1 : 0
return {
rowspan: _row_5,
colspan: _col_5,
}
} else if (columnIndex === 6) {
// 第七列 column7
const _row_6 = this.column6Arr[rowIndex]
const _col_6 = _row_6 > 0 ? 1 : 0
return {
rowspan: _row_6,
colspan: _col_6,
}
} else if (columnIndex === 7) {
// 第八列 column8
const _row_7 = this.column7Arr[rowIndex]
const _col_7 = _row_7 > 0 ? 1 : 0
return {
rowspan: _row_7,
colspan: _col_7,
}
}
},//調(diào)取接口獲取數(shù)據(jù)
getList() {
const prams = {
taskId: this.taskId,
formulaId: this.formulaId
}
this.$http({
headers: {
'Content-Type': 'application/json',
},
method: 'post',
url: '/123123',
data: prams,
})
.then(res=>{
this.listData = res.data.records //給data變量賦值
this.mergeTable(this.listData)//合并單元格傳入數(shù)據(jù)
})
//清空之前的數(shù)據(jù) 不清空 表格數(shù)據(jù)就會(huì)亂套
this.column1Arr = []
this.column1Index = 0
this.column2Arr = []
this.column2Index = 0
this.column3Arr = []
this.column3Index = 0
this.column4Arr = []
this.column4Index = 0
this.column5Arr = []
this.column5Index = 0
this.column6Arr = []
this.column6Index = 0
this.column7Arr = []
this.column7Index = 0
},完整代碼
<template>
<div>
<el-table ref="tableRef" show-summary :summary-method="getSummaries" :span-method="handleSpanMethod" :data="listData" border style="width: 100%; margin-top: 5px">
<el-table-column label="No." type="index" align="center" width="50"></el-table-column>
<el-table-column prop="checkResult" label="Check result"> </el-table-column>
<el-table-column prop="standardChineseName" label="Standard chinese name"> </el-table-column>
<el-table-column prop="ingredientInciCtfaName" label="Ingredient INCI(CTFA) name"> </el-table-column>
<el-table-column prop="RMInFormula" label="RM in formula(%)"> </el-table-column>
<el-table-column prop="ingredientInRM" label="Ingredient in RM(%)"> </el-table-column>
<el-table-column prop="ingredientInFormula" label="Ingredient in formula(%)"> </el-table-column>
<el-table-column prop="purposeOfUse" label="Purpose of use"> </el-table-column>
<el-table-column prop="templateUrl5" label="New RM" align="center" width="100"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
listData: [],
// 合并單元格
column1Arr: [], // column1
column1Index: 0, // column1索引
column2Arr: [], // column2
column2Index: 0, // column2索引
column3Arr: [], // column3
column3Index: 0, // column3索引
column4Arr: [], // column4
column4Index: 0, // column4索引
column5Arr: [], // column5
column5Index: 0, // column5索引
column6Arr: [], // column6
column6Index: 0, // column6索引
column7Arr: [], // column7
column7Index: 0, // column7索引
}
},
computed: {},
created() {
this.getList()
},
mounted() {
},
methods: {
getList() {
const prams = {
taskId: this.taskId,
formulaId: this.formulaId
}
this.$http({
headers: {
'Content-Type': 'application/json',
},
method: 'post',
url: '/1123123123',
data: prams,
})
.then(res=>{
this.listData = res.data.records//給data中的變量賦值 把res.data.records換成自己
//的據(jù)接口 更改一下數(shù)據(jù)的字段 便可以直接使用了
this.mergeTable(this.listData)//合并單元格傳入數(shù)據(jù)
})
//清空之前的數(shù)據(jù)
this.column1Arr = []
this.column1Index = 0
this.column2Arr = []
this.column2Index = 0
this.column3Arr = []
this.column3Index = 0
this.column4Arr = []
this.column4Index = 0
this.column5Arr = []
this.column5Index = 0
this.column6Arr = []
this.column6Index = 0
this.column7Arr = []
this.column7Index = 0
},
mergeTable(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
// 第一行必須存在，以第一行為基準(zhǔn)
this.column1Arr.push(1) // column1
this.column1Index = 0
this.column2Arr.push(1) // column2
this.column2Index = 0
this.column3Arr.push(1) // column3
this.column3Index = 0
this.column4Arr.push(1) // column4
this.column4Index = 0
this.column5Arr.push(1) // column5
this.column5Index = 0
this.column6Arr.push(1) // column6
this.column6Index = 0
this.column7Arr.push(1) // column7
this.column7Index = 0
} else {
// 判斷當(dāng)前元素與上一元素是否相同
// column1
if (data[i].checkResult === data[i - 1].checkResult) {
this.column1Arr[this.column1Index] += 1
this.column1Arr.push(0)
} else {
this.column1Arr.push(1)
this.column1Index = i
}
// column2
if (data[i].standardChineseName === data[i - 1].standardChineseName && data[i].checkResult === data[i - 1].checkResult) {
this.column2Arr[this.column2Index] += 1
this.column2Arr.push(0)
} else {
this.column2Arr.push(1)
this.column2Index = i
}
// column3
if (data[i].ingredientInciCtfaName === data[i - 1].ingredientInciCtfaName && data[i].checkResult === data[i - 1].checkResult) {
this.column3Arr[this.column3Index] += 1
this.column3Arr.push(0)
} else {
this.column3Arr.push(1)
this.column3Index = i
}
// column4
if (data[i].RMInFormula === data[i - 1].RMInFormula && data[i].checkResult === data[i - 1].checkResult) {
this.column4Arr[this.column4Index] += 1
this.column4Arr.push(0)
} else {
this.column4Arr.push(1)
this.column4Index = i
}
// column5
if (data[i].ingredientInRM === data[i - 1].ingredientInRM && data[i].checkResult === data[i - 1].checkResult) {
this.column5Arr[this.column5Index] += 1
this.column5Arr.push(0)
} else {
this.column5Arr.push(1)
this.column5Index = i
}
// column6
if (data[i].ingredientInFormula === data[i - 1].ingredientInFormula && data[i].checkResult === data[i - 1].checkResult) {
this.column6Arr[this.column6Index] += 1
this.column6Arr.push(0)
} else {
this.column6Arr.push(1)
this.column6Index = i
}
// column7
if (data[i].purposeOfUse === data[i - 1].purposeOfUse && data[i].checkResult === data[i - 1].checkResult) {
this.column7Arr[this.column7Index] += 1
this.column7Arr.push(0)
} else {
this.column7Arr.push(1)
this.column7Index = i
}
}
}
}
},
handleSpanMethod({ rowIndex, columnIndex }) {
if (columnIndex === 1) {
// 第二列 column2
const _row_1 = this.column1Arr[rowIndex]
const _col_1 = _row_1 > 0 ? 1 : 0
return {
rowspan: _row_1,
colspan: _col_1,
}
}
else if (columnIndex === 2) {
// 第三列 column3
const _row_2 = this.column2Arr[rowIndex]
const _col_2 = _row_2 > 0 ? 1 : 0
return {
rowspan: _row_2,
colspan: _col_2,
}
} else if (columnIndex === 3) {
// 第四列 column4
const _row_3 = this.column3Arr[rowIndex]
const _col_3 = _row_3 > 0 ? 1 : 0
return {
rowspan: _row_3,
colspan: _col_3,
}
} else if (columnIndex === 4) {
// 第五列 column5
const _row_4 = this.column4Arr[rowIndex]
const _col_4 = _row_4 > 0 ? 1 : 0
return {
rowspan: _row_4,
colspan: _col_4,
}
} else if (columnIndex === 5) {
// 第六列 column6
const _row_5 = this.column5Arr[rowIndex]
const _col_5 = _row_5 > 0 ? 1 : 0
return {
rowspan: _row_5,
colspan: _col_5,
}
} else if (columnIndex === 6) {
// 第七列 column7
const _row_6 = this.column6Arr[rowIndex]
const _col_6 = _row_6 > 0 ? 1 : 0
return {
rowspan: _row_6,
colspan: _col_6,
}
} else if (columnIndex === 7) {
// 第八列 column8
const _row_7 = this.column7Arr[rowIndex]
const _col_7 = _row_7 > 0 ? 1 : 0
return {
rowspan: _row_7,
colspan: _col_7,
}
}
}
}
</script>總結(jié)
到此這篇關(guān)于vue element ui表格相同數(shù)據(jù)合并單元格的文章就介紹到這了,更多相關(guān)element ui相同數(shù)據(jù)合并單元格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue(element ui)el-table樹(shù)形表格展示以及數(shù)據(jù)對(duì)齊方式
- vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
- vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
- 使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
- Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹(shù)形數(shù)據(jù)教程
- vue elementUI table表格數(shù)據(jù) 滾動(dòng)懶加載的實(shí)現(xiàn)方法
- vue Element UI 解決表格數(shù)據(jù)不更新問(wèn)題及解決方案
相關(guān)文章
vue使用原生js實(shí)現(xiàn)滾動(dòng)頁(yè)面跟蹤導(dǎo)航高亮的示例代碼
這篇文章主要介紹了vue使用原生js實(shí)現(xiàn)滾動(dòng)頁(yè)面跟蹤導(dǎo)航高亮的示例代碼，滾動(dòng)頁(yè)面指定區(qū)域?qū)Ш礁吡?。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案
這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
在vue-cli創(chuàng)建的項(xiàng)目中使用sass操作
這篇文章主要介紹了在vue-cli創(chuàng)建的項(xiàng)目中使用sass操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue.js內(nèi)部自定義指令與全局自定義指令的實(shí)現(xiàn)詳解（利用directive）
這篇文章主要給大家介紹了關(guān)于vue.js內(nèi)部自定義指令與全局自定義指令的實(shí)現(xiàn)方法，vue.js中實(shí)現(xiàn)自定義指令的主要是利用directive，directive這個(gè)單詞是我們寫(xiě)自定義指令的關(guān)鍵字，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了Vue對(duì)象賦值視圖不更新問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了前端必知必會(huì)之Vue?v-if指令的相關(guān)資料,Vue中的條件渲染指令v-if、v-else-if和v-else用于根據(jù)條件動(dòng)態(tài)創(chuàng)建HTML元素,通過(guò)使用比較運(yùn)算符和邏輯運(yùn)算符,可以編寫(xiě)復(fù)雜的條件邏輯,需要的朋友可以參考下2025-02-02
Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn)
在登錄頁(yè)面需要啟動(dòng)向右滑塊驗(yàn)證功能,遇到這樣的需求怎么實(shí)現(xiàn)呢,下面小編通過(guò)示例代碼給大家分享Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn),感興趣的朋友一起看看吧2024-06-06
Vue中引入swiper報(bào)錯(cuò)的問(wèn)題及解決
這篇文章主要介紹了Vue中引入swiper報(bào)錯(cuò)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了vue2.0父子組件間通信的實(shí)現(xiàn)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)
這篇文章主要介紹了vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07