当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue 中 elment-ui table合并上下两行相同数据单元格

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

2020年03月09日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网