vue表格合并单元格,vue多个表格数据

　　本文主要详细介绍了Vue Elenent合并表中相同的数据列。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享Vue Elenent合并表中相同数据列的具体代码，供大家参考。具体内容如下

　　作者：邱明

　　思路：后台查询表格数据，查询完成后直接发送到前端。前端通过foreach循环，然后相同的表合并。(同样的表格，但是每行和固定列的数据都是一样的，可以用合并单元格，既美观又清晰。)

　　模板：

　　el表

　　:span-method= objectspanmethod 4 //在el-table中添加合并的单元格属性。

　　Js:

　　data(){

　　返回{

　　Orderdata:null，//后端查询数据后，绑定到Orderdata。

　　}

　　},

　　方法：{

　　flitterData4(){

　　让spanOneArr=[]

　　让concatOne=0

　　//let spanOneArr1=[]

　　//让concatOne1=0

　　This.orderdata.foreach ((item，index)={//循环后端查询的数据(orderdata)。

　　if(index===0){

　　spanOneArr.push(1)

　　}否则{

　　//名称修改

　　如果(项。输入name===this.orderdata [index-1]。输入名称){//第一列包含内容相同的字段。

　　spanOneArr[concatOne]=1

　　spanOneArr.push(0)

　　}否则{

　　spanOneArr.push(1)

　　concatOne=索引

　　}

　　//if (item。教练名===这个。教练数据[索引-1]。教练姓名){//第二列需要结合相同内容的判断条件。

　　//spanOneArr1[concatOne1]=1

　　//spanOneArr1.push(0)

　　//}其他{

　　//spanOneArr1.push(1)

　　//concatOne1=index

　　//}

　　}

　　})

　　返回{

　　一：spanOneArr，

　　//二：spanOneArr1

　　}

　　},

　　objectSpanMethod4({row，column，rowIndex，columnIndex}){

　　if(columnIndex===0 ) {

　　//this . table数据修改

　　const _ row=(this . f litter data 4(this . table data)。one)[rowIndex]

　　const _col=_row 0？1 : 0

　　返回{

　　rowspan: _row，

　　列跨度：_列

　　}

　　}

　　//判断是否是第二列，如果是，则合并第二列中相同的字段。

　　//if(columnIndex===1) {

　　//const _ row=(this . f litterdata(this . table data)。two)[rowIndex]

　　//const _col=_row 0？1 : 0

　　//返回{

　　//rowspan: _row，

　　//colspan: _col

　　//}

　　}

　　},

　　}

　　效果图：

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。