快捷導(dǎo)航

vue3使用elementPlus進(jìn)行table合并處理的示例詳解

更新時(shí)間：2024年02月27日 09:52:58 作者：weixin_43877575

虛擬數(shù)據(jù)中公司下有多個(gè)客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進(jìn)行展示,所以本文給大家介紹了vue3使用elementPlus進(jìn)行table合并處理的實(shí)例,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

elementPlus中table合并部分列

虛擬數(shù)據(jù)中公司下有多個(gè)客戶，公司一樣的客戶，公司列需要合并，客戶如果一樣也需要合并進(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>

定義一個(gè)方法進(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3 的批量渲染機(jī)制的兩種方法
本文主要介紹了Vue3 的批量渲染機(jī)制的兩種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-10-10
Vue的異步組件加載的實(shí)現(xiàn)方法小結(jié)
在 Vue 中,異步組件是指那些在需要時(shí)才會(huì)被加載的組件,與傳統(tǒng)的靜態(tài)組件不同,異步組件通過動(dòng)態(tài)加載的方式,可以有效地減少初始加載的資源和時(shí)間,在 Vue 中實(shí)現(xiàn)異步組件加載非常簡單,開發(fā)者有多種方法可以做到,本文給大家介紹了一些常用的實(shí)現(xiàn)方法
2024-11-11
element的表單元素使用總結(jié)
表單元素挺多的，本文主要介紹了element的表單元素使用總結(jié)，主要包括文本框類、選擇類、其他類，有一定的參考價(jià)值，感興趣的可以了解一下
2021-06-06
Vue中使用Tiptap富文本編輯器的方法指南
Tiptap是一個(gè)無頭（headless）的富文本編輯器框架,專為?Web?工匠設(shè)計(jì),它提供了高度可定制和可擴(kuò)展的編輯器功能,適用于各種前端框架,這篇文章主要介紹了Vue中使用Tiptap富文本編輯器的相關(guān)資料,需要的朋友可以參考下
2026-02-02
淺談Vue3 父子傳值
這篇文章主要介紹了基于Vue中的父子傳值問題解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2021-10-10
vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)和解決方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
vue-cli3腳手架的配置及使用教程
這Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下
2018-08-08
vue導(dǎo)出報(bào)表至excel表格三種方式
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出報(bào)表至excel表格的三種方式,導(dǎo)出報(bào)表是實(shí)際開發(fā)的常見功能,前后端都可以實(shí)現(xiàn)表格導(dǎo)出,本文介紹的是用vue實(shí)現(xiàn),需要的朋友可以參考下
2023-09-09
Vue?eventBus事件總線封裝后再用的方式
EventBus稱為事件總線,當(dāng)兩個(gè)組件屬于不同的兩個(gè)組件分支,或者兩個(gè)組件沒有任何聯(lián)系的時(shí)候,不想使用Vuex這樣的庫來進(jìn)行數(shù)據(jù)通信,就可以通過事件總線來進(jìn)行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線封裝后再用的相關(guān)資料,需要的朋友可以參考下
2022-06-06
vue集成高德地圖amap-jsapi-loader的實(shí)現(xiàn)
本文主要介紹了vue集成高德地圖amap-jsapi-loader的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06