关于vue项目中table表格动态纵向合并的问题

关于vue项目中table表格动态纵向合并的问题

一、简介

我们公司框架主要用的是vue，没有用UI框架，比如我们要实现这种表格。

第一种做法（数据内容固定的情况）

可以在 td 里面加 p 来实现：

HTML
<tr v-for="lest of PageList">
                        <td>{
   
   {lest.key.id}}</td>

                        <td width="186">
                            <p v-for="i of lest.list">{
   
   {i.name}}</p>
                                
                        </td>
                        <td>
                           <p v-for="i of lest.list">
                               {
   
   {i.age}}
                           </p>
                        </td>
        </tr>
        
CSS
			th,  
           	td {
                height: 35px;
                border: 1px solid rgb(194, 194, 194);
                text-align: center;
                vertical-align: middle;
                padding: 0;
                &:first-child {
                    border-left: 0;
                }
                &:last-child {
                    border-right: 0;
                }
                p {
                    border-bottom: 1px solid rgb(221, 219, 219);
                    padding: 7px;
                    margin: 0;
                    height: 35px;
                }
            }

这种做法比较简单，但是对数据内容固定，比较少的来说可以，如果数据比较多，那么表格不会根据内容自动撑开，所以会很麻烦。

第二种做法 （数据内容比较多，表格需要根据内容自动撑开）

这种做法需要处理后台返回的数据

JS
Manipulation() {
            for (var field in this.list[0]) {
                // 获取数据中的字段，也就是table中的column，只需要取其中一条记录的就可以了
                // 定义数据list的index
                var k = 0;
                while (k < this.list.length) {
                    // 增加字段-用于统计有多少重复值
                    this.list[k][field + "span"] = 1;
                    // 增加字段-用于控制显示与隐藏
                    this.list[k][field + "dis"] = "";
                    for (var i = k + 1; i <= this.list.length - 1; i++) {
                        // 判断第k条数据的field字段，与下一条是否重复
                        if (
                            this.list[k][field] === this.list[i][field] &&
                            this.list[k][field] !== ""
                        ) {
                            // 如果重复，第k条数据的字段统计+1
                            this.list[k][field + "span"]++;
                            // 设置为显示
                            this.list[k][field + "dis"] = "";
                            // 重复的记录，则设置为1，表示不跨行
                            this.list[i][field + "span"] = 1;
                            // 并且该字段设置为隐藏
                            this.list[i][field + "dis"] = "none";
                        } else {
                            break;
                        }
                    }
                    // 跳转到第i条数据的索引
                    k = i;
                }
            }
            console.log(this.list);
            
 HTML
           <tr v-for="lest of list">
                    <td
                        width="100"
                        :rowspan="lest.idspan"
                        :style="{ display: lest.iddis }"
                    >
                        {
   
   { lest.id }}
                    </td>
                    <td>{
   
   { lest.name }}</td>
                    <td width="100">{
   
   { lest.age }}</td>
             </tr>

第二种方法就比较好用，就是处理后台返回来的数据，整理有几个重复的字段，就是需要合并几行，然后把多余的隐藏掉就可以。
此提醒： 实现的这种方法主要是参考别人的 一个demo。