Vue Elenent实现表格相同数据列合并
程序员文章站
2022-06-25 21:52:40
本文实例为大家分享了vue elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下作者:秋名思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表...
本文实例为大家分享了vue elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下
作者:秋名
思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并。(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰。)
template:
<el-table :span-method="objectspanmethod4" //在el-table里面添加合并单元格属性 >
js:
data(){ return{ orderdata:null,// 后端将数据查询出来后,绑定到orderdata里面 } }, methods: { flitterdata4(){ let spanonearr = [] let concatone = 0 //let spanonearr1 = [] //let concatone1 = 0 this.orderdata.foreach((item,index)=>{//循环后端查询出来的数据(orderdata) if(index === 0){ spanonearr.push(1) }else{ //name 修改 if(item.entername === this.orderdata[index - 1].entername){ //第一列需合并相同内容的字段 spanonearr[concatone] += 1 spanonearr.push(0) }else{ spanonearr.push(1) concatone = index } //if(item.coachname === this.coachdata[index - 1].coachname){ //第二列需合并相同内容的判断条件 //spanonearr1[concatone1] += 1 //spanonearr1.push(0) //}else{ //spanonearr1.push(1) //concatone1 = index // } } }) return { one: spanonearr, //two:spanonearr1 } }, objectspanmethod4({row, column, rowindex, columnindex}){ if(columnindex === 0 ) { // this.tabledata 修改 const _row = (this.flitterdata4(this.tabledata).one)[rowindex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } //判断是否是第二列,如果是就将第二列相同字段进行合并 //if(columnindex === 1) { // const _row = (this.flitterdata(this.tabledata).two)[rowindex] // const _col = _row > 0 ? 1 : 0 // return { // rowspan: _row, // colspan: _col // } } }, }
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 亚马逊中国发布2017图书排行榜
下一篇: 2017年十大网络用语发布