欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 中 elment-ui table合并上下两行相同数据单元格

程序员文章站 2022-07-06 18:10:43
html :

html :

 <el-table
 :header-cell-style="{background:'#6d7f93',color:'white'}"
 :data="ptabledate"
 align="center"
 border
 v-loading="loading"
 :height="tableheight"
 :span-method="objectonemethod"
 >
 <el-table-column align="center" show-overflow-tooltip prop="projname" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="dirtysection" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="towernumber" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="inclination" ></el-table-column>
 </el-table>

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-ui table合并上下两行相同数据单元格,希望对大家有所帮助