表格合并的方法

css：

<style type="text/css">
            table{
                
            }
            tr,td{
                border: 1px solid black;
                width: 30px;
                text-align: center;
            }
            .hidden{
                display: none;
            }
        </style>

html:

<div id="app">
            <table>
                <tr v-for="item in listdata">
                    <td width="3%" :rowspan="item.namespan" :class="{hidden: item.namedis}">{{item.name}}</td>
                    <td width="10%" :rowspan="item.favspan" :class="{hidden: item.favdis}">{{item.fav}}</td>
                    <td width="5%"  :rowspan="item.showspan"      :class="{hidden: item.showdis}">{{item.show}}</td>
                    <td width="5%"  :rowspan="item.textspan"      :class="{hidden: item.textdis}">{{item.text}}</td>
                </tr>
            </table>
        </div>

script:

<script type="text/javascript">
            
            var app = new Vue({
              el: '#app',
              data: {
                list:[
                    {
                        "name": "Name1",
                        "fav": 100,
                        "show": 7302,
                        "text":15,
                    },
                    {
                        "name": "Name10",
                        "fav": 0,
                        "show": 7302,
                        "text":125,
                    },
                    {
                        "name": "Name10",
                        "fav": 0,
                        "show": 7302,
                        "text":15,
                    },
                    {
                        "name": "Name10",
                        "fav": 0,
                        "show": 7302,
                        "text":15,
                    },
                    {
                        "name": "Name11",
                        "fav": 1,
                        "show": 73022,
                        "text":152,
                    },
                    {
                        "name": "Name10",
                        "fav": "",
                        "show": 7302,
                        "text":153,
                    },
                    {
                        "name": "Name10",
                        "fav": "",
                        "show": 7302,
                        "text":15,
                    },
                    {
                        "name": "Name10",
                        "fav": "",
                        "show": 7302,
                        "text":15,
                    }
                ],
                listdata:[]
              },
              methods:{
                  combineCell:function(list) {
                      var field
                    for (field in list[0]) {
                        console.log(field)
                        var k = 0;
                        while (k < list.length) {
                            list[k][field + 'span'] = 1;
                            list[k][field + 'dis'] = false;
                            for (var i = k + 1; i <= list.length - 1; i++) {
                                if (list[k][field] == list[i][field] && list[k][field] !== '') {
                                    list[k][field + 'span']++;
                                    list[k][field + 'dis'] = false;
                                    list[i][field + 'span'] = 1;
                                    list[i][field + 'dis'] = true;
                                } else {
                                    break;
                                }
                            }
                            k = i;
                        }
                    }
                    return list;
                }
              },
              mounted:function(){
                  this.listdata=this.combineCell(this.list)
                  console.log(this.listdata)
              }
            })
        </script>

这个是基于vue的表格合并代码

效果：

 

转载于:https://www.cnblogs.com/july-lin/p/9447570.html