el-table动态合并单元格,element table合并列

　　本文主要介绍vue使用el-table动态合并列和行。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享了vue使用el-table动态合并行列的具体代码，供大家参考。具体内容如下

　　前两天项目需要合并表单，特此记录以备后用。

　　首先，我在element-ui中使用了el-table。文档中提供的span-method方法可以合并行或列。如果不熟悉，可以看看element document的地址。但是文档中提供的例子非常简单，无法满足复杂页面的需求，所以需要对数据进行处理。

　　代码如下：

　　getListDataForRowAndColumn(data){

　　让自我=这个；

　　self . rowandcolumn=[]；

　　self . rowloomcolumn=[]；

　　for(var I=0；I数据长度；i ) {

　　if (i===0) {

　　//如果是第一条记录(即索引为0时)，数组加1

　　self . rowandcolumn . push(1)；

　　self . pos=0；

　　self . rowloom column . push(1)；

　　self . post=0；

　　}否则{

　　//data[i]。typeDesc是你从接口读取的字段信息，下同。

　　if (data[i].typeDesc===data[i - 1]。typeDesc) {

　　//如果typeDesc相等，则累加，并推0

　　self.rowAndColumn[self.pos]=1

　　self.rowAndColumn.push(0)

　　if (data[i].areaDesc===data[i - 1]。areaDesc) {

　　//如果areaDesc相等，则累加，并推0

　　self . rowloom column[self . post]=1

　　self . rowloom column . push(0)

　　}否则{

　　self . rowloom column . push(1)

　　self.posT=i

　　}

　　}否则{

　　//不等推1

　　self.rowAndColumn.push(1)

　　self . pos=I；

　　self . rowloom column . push(1)

　　self.posT=i

　　}

　　}

　　}

　　},

　　上面的代码是整理你的数据，注释写的很清楚。相信大家都能理解他们。如果真的不好，就把它们打印出来看看。

　　在对数据进行处理后，使用上述跨度法。如图所示：

　　ObjectSpanMethod方法如下：

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

　　让self=这个

　　if (columnIndex===1) {

　　if(self . rowandcolumn[rowIndex]){

　　let rowNum=self . rowandcolumn[rowIndex]；

　　返回{

　　rowspan: rowNum，

　　rowNum 0？1 : 0

　　}

　　}

　　返回{

　　rowspan: 0，

　　列跨度：0

　　}

　　}

　　if (columnIndex===2) {

　　if(self . rowloom column[rowIndex]){

　　let roomNum=self . rowloomcolumn[rowIndex]；

　　返回{

　　rowspan: roomNum，

　　colspan: roomNum 0？1 : 0

　　}

　　}

　　返回{

　　rowspan: 0，

　　列跨度：0

　　}

　　}

　　},

　　完成了。我们来看看效果图。

　　注意，使用这种方法时，后端一定要排序后才能发出，否则页面可能达不到预期效果。因为我是从第二列开始合并的，所以objectSpanMethod方法中的columnIndex是从1开始的，这个可以根据你的实际情况。只需将从接口获得的数据放入getListDataForRowAndColumn方法中。记得定义rowAndColumn，rowRoomColumn。

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

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