Vue プロジェクトにおけるテーブルの動的垂直マージに関する質問

Vue プロジェクトにおけるテーブルの動的垂直マージに関する質問

1. はじめに

弊社のフレームワークはUIフレームワークではなくvueを主に使っており、例えばこんなフォームを実装したいと考えています。

1つ目の方法（データ内容が固定の場合）

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;
                }
            }

この方法は比較的簡単ですが、データの内容が固定していて比較的小さい場合は大丈夫ですが、データが多いと内容に応じてテーブルが自動的に開かれないので非常に面倒です。

2 番目の方法 (データ内容が多いため、内容に応じてテーブルを自動的に開く必要があります)

このアプローチでは、バックグラウンドで返されたデータを処理する必要があります。

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>

2 番目の方法はより使いやすく、バックグラウンドから返されたデータを処理し、複数の繰り返しフィールドを整理し、複数の行を結合して冗長な行を非表示にするだけです。
注意: このメソッドの実装は主に他の人のデモを参照することを目的としています。