VUEのiView申込書

　今日、我々は、使用iViewの表を見てください。この資料では、以下の内容を持っています

テーブルの一体部分（列データ）
（...ダイナミッククラスを追加し、スタイルに決定、）機能をレンダリング使用
スロットを使用してください

　主に関する一般的な使用、簡単に説明次の表をレンダリングします。公式ウェブサイトのアドレス：https://www.iviewui.com/components/table

　　一、colums、データ

　　ここで単純なテーブルであり、列は、型アレイの列を表します。データ型の配列を示すデータテーブル。

< テンプレート> 
    < 表：列= "columns1" ：データ= "DATA1" > </ 表> 
</ テンプレート> 
< スクリプト> 
    輸出デフォルト{ 
        データ（）{ 
            リターン{ 
                columns1：[ 
                    { 
                        タイトル：' 名前' 、
                        キー：' 名前' 
                    }、
                    { 
                        タイトル：'年齢' 
                        キー：' 年齢' 
                    }、
                    { 
                        タイトル：' 住所' 
                        キー：' アドレス' 
                    } 
                ]、
                DATA1：[ 
                    { 
                        名：' ジョン・ブラウン' 
                        年齢：18 、
                        アドレス：' ニューヨーク1号レイクパーク" 、
                        日付：' 2016年10月3日' 
                    }、
                    { 
                        名：' ジム・グリーン' 、
                        年齢：24 、
                        アドレス：' ロンドン1号湖公園' 、
                        日：' 2016年10月1日' 
                    }、
                    { 
                        名：「ジョー黒" 、
                        年齢：30 、
                        アドレス：「シドニー1号レイクパーク」、
                        日：「2016年10月2日」
                    }、
                    { 
                        名：「ジョン・スノー」、
                        年齢：26 、
                        アドレス：「オタワ2号レイクパーク」、
                        日付：' 2016- 10-04 ' 
                    } 
                ] 
            } 
        } 
    } 
</ スクリプト>

　　下記に示す共通の列は、私に多くのアドレスを教えてください。

　　次に、主な一般的に使用され、レンダリングを見てください。

　　二、レンダリング

　　カスタム列をレンダリングします。使用以下の例を参照してください。

　　1.シンプルな表示フォーマットされたコンテンツ

レンダリング：（H、paramsは）=> { 
    戻りH（ 'DIV'、this.formatDate（params.row.update））。
}

　　2. よると、条件付きリターン異なるDOM、スタイル、クラス、インタラクティブなイベントを追加

レンダリング：（H、paramsは）=> { 
    CONST =行params.row; 
    IF（row.status === 1）{//条件に応じて決定される
        H（ 'DIV'戻り、{ 
            スタイル：{ 
                カーソル'ポインタ' / /スタイルを追加
            、} 
            ON：{//イベントに追加
                ]をクリック：（E）=> { 
                    はconsole.log（ '私はリンクをジャンプしたい'）
                } 
            } 
        }、 'ビューを'）; 
    }他{ 
        H（ 'div要素'を返し、 { 
            クラス：//クラスを追加する'colorRed' 
        }、 '私はジャンプではなく、表示され'）; 
    } 
}

　　三、スロット

　　インタラクティブイベント及び動作のDOMをレンダリング使用して達成することができるだけでなく、スロットを用いて達成することができます。例を参照してください。

　　インタラクティブなイベントを書き込むと、通常は一貫したアプローチに。

　　我们用这个方法也可以实现修改正行数据。例子地址：https://run.iviewui.com/50ahQHrs

　　更多使用方法会继续更新上来，如有问题，欢迎留言

おすすめ