vue.js はテーブル結合サンプルコードを実装します

前書き

私は Vue を使用しているので、MVVM はデータ駆動型である必要があると考えています。そのため、データをレンダリングしてから DOM 操作を行うのではなく、モデル内でトリックを実行することを検討しています。もちろん、基本的な CSS は依然として必要です。したがって、この方法は、Angular や React などのすべてのデータ駆動型フレームワークに有効です。

実装アイデア

元の通常のテーブルのコードは次のようになります:

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="15%">{{item.bsO_Name}}</td>
 <td width="8%" :class="{&#39;overtime&#39;: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%">{{item.F1}}</td>
 <td width="5%">{{item.F2}}</td>
 <td width="5%">{{item.F4}}</td>
 <td width="5%">{{item.F3}}</td>
 <td width="5%">{{item.F5}}</td>
 <td width="5%">{{item.F6}}</td>
 <td width="5%">{{item.F7}}</td>
 <td width="5%">{{item.F8}}</td>
 <td width="5%">{{item.F9}}</td>
 <td width="5%">{{item.F10}}</td>
</tr>

まず、ネイティブの タグには、セル行の結合をサポートする rowspan 属性があります。できるだけ多くの行を下方向に結合することは、実際には、この行の下方向にさらにいくつかのセルを追加することと同じです。

次の行がまだレンダリングされている場合は、押し出されてしまうため、以下の結合されたセルを非表示にする必要があります。これは、display: none; css で制御できます。

したがって、各 ラベルには、結合される行の数と各セルを表示するかどうかを制御するために、rowspan と display という 2 つの属性値が必要です。

コードは次のようになります

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td>
 <td width="8%" :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%" :rowspan="item.F1span"  :class="{hidden: item.F1dis}">{{item.F1}}</td>
 <td width="5%" :rowspan="item.F2span"  :class="{hidden: item.F2dis}">{{item.F2}}</td>
 <td width="5%" :rowspan="item.F3span"  :class="{hidden: item.F3dis}">{{item.F3}}</td>
 <td width="5%" :rowspan="item.F4span"  :class="{hidden: item.F4dis}">{{item.F4}}</td>
 <td width="5%" :rowspan="item.F5span"  :class="{hidden: item.F5dis}">{{item.F5}}</td>
 <td width="10%" :rowspan="item.F6span"  :class="{hidden: item.F6dis}">{{item.F6}}</td>
 <td width="8%" :rowspan="item.F7span"  :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td>
 <td width="5%" :rowspan="item.F8span"  :class="{hidden: item.F8dis}">{{item.F8}}</td>
 <td width="5%" :rowspan="item.F9span"  :class="{hidden: item.F9dis}">{{item.F9}}</td>
 <td width="5%" :rowspan="item.F10span"  :class="{hidden: item.F10dis}">{{item.F10}}</td>
 <td width="5%" :rowspan="item.F11span"  :class="{hidden: item.F11dis}">{{item.F11}}</td>
</tr>

その中で、これらの2つの属性にはいくつかの特徴があります:

表示されるセルの行幅は>1の値であり、次の行数が記録されます

表示されるセルの表示は true です

表示されていない次のセルの行幅は 1 で、表示は false です

データが 1 行だけあるセルの行幅は 1 で、表示はtrue

実際には、入力テーブル配列に対して、各データ項目に2つの属性、rowspanとdisplayを追加し、rowspan値が

以下の同じ値である行の数を計算するためのアルゴリズムを設計することです。この列に、rowspan 値に基づいて表示値が表示されるかどうかを計算し、最後に変更された配列が出力されます。

サンプルコードを解く

function combineCell(list) {
 for (field in list[0]) {
  var k = 0;
  while (k < list.length) {
   list[k][field + &#39;span&#39;] = 1;
   list[k][field + &#39;dis&#39;] = false;
   for (var i = k + 1; i <= list.length - 1; i++) {
    if (list[k][field] == list[i][field] && list[k][field] != &#39;&#39;) {
     list[k][field + &#39;span&#39;]++;
     list[k][field + &#39;dis&#39;] = false;
     list[i][field + &#39;span&#39;] = 1;
     list[i][field + &#39;dis&#39;] = true;
    } else {
     break;
    }
   }
   k = i;
  }
 }
 return list;
}

概要

このコードは、主に、ポインター k を定義し、最初の値を指し始める kmp の考えに基づいています。を下方向に比較し、rowspan と表示設定については、

異なる値があった場合は飛び出しと判断し、ポインタ k に行数を加えて通知します。プロセスで計算されると、ジャンプが実行され、次に次のセルの値が比較されます。これは、同じ文字列を決定する kmp のポインター ジャンプと同じ原理です。

combineCell() 関数を使用して、ネットワーク リクエストから返されたデータをフィルターし、対応する値を追加して、その値を vue によって監視される配列に割り当てます。

実際、このメソッドは vue だけでなく、Angular や React などのデータ駆動型フレームワークにも適用できます。テーブルのマージを実現したい場合は、リクエストによって返された値をフィルターするだけです。