el-table动态合并单元格,element动态编辑表格

　　本文主要介绍按元素动态合并表格的步骤，帮助你更好的理解和使用vue。感兴趣的朋友可以了解一下。

前言

　　官方给出的element例子过于简单，无法满足实际需求。

　　数据必须是动态的。合并的行和列的数量是动态的。怎么知道合并行数？

需求

　　动态表合并，来自数据库的数据

正文

　　起初，我的数据源是一个单独的数组，表格数据合并了几个数据。

　　根据每个数组的长度，我决定每行的合并数。

　　结果：有些数据是正常的，但有些是合并错误的。计算方法不对。

　　试试两个

　　DataPretreatment()使用这个方法计算每一行中的行数。

　　DataPretreatment(){ //对表格数据列进行合并预处理，生成相同行数的数组，记录每行设置的合并数。

　　//如果是第一条记录(索引为0)，数组加1，设置索引位置；

　　//如果不是第一条记录，判断是否等于前一条记录。如果是的话，

　　//将元素0加到mergingRows上，前面的元素1表示合并的行数1，

　　//来回获取所有行的组合数，0表示不显示该行。

　　for(设I=0；I this . table data . length；I ){ //tabledata表数据源

　　if(i===0){

　　this.mergingRows.push(1)

　　this.mergingPos=0

　　}否则{

　　If (this.tabledata [i].name===this.tabledata [i-1]。name){//哪些数据是合并的条件？

　　this . merging rows[this . merging pos]=1

　　this.mergingRows.push(0)

　　}否则{

　　this.mergingRows.push(1)

　　this.mergingPos=i

　　}

　　}

　　}

　　},

　　使用这个方法mergeColumn()绑定到官方提供的span-method方法。

　　mergeColumn({row，Column，rowIndex，columnIndex}){

　　if(column index===0){///第一列

　　const _ row=this . merging rows[rowIndex]；

　　const _col=_row0？1 : 0;

　　返回{

　　rowspan: _row，

　　列跨度：_列

　　}

　　}

　　///if(column index===1){//{//第二列中每行的条件可以不同。这是一个动态的、多样化的合并表。

　　//const _ row=this . merging rows[rowIndex]；

　　//const _col=_row0？1 : 0;

　　//返回{

　　//rowspan: _row，

　　//colspan: _col

　　//}

　　//}

　　},

　　显示结果

注意注意

　　1.第一列计算要合并的行数。

　　2.发现鼠标在表格中移动mergeColumn()。此方法已被调用。

Fannie式总结

　　一定要定义每行的合并行数，用列来区分。

　　记住！否则，合并后的表单会和你想的不一样。

　　这就是用元素动态合并表的步骤的细节。关于用元素动态合并表格的更多信息，请关注我们的其他相关文章！

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