Vue中如何合并el-table第一列相同数据
作者:半度纳 发布时间:2024-05-22 10:42:46
标签:Vue,合并,el-table,相同数据
Vue合并el-table第一列相同数据
业务需求
需要将el-table表格第一列相同的内容进行合并。
解决办法
el-table中使用 :span-method="objectSpanMethod"方法
vue标签
<el-table :data="contractList" border style="width: 100%" :span-method="objectSpanMethod">
<el-table-column label="各部门部1月-12月合同回款情况" align="center">
<el-table-column prop="quarterly" width="100" align="center" />
<el-table-column prop="mon" width="80" align="center" />
<el-table-column prop="amountReceived" width="180" align="center" />
<el-table-column prop="remark" width="180" align="center" />
</el-table-column>
</el-table>
methods内部处理
/* 表格合并列和行 */
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.flitterData(this.contractList).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
/**合并表格的第一列,处理表格数据 */
flitterData(arr) {
let spanOneArr = [];
let concatOne = 0;
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
} else {
//注意这里的quarterly是表格绑定的字段,根据自己的需求来改
if (item.quarterly === arr[index - 1].quarterly) {
//第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
}
}
});
return {
one: spanOneArr,
};
},
效果展示
el-table合并相同单元格问题
项目需求table表格中,相同的类型合并成一个单元格展示。
问题描述
el-table
并没有相关的语法直接合并,需要我们自己传入一个方法返回一个数组格式,来确定要合并行列。
解决问题
首先需要在 el-table
标签上绑定:span-method="objectSpanMethod"
<el-table :data="tableData" :span-method="objectSpanMethod" >
<el-table-column prop="projectName" label="订单类型" />
</el-table>
再去methods
中定义 objectSpanMethod
方法,data
中定义一个rowSpanArr
参数
// 获取相同名称的个数 tableData: 表格的数据, projectName: 确定相同的参数
handleTableData(tableData){
let rowSpanArr = [], position = 0;
for (let [index, item] of tableData.entries()) {
if (index == 0) {
rowSpanArr.push(1);
position = 0;
} else {
if (item.projectName == tableData[index - 1].projectName) {
rowSpanArr[position] += 1; //项目名称相同,合并到同一个数组中
rowSpanArr.push(0);
} else {
rowSpanArr.push(1);
position = index;
}
}
}
this.rowSpanArr = rowSpanArr
}
// 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
objectSpanMethod({ row, column, rowIndex, columnIndex }){
if (columnIndex === 0) {
const rowSpan = this.rowSpanArr[rowIndex];
return {
rowspan: rowSpan, //行
colspan: 1 //列
};
}
}
扩展
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 判断是不是第一列,只有第一列才执行合并
if (rowIndex % 2 === 0) { // 判断能不能被2整除
return {
rowspan: 2, // 从当前单元格开始,执行合并2行
colspan: 1, // 从当前单元格开始,执行合并1列
};
} else {
return { // 第一列的其他元素不执行合并
rowspan: 0, // 为0,不执行合并
colspan: 0 // 为0,不执行合并
};
}
}
}
来源:https://blog.csdn.net/Five297/article/details/127667021
0
投稿
猜你喜欢
- 1.在浏览器搜索python.org,如下图选择第一个2.进入python官网,选择dowload然后选择windows如下图:3.选择py
- 本文实例总结了GO语言基本数据类型。分享给大家供大家参考。具体如下:1、注释(与C++一样)行注释://块注释:/* ...*/2、标识符可
- 我在使用python3.5处理一个序列化文件xxx.pk,不过这个.pk文件是我在python2.7里面存储的,当我用python3读取的时
- 安装前的准备1.python的安装和配置在Window下:在开始菜单中找到运行输入cmd或直接搜索cmd点击进入,输入python,如果出现
- CentOS7默认数据库是mariadb, 但是 好多用的都是mysql ,但是CentOS7的yum源中默认好像是没有mysql的。上一篇
- 解决方法:1、找到mysql安装目录c:\Program Files\MySQL\MySQL Server 5.5下的my.ini2、修改一
- 要实现div的任意拖动,我们不妨分析一下整个过程。 当鼠标点击div时,触发一个事件,让div的位置属性(left,top)随着鼠标位置变化
- 项目技术:webpack + vue + element + axois (vue-resource) + less-loader+ ...
- 在tensorflow中,经常会遇到参数初始化问题,比如在训练自己的词向量时,需要对原始的embeddigs矩阵进行初始化,更一般的,在全连
- python第三方库的安装PyInstaller库PyInstaller库能够在不同操作系统下将python源文件打包,变成直接可运行的可执
- 1.’%.2f’%f该方法会进行四舍五入代码如下所示:f = 2.3456789print('
- 解释器模式(Interpreter Pattern)是什么解释器模式是一种行为型模式,它定义了一种语言文法,并且定义了一个解释器,用来解释这
- 1:为什么我得不到变量 我在一网页向另一网页POST数据name,为什么输出$name时却得不到任何值? 在PHP4.2以后的版本中regi
- 一、题目内容给定一个非负整数 num。对于 0 ≤ i ≤ num 范围中的每个数字 i ,计算其二进制数中的
- 在Flask页面展示echarts,主要有两种方法:方法1、原生echarts方法自己在前端引入echarts.js文件、自己创建div、自
- numpy矩阵数值太多不能全部显示,可以运行以下命令令全部数值展示出来np.set_printoptions(threshold='
- 本文实例讲述了Python编程判断这天是这一年第几天的方法。分享给大家供大家参考,具体如下:题目:输入某年某月某日,判断这一天是这一年的第几
- 第一种方法:用军哥的一键修改LNMP环境下MYSQL数据库密码脚本一键脚本肯定是非常方便。具体执行以下命令:wget http://soft
- 反射是语言里面是非常重要的一个特性,我们经常会看见这个词,但是对于反射没有一个很好的理解,主要是因为对于反射的使用场景不太熟悉。一、理解变量
- 目录前言前期准备数据的选择与获取分词筛选与可视化总结前言”数据可视化“这个话题,相信大家并不陌生,在一些平台,经常可以看到一些动态条形图的视