欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)例,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

elementPlus中table合并部分列

虛擬數(shù)據(jù)中公司下有多個(gè)客戶，公司一樣的客戶，公司列需要合并，客戶如果一樣也需要合并進(jìn)行展示，效果展示

const tableData = ref([])自定定義自已想要的數(shù)據(jù)，一般都是通過(guò)接口拿到

//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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論