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

高洛峰
リリース: 2016-12-03 14:25:46
オリジナル
1833 人が閲覧しました

前書き

私は 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 などのデータ駆動型フレームワークにも適用できます。テーブルのマージを実現したい場合は、リクエストによって返された値をフィルターするだけです。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート