这篇文章主要介绍vue中elment-ui table怎么合并上下两行相同数据单元格，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联主营南召网站建设的网络公司,主营网站建设方案,
app软件定制开发,南召h5微信平台小程序开发搭建,南召网站营销推广欢迎南召等地区企业咨询
html ：
method
objectOneMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.setTable(this.ptableDate).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 1 ) {
const _row = this.setTable(this.ptableDate).two[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
setTable(tableData) {
let spanOneArr = [],
spanTwoArr = [],
concatOne = 0,
concatTwo = 0;
tableData.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
spanTwoArr.push(1);
} else {
if (item.projName === tableData[index - 1].projName) {
//第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
}
if (item.dirtySection === tableData[index - 1].dirtySection) {
//第二列和需合并相同内容的判断条件
spanTwoArr[concatTwo] += 1;
spanTwoArr.push(0);
} else {
spanTwoArr.push(1);
concatTwo = index;
}
}
});
return {
one: spanOneArr,
two: spanTwoArr
};
},ps：下面看下ELEMENT-UI 合并单元格的方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 只合并区域位置
//columnIndex 横的第一列
//rowIndex 竖的数组的length % 3 ==0 合并单元格
if (columnIndex === 0) { //如果是第一行
if (rowIndex % 3 === 0) {//如果是 数组长度 % 3 ==0
return {
rowspan: 3,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
以上是“vue中elment-ui table怎么合并上下两行相同数据单元格”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
新闻名称：vue中elment-uitable怎么合并上下两行相同数据单元格-创新互联
文章路径：
http://cdxtjz.cn/article/phpds.html
