Vue实现table合并相同列

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue实现table合并相同列相关的知识,希望对你有一定的参考价值。

参考技术A 1、在vue页面methods定义方法

methods:

flitterData ()

const spanOneArr = []

let concatOne = 0

// 循环后端查询出来的数据(tableData),这里直接在data()中定义好了

this.tableData.forEach((item, index) =>

if (index === 0)

spanOneArr.push(1)

else

// 需合并相同内容的字段,根据id判断,将id相同的name、classname合并

if (item.id === this.tableData[index - 1].id)

spanOneArr[concatOne] += 1

spanOneArr.push(0)

else

spanOneArr.push(1)

concatOne = index





)

return

one: spanOneArr



,

objectSpanMethod ( row, column, rowIndex, columnIndex )

// 判断是否是第一、二列,如果是就将第一、二列相同字段进行合并

if (columnIndex === 0 || columnIndex === 1)

// this.tableData 修改

const _row = (this.flitterData(this.tableData).one)[rowIndex]

const _col = _row > 0 ? 1 : 0

return

rowspan: _row,

colspan: _col









2、在vue页面定义data

data ()

return

// 接收后端传值数据

tableData: []





3、在vue页面定义table

标签中用 span-method引用定义的objectSpanMethod方法

<el-table p=""> </el-table>

ref="projectTable"

v-loading="loading"

:data="tableData"

:span-method="objectSpanMethod"

border

:header-cell-style="color: 'black',fontWeight: 'bold',textAlign: 'center'"

:cell-style=" textAlign: 'center' "

height="590px">

完整代码:

<el-table p=""> </el-table>

ref="projectTable"

v-loading="loading"

:data="tableData"

:span-method="objectSpanMethod"

border

:header-cell-style="color: 'black',fontWeight: 'bold',textAlign: 'center'"

:cell-style=" textAlign: 'center' "

height="590px">

效果图:

关于页面中table中相同的列自动合并

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
     
<script type="text/javascript" src="C:/Users/xqq/Desktop/Study/jquery/jquery.min.js"></script> 
 
<script type="text/javascript"> 
(function($) { 
    $.fn.mergeCell = function(options) { 
        return this.each(function() { 
            var cols = options.cols; 
            for ( var i = cols.length - 1; cols[i] != undefined; i--) { 
                mergeCell($(this), cols[i]); 
            } 
            dispose($(this)); 
        }); 
    }; 
     
 
    function mergeCell($table, colIndex) { 
        $table.data(‘col-content‘, ‘‘); // 存放单元格内容 
        $table.data(‘col-rowspan‘, 1); // 存放计算的rowspan值 默认为1 
        $table.data(‘col-td‘, $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 
        $table.data(‘trNum‘, $(‘tbody tr‘, $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 
         
        // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan 
        $(‘tbody tr‘, $table).each(function(index) { 
            // td:eq中的colIndex即列索引 
            var $td = $(‘td:eq(‘ + colIndex + ‘)‘, this); 
            // 取出单元格的当前内容 
            var currentContent = $td.html(); 
            // 第一次时走此分支 
            if ($table.data(‘col-content‘) == ‘‘) { 
                $table.data(‘col-content‘, currentContent); 
                $table.data(‘col-td‘, $td); 
            } else { 
                // 上一行与当前行内容相同 
                if ($table.data(‘col-content‘) == currentContent) { 
                    // 上一行与当前行内容相同则col-rowspan累加, 保存新值 
                    var rowspan = $table.data(‘col-rowspan‘) + 1; 
                    $table.data(‘col-rowspan‘, rowspan); 
                    // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响 
                    $td.hide(); 
                    // 最后一行的情况比较特殊一点 
                    // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan 
                    if (++index == $table.data(‘trNum‘)) 
                        $table.data(‘col-td‘).attr(‘rowspan‘, $table.data(‘col-rowspan‘)); 
                    } else { // 上一行与当前行内容不同 
                        // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理 
                        if ($table.data(‘col-rowspan‘) != 1) { 
                            $table.data(‘col-td‘).attr(‘rowspan‘, $table.data(‘col-rowspan‘)); 
                        } 
                        // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan 
                        $table.data(‘col-td‘, $td); 
                        $table.data(‘col-content‘, $td.html()); 
                        $table.data(‘col-rowspan‘, 1); 
                    } 
                } 
             
        }); 
    } 
         
    // 同样是个private函数 清理内存之用 
    function dispose($table) { 
        $table.removeData(); 
    } 
})(jQuery); 
 
 
 
$(function() { 
    $(‘#process‘).mergeCell({ 
        cols: [0,2] 
    }); 
}); 
</script> 
 
  </head>
   
  <body>
    <table id="process" cellpadding="2" cellspacing="0" border="1"> 
     <thead>
                                        <tr>
                                            <th>终端名称</th>
                                            <th>业务类型</th>
                                            <th>支付方式</th>
                                            <th>交易笔数</th>
                                            <th>交易金额(元)</th>
                                            <th>退款笔数</th>
                                            <th>退款金额(元)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                            <tr>
                                                <td>***001</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>4</td>
                                                <td>17.20</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***001</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>10</td>
                                                <td>3406</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***001</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>5</td>
                                                <td>813.01</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***002</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>8.80</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***002</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>13</td>
                                                <td>3280</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***002</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>6</td>
                                                <td>3346.56</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***003</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>116</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***003</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>5.80</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***004</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>3</td>
                                                <td>17.40</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***004</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>10</td>
                                                <td>2397</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***004</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>3</td>
                                                <td>709.28</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***005</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>2</td>
                                                <td>437.87</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***005</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>4</td>
                                                <td>1600</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***007</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>8</td>
                                                <td>2351</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***007</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>4</td>
                                                <td>20.20</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***007</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>5</td>
                                                <td>549.12</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***008</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>5</td>
                                                <td>6311</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***008</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>9</td>
                                                <td>2091.63</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***008</td>
                                                <td>挂号</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>5.80</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***009</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>2</td>
                                                <td>1142.03</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***009</td>
                                                <td>充值</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>60</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***014</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>422.11</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>***015</td>
                                                <td>处方</td>
                                                <td>银行卡支付</td>
                                                <td>1</td>
                                                <td>268.70</td>
                                                <td>0</td>
                                                <td>0</td>
                                            </tr>
                                            <tr>
                                                <td>合计 总机器数:10</td>
                                                <td>全部</td>
                                                <td></td>
                                                <td>100</td>
                                                <td>29376.51</td>
                                                <td>0</td>
                                                <td>0.00</td>
                                            </tr>
                                    </tbody>

</table> 
 
  </body>
</html>

 

以上是关于Vue实现table合并相同列的主要内容,如果未能解决你的问题,请参考以下文章

el-table合并列

Table中合并相同内容列+Excel中合并相同内容列。

vue+element ui table 合并列

vue实用demo使用表格(el-table)的span-method属性实现表格行合并

如何合并列中具有相同值的两个表

vue+iviewui实现表格合并(行列合并)