html+vue+element-ui のスムーズさを 1 分で体験

テクノロジーファン

HTMLウェブページ、知っておくべき
Youyou が開発した vue フロントエンドフレームワーク
エレメントテイクアウェイチームのフロントエンドUI

これをウェブページの<title>タグの下に追加します

<!-- スタイルをインポート -->
<link rel="スタイルシート" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

jsをインポート

htmlの下に<body>を追加します。

<!-- 開発バージョン、便利なコマンドライン警告を含む -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- コンポーネント ライブラリをインポートします-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

ファイルソース

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <!-- スタイルをインポート -->
    <link rel="スタイルシート" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<本文>

<div id="アプリ">
    <h1>{{ メッセージ }}</h1>
    <!-- <テンプレート>-->
    <el-テーブル
            :data="テーブルデータ"
            国境
            スタイル="幅: 100%">
        <el-テーブル列
                修理済み
                プロパティ="日付"
                label="日付"
                幅="150">
        </el-table-column>
        <el-テーブル列
                プロパティ="名前"
                label="名前"
                幅="120">
        </el-table-column>
        <el-テーブル列
                prop="州"
                label="州"
                幅="120">
        </el-table-column>
        <el-テーブル列
                プロパティ="city"
                label="市街地"
                幅="120">
        </el-table-column>
        <el-テーブル列
                prop="アドレス"
                label="住所"
                幅="300">
        </el-table-column>
        <el-テーブル列
                プロパティ="zip"
                label="郵便番号"
                幅="120">
        </el-table-column>
        <el-テーブル列
                固定="右"
                ラベル="操作"
                幅="100">
            <テンプレート スロット スコープ="スコープ">
                <el-button @click="handleClick(scope.row)" type="text" size="small">表示</el-button>
                <el-button type="text" size="small">編集</el-button>
            </テンプレート>
        </el-table-column>
    </el-table>
    <!-- </テンプレート>-->
</div>
<!-- 開発バージョン、便利なコマンドライン警告を含む -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- コンポーネント ライブラリをインポートします-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    var アプリ = 新しい Vue({
        el: '#app',
        データ： {
            メッセージ: 'Hello Vue!',
            テーブルデータ: [{
                日付: '2016-05-02'、
                名前: 王小湖、
                省: '上海'、
                都市: 普陀区、
                住所: '上海市普陀区金沙江路1518号'、
                郵便番号: 200333
            }, {
                日付: '2016-05-04'、
                名前: 王小湖、
                省: '上海'、
                都市: 普陀区、
                住所: '上海市普陀区金沙江路1517号'、
                郵便番号: 200333
            }, {
                日付: '2016-05-01'、
                名前: 王小湖、
                省: '上海'、
                都市: 普陀区、
                住所: '上海市普陀区金沙江路1519号'、
                郵便番号: 200333
            }, {
                日付: '2016-05-03'、
                名前: 王小湖、
                省: '上海'、
                都市: 普陀区、
                住所: '上海市普陀区金沙江路1516号'、
                郵便番号: 200333
            }]
        }
    });
</スクリプト>
</本文>
</html>

効果

ここに画像の説明を挿入

要約する

https://codesandbox.io/s/compassionate-rgb-kmcyx?file=/index.html にアクセスし、ソースコードをコピーして実行します。
実行方法<br /> コピーしてctrl+sを押して保存し、右側の小さなウィンドウで更新をクリックします
要素UI
https://element.eleme.cn/#/zh-CN/component/table
コンポーネントはたくさんあります。使用したい場合は、上の表照葫蘆畫瓢。

html+vue+element-ui のスムーズさを 1 分で体験する方法についての記事はこれで終わりです。html vue element-ui の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSSフローティングとフローティング解除について

>>: overflow:hidden の役割の詳細な説明 (オーバーフローの非表示、フロートのクリア、マージンの崩壊の解決)