这篇文章主要介绍“Vue中怎么合并el-table第一列相同数据”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中怎么合并el-table第一列相同数据”文章能帮助大家解决问题。
需要将el-table表格第一列相同的内容进行合并。
el-table中使用 :span-method="objectSpanMethod"方法
vue标签
计算
安全
数据库
网络和加速
企业服务
<el-table :data="contractList" border :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,
};
},
项目需求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，不执行合并
};
}
}
}关于“Vue中怎么合并el-table第一列相同数据”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/Five297/article/details/127667021
