vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 elementPlus table合并

vue3使用elementPlus进行table合并处理的示例详解

作者：weixin_43877575

虚拟数据中公司下有多个客户,公司一样的客户,公司列需要合并,客户如果一样也需要合并进行展示,所以本文给大家介绍了vue3使用elementPlus进行table合并处理的实例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下

elementPlus中table合并部分列

虚拟数据中公司下有多个客户，公司一样的客户，公司列需要合并，客户如果一样也需要合并进行展示，效果展示

const tableData = ref([])自定定义自已想要的数据，一般都是通过接口拿到

//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>

定义一个方法进行数据处理：

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]
		}
	}

到此这篇关于vue3使用elementPlus进行table合并处理的示例详解的文章就介绍到这了,更多相关vue3 elementPlus table合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文