テーブルの内容でループ要素-UIをレンダリングする方法をVUE

ほとんどのフロントエンド開発者にとって、vuejs +要素-UIは、プロセス技術のフレームワークに不可欠なバックオフィスシステムの開発です。背景管理システムは、CRUDに使用するテーブルとフォームの最も一般的な形態です。

テーブルで使用される要素-UI

-場合el-tableエレメントが注入されdataたオブジェクトの配列の後にel-table-column使用してpropオブジェクトデータのNameプロパティに対応する鍵を用いて、充填することができるlabelテーブルの列名に定義された属性。あなたは使用することができwidth、列幅を定義する属性を。

すべてのパラメータを列挙に相当比較的少数例のパラメータがより便利である。この場合には、提示されるが、不確実なデータやパラメータが多い、道はこの列挙は適していませんA。

<テンプレート> 
    <IL- 表
      ：データ = "たtableData" 
      スタイル = "幅：100％"> 
      <EL-卓上列
        プロップ = "日付" 
        ラベル = "日期" 
        幅 = "180"> 
      </ EL-卓上カラム> 
      <EL-卓上列
        プロップ = "名前" 
        ラベル = "姓名" 
        幅 = "180"> 
      </ EL-テーブル列> 
      <EL-卓上カラム
        プロプ = "アドレス" 
        ラベル = "地址">
      </ EL-テーブル列> 
    </ EL-テーブル> 
  </テンプレート>

表形式でコンテンツをレンダリングするループエレメント-UI

フォームテーブルは、コードを見て、本体部分があるTBODY、サイクル離れて設定することができ、二つの部分、値THEADのヘッダ部分に分割されます。

<EL- 表
    ：データ = "rightsDate"     <！- > -データソース内のテーブル
      ボーダー
      ストライプ
      高さ =「713」
> 
      <EL-卓上列
          V - のために =「rightHeaderで情報」：キー=「info.key」<！ -セットヘッダデータソースサイクルをレンダリングする、対応する列プロパティフィールド名の内容は、次の形式で詳述するようにデータソース- > 
          ：プロパティ =「info.key」
          ：ラベル =「info.label」
         > 
             <=テンプレートスロットスコープ「スコープ」 > 
                   {{scope.row [scope.column.property]}}   <！ -コンテンツのレンダリング内部対応表- >
               </テンプレート>     

          <EL-テーブル列ラベル= "启用状态">
                <テンプレートスロットスコープ= "範囲"> 
                        <IL- スイッチ
                          Vの -model = "scope.row.ifUse" 
                          ：アクティブ -color = "ACT_COLOR" 
                          ：非アクティブ -color = "INACT_COLOR"> 
                        </ EL-スイッチ> 
                  </テンプレート> 
             </エル・テーブルのカラム> 
</ EL-表>

アナログデータソース表示：
 rightHeader：[ 
        { 
          ラベル： ''コード、
          キー： 'コード' 
        }、
        { 
          ラベル： '名前'、
          キー： '名前' 
        }、
        { 
          ラベル： '権限の説明'、
          キー： '説明' 
        } 
      ]、
rightsDate：[{
       "上記ID"：221、
       "コード"： "01" 、
       "名前"： "西洋開口権"、
       "説明"、 "許可の医師処方薬"、
      "ifUse"： "0" 
    }、{
       "ID"：222、
       "コード"： "02" 、
       "名前"： "ハーブオープン権利" 、
       "説明"： "医師薬草処方権限" 、
       "IFUSE"： "0" 
    }、{
       "上記IDに言及"：223 、
      「コード"：" 03 " "名"："医学オープン許可" "説明"："医者の薬の処方許可" " IFUSE "：" 0 " 
    }、{ " ID "：224 、
       "コード"：" 04「」名「：」麻酔オープン権利「」説明「：」麻酔権利の医師の処方箋」を、
      "ifUse"： "0" 
    }、
    { "ID"：225 、
       "コード"： "05" 、
       "名前"： "精一开立权限"
      
      、
       "説明"： "特権を規定誠一医師" 、
       "IFUSE"： "0" 
    } 
  ]

結果は：

テーブルの内容でループ要素-UIをレンダリングする方法をVUE

おすすめ