elementuiアセンブリテーブルテーブル、溶液は列に列をマージしながら

 

アイテムは、2つの行をマージするごとに3を実装して、すべての3×3を組み合わせ、この効果下図する必要があります。

コード：

EL-テーブル
      ：データ= "たtableData" 
      ：スパン方式= "arraySpanMethod" 
      境界
      スタイル= "幅：100％"> 
      < EL-テーブルカラム
         プロップ= "ID" 
        ラベル= "ID" 
        幅= "180" > 
      < / EL-テーブル列> 
      < EL-テーブル列の
         小道具= "名前" 
        ラベル= "姓名" > 
      </ EL-テーブル列> 
      < EL-テーブルカラム
         プロップ= "amount1"
        ソート可能な
        ラベル=「数值1」> 
      </ エル・テーブルのカラム> 
      < EL-テーブル列
         プロパ= "AMOUNT2" 
        ソート
        ラベル= "数值2" > 
      </ EL-テーブル列> 
      < EL-テーブルカラム
         プロップ= "amount3" 
        ソート
        ラベル= "数值3" > 
      </ EL -table列> 
    </ EL-テーブル>

VUE一部：

VARメイン= { 
    データ（）{ 
      リターン{ 
        たtableData：[{ 
          ID： '12987122' 、
          名称： '王小虎' 、
          amount1： '234' 、
          AMOUNT2： '3.2' 、
          amount3： 10 
        }、{ 
          ID： '12987123' 、
          名称： '王小虎' 、
          amount1： '165' 、
          AMOUNT2： '4.43' 、
          amount3： 12 
        }、{ 
          ID：'12987124'、
          名称： 'Xiaohu' 、
          amount1： '324' 、
          AMOUNT2： '1.9' 、
          amount3量の： 9 
        }、{ 
          ID： '12、987125' 、
          名称： 'Xiaohu' 、
          amount1： '621' 、
          AMOUNT2： '2.2' 、
          amount3量の： 17 
        }、{ 
          ID： '12、987126' 、
          名称： 'Xiaohu' 、
          amount1： '539' 、
          AMOUNT2： '4.1'、
          amount3： 15 
        }、{ 
          ID： '12987126' 、
          名称： '王小虎' 、
          amount1： '666' 、
          AMOUNT2： '4.1' 、
          amount3： 15 
        }、{ 
          ID： '12987126' 、
          名称： '王小虎' 、
          amount1 ： '777' 、
          AMOUNT2： '4.1' 、
          amount3： 15 
        }、{ 
          ID： '12987126' 、
          名：'王小虎' 、
          amount1： '888' 、
          AMOUNT2： '4.1' 、
          amount3： 15 
        }、{ 
          ID： '12987126' 、
          名称： '王小虎' 、
          amount1： '999' 、
          AMOUNT2： '4.1' 、
          amount3： 15 
        } ] 
      }。
    }、
    メソッド：{ 
      arraySpanMethod（{行、列、rowIndexに、columnIndexに}）{ 
        
        場合（columnIndexに=== 0 ）{
           もし、（（rowIndexプロパティ+ 1）％3 === 1）{
             リターン{ 
              ROWSPAN： 2 、
              COLSPAN： 1 
            }。
          } 他の 場合（（rowIndexプロパティ+ 1）％3 === 0 ）{
             戻り [1、3 ]。
          } 
        } 
      }、

      objectSpanMethod（{行、列、rowIndexに、columnIndexに}）{ 
        
      } 
    } 
  }。
VAR CTOR = Vue.extend（メイン）
 新しい CTOR（）。$マウント（ '＃アプリ'）