ElementUI - elTable 将指定列相同的数据进行跨行合并

原创

于 2024-12-13 10:38:50 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

注意：

1、el-table中写上： :span-method=“objectSpanMethod”

2、两个方法不用改动

3、想合并哪列，在data中columnArr数组里填上列名。

4、可能会有bug具体看生成结果

<template>
  <div>
    <el-table :data="tableData"
    	style="width: 100%" 
   	 	:cell-style="{ 'text-align': 'center' }" 
    	:header-cell-style="{
        	'text-align': 'center',
        	background: '#f6f8fa',
        	color: '#333',
      	}"
     	 border
      	show-summary
     	 :span-method="objectSpanMethod"
    >
      <el-table-column label="行号" type="index" width="60" />
      <el-table-column prop="dotime" label="日期" min-width="110" />
      <el-table-column prop="company_name" label="客户名称" min-width="160" />
      <el-table-column prop="title" label="跟进标题" min-width="130" />
      <el-table-column prop="income" label="收入" min-width="100" />
      <el-table-column prop="cost" label=