elementUIテーブルはデータを示しています

elementUI公式文書データが死の形で書かれている、いないサイクルは、今見て合理化。

1.たtableDataを定義します

たtableData：[
        DATE {： "2010年1月2日"、名称： "ヒッヒッヒ"、アドレス"広州天河東圃" }、
        DATE {： "2010年1月2日"、名称： "ヒッヒッヒ"、アドレス"広州天河東圃" }、
        DATE {：「2010年1月2日」、名称：「ヒッヒッヒ」、アドレス「広州天河東圃」}
      ]、

2.小道具、ラベル、幅を含める必要が幅tableColを定義します。いいえwidth属性ならば、それはの残りの部分を占有します

 tableCol：[
        {小道具： "日付"、ラベル"日期"、幅：180 }、
        {小道具： "名前"、ラベル"姓名"、幅：200 }、
        {小道具： "アドレス"、ラベル"地址" }
      ]

制御動作の表示、非表示の列。アクション列は、内側のみ死んEL-欄に書くことができます

showOper：真、

完全な例：

< テンプレート> 
  < divの> 
    < EL-テーブル：データ= "たtableData" スタイル= "幅：100％" ボーダー> 
      < エル・テーブルのカラム
         V-のための= "（アイテム、ⅰ）tableCol中" 
        ：キー= "I " 
        ：プロペラ=" item.prop " 
        ：ラベル= "item.label" 
        ：幅= "item.width" 
      > </ EL-テーブル列> 
       < EL-テーブル列ラベル= "操作" V-IF =" showOper」> 
      <テンプレートスロットスコープ=「範囲」>
        < EL-ボタン
           サイズ= "ミニ" 
          @click = "handleEdit（スコープ。$インデックス、scope.row）" >编辑</ EL-ボタン> 
        < EL-ボタンの
           サイズ= "ミニ" 
          タイプ= "危険" 
          @click = "handleDelete（スコープ。$インデックス、scope.row）" >删除</ EL-ボタン> 
      </ テンプレート> 
    </ エル・テーブルのカラム> 
    </ エル・テーブル> 
  </ DIV > 
</ テンプレート>
< スクリプト>
輸出のデフォルト{
  名前：" HelloWorldの" 、
  データ（）{
    リターン{
      showOper：真、
      たtableData：[
        DATE {：" 2010年1月2日" 、名称：" ヒッヒッヒ" 、アドレス：" 広州天河東圃" }、
        DATE {：" 2010年1月2日" 、名称：" ヒッヒッヒ" 、アドレス：" 広州天河東圃" }、
        DATE {：「2010年1月2日」、名称：「ヒッヒッヒ」、アドレス：「広州天河東圃」}
      ]、
      tableCol：[
        {小道具：" 日付" 、ラベル：" 日期" 、幅：180 }、
        {小道具：" 名前" 、ラベル：" 姓名" 、幅：200 }、
        {小道具：" アドレス" 、ラベル：" 地址" }
      ]
    }。
  }、
  方法：{
      handleEdit（インデックス、行）{
        console.log（インデックス、行）。
      }、
      handleDelete（インデックス、行）{
        console.log（インデックス、行）。
      }
  }、
}。
</ スクリプト> 
< スタイルLANG = "CSSは" スコープ> 
</ スタイル>

elementUIテーブルはデータを示しています

おすすめ