vue3使用elementPlus進(jìn)行table合并處理的示例詳解
更新時間：2024年02月27日 09:52:58 作者：weixin_43877575
虛擬數(shù)據(jù)中公司下有多個客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進(jìn)行展示,所以本文給大家介紹了vue3使用elementPlus進(jìn)行table合并處理的實例,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
elementPlus中table合并部分列
虛擬數(shù)據(jù)中公司下有多個客戶，公司一樣的客戶，公司列需要合并，客戶如果一樣也需要合并進(jìn)行展示，效果展示
const tableData = ref([])自定定義自已想要的數(shù)據(jù)，一般都是通過接口拿到
//table
<template>
<el-table
:data="tableData"
style="width: 80vw; margin-bottom: 20px"
:row-class-name="(({row}) => row.rowClass)"
border
:span-method="tableSpanMethod"
>
<el-table-column prop="company_name" label="公司" width="200"></el-table-column>
<el-table-column prop="firm_name" label="客戶名稱"></el-table-column>
<el-table-column prop="user_name" label="名稱"></el-table-column>
<el-table-column prop="biz_date" label="日期"></el-table-column>
<el-table-column prop="" label="金額">
<el-table-column prop="back_date" label="日期"></el-table-column>
<el-table-column prop="back_status" label="已退"></el-table-column>
<el-table-column prop="dc_money" label="金額(元)"></el-table-column>
</el-table-column>
<el-table-column prop="balance_money" label="余額(元)"></el-table-column>
</el-table>
</template>
定義一個方法進(jìn)行數(shù)據(jù)處理：
const getData = ()=>{
let temp = [],
companyRow,
firmRow
tableData.forEach((item,index)=>{
temp.push(item)
companyRow = !companyRow ? Object.assign(item, {companySpan: 0}) : companyRow
companyRow.companySpan++
firmRow = !firmRow ? Object.assign(item, {firmSpan: 0}) : firmRow
firmRow.firmSpan++
if(item.company_name != tableData[index + 1]?.company_name){
companyRow = null
firmRow = null
}else{
if(item.firm_name !== tableData[index+ 1]?.firm_name){
firmRow = null
}
}
})
}
然后是tableSpan的方法定義：
const tableSpanMethod = ({row,column,rowIndex,columnIndex})=>{
if(column.property === 'company_name'){
return row.companySpan ? [row.companySpan, 1] : [0,0]
}
if(column.property == 'firm_name'){
return row.firmSpan ? [row.firmSpan, 1] : [0,0]
}
}
到此這篇關(guān)于vue3使用elementPlus進(jìn)行table合并處理的示例詳解的文章就介紹到這了,更多相關(guān)vue3 elementPlus table合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式
- element-plus的el-table自定義表頭篩選查詢功能實現(xiàn)
- Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法
- vue3使用element-plus再次封裝table組件的基本步驟
- vue3+element Plus實現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼
- vue3+elementplus基于el-table-v2封裝公用table組件詳細(xì)代碼
- Vue3中Element Plus Table(表格)點(diǎn)擊獲取對應(yīng)id方式
- vue3 elementplus table合并寫法
- Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
- ElementPlus?Table表格實現(xiàn)可編輯單元格
相關(guān)文章
Vue利用AJAX請求獲取XML文件數(shù)據(jù)的操作方法
在現(xiàn)代Web開發(fā)中,從前端框架到后端API的交互是必不可少的一部分,Vue.js作為一個輕量級且功能強(qiáng)大的前端框架,支持多種方式與服務(wù)器通信,從而獲取或發(fā)送數(shù)據(jù),本文將詳細(xì)介紹如何在Vue.js項目中使用AJAX請求來獲取XML格式的數(shù)據(jù),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vuex之module使用方法及場景說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiper實現(xiàn)卡片輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue3 vite配置跨域以及不生效問題,本文給大家分享完美解決方案，需要的朋友可以參考下2023-07-07
VUEJS實戰(zhàn)之利用laypage插件實現(xiàn)分頁（3）
這篇文章主要為大家詳細(xì)介紹了VUEJS實戰(zhàn)之修復(fù)錯誤并且美化時間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue-cli+webpack在生成的項目中使用bootstrap實例代碼
本篇文章主要介紹了vue-cli+webpack在生成的項目中使用bootstrap實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-05-05
Vue動態(tài)設(shè)置img的src不生效的問題解決
本文主要介紹了Vue動態(tài)設(shè)置img的src不生效的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
uniapp如何打包到H5并成功發(fā)布,以及在打包過程中會遇到的坑如何解決,本文將一一講解,文中通過圖文結(jié)合的方式給大家講解的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-10-10
使用vue.js在頁面內(nèi)組件監(jiān)聽scroll事件的方法
今天小編就為大家分享一篇使用vue.js在頁面內(nèi)組件監(jiān)聽scroll事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09