Element-UIの使い方

モバイル 2023-01-24 01:13:57 訪問数: null

記事ディレクトリ

要素 UI の概要

Element: Ele.me のフロントエンド開発チームが提供する Vue ベースの Web サイト コンポーネント ライブラリのセットで、Web ページをすばやく構築するために使用されます。

Element は、使用するための多くのコンポーネント (Web ページを構成するパーツ) を提供します。ハイパーリンク、ボタン、写真、表など〜

下の写真の左側はページを書くときに表示されるボタンで、上の写真の右側は Element によって提供されるページ効果で、効果は一目瞭然です。

ここに画像の説明を挿入

Elementは公式サイトから自分たちのページにコンポーネントをコピーして修正する方法を実際に学習していることがわかります. 公式サイトのURLは

https://element.eleme.cn/#/zh-CN

公式サイトに入ると次のページが表示されます

ここに画像の説明を挿入

次に直接クリックする组件と、ページは次のようになります

ここに画像の説明を挿入

要素 UI のクイック スタート

Element-UI を使用する場合は、公式にダウンロードしたリソース パッケージを現在のプロジェクトにコピーしてからインポートします。

それを使用してみましょう：

  1. ページを作成し、Element の css、js ファイル、および Vue.js をページに導入します

    <script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

  2. .Vue コア オブジェクトの作成

    Element は Vue に基づいているため、Element を使用する場合は Vue オブジェクトを作成する必要があります。

    <script>
    new Vue({
        
        
        el:"#app"
    })
</script>

  3. Element コンポーネントのコードを公式 Web サイトからコピーします。

    ここに画像の説明を挿入

    左側のメニューバーButton 按钮で見つけて、好きなボタンスタイルを見つけてクリック显示代码すると、対応するコードが下に表示されます。コードを独自のページにコピーするだけです.

全体的なページ コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <el-row>
     	<el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">删除</el-button>
    </el-row>
    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
      
      
        el:"#app"
    })
</script>

</body>
</html>

要素のレイアウト

Element には、次の 2 つのレイアウト方法があります。

  • レイアウト レイアウト
  • コンテナ レイアウト コンテナ

レイアウトの一部

基本的な 24 列でレイアウトをすばやく簡単に作成します。つまり、行はデフォルトで 24 列に分割され、各列が占める列数はページ要件に従って設定されます。

ここに画像の説明を挿入

左側のメニュー バーLayout 布局で見つけて、好きなボタン スタイルを見つけてクリック显示代码すると、対応するコードが下に表示されます. 表示されたコードには、スタイルと html タグが含まれています. スタイルを自分のページのheadタグコピーし、html タグをタグにコピーします<div id="app"></div>。

全体的なページ コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-row {
      
      
            margin-bottom: 20px;
        }
        .el-col {
      
      
            border-radius: 4px;
        }
        .bg-purple-dark {
      
      
            background: #99a9bf;
        }
        .bg-purple {
      
      
            background: #d3dce6;
        }
        .bg-purple-light {
      
      
            background: #e5e9f2;
        }
        .grid-content {
      
      
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
      
      
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
      
      
        el:"#app"
    })
</script>
</body>
</html>

ここで、8 つのグリッドを表示する行を追加する必要があります. 計算すると、各グリッドは 3 列を占有します. 具体的な html コードは次のとおりです.

<!--
添加一行，8个格子  24/8 = 3
-->
<el-row>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

コンテナ レイアウト コンテナ

レイアウトに使用されるコンテナ コンポーネントは、ページの基本構造をすばやく構築するのに便利です。次の図は、レイアウト コンテナーの効果です。

次の図は、公式 Web サイトで提供されているコンテナー レイアウト コンテナーの例です。

ここに画像の説明を挿入

エフェクト コードには、スタイル、ページ タグ、およびモデル データが含まれます。内部のスタイル<style>をhead自分のページのタグにコピーし、html タグを<div id="app"></div>タグにコピーし、データ モデルをオブジェクトvueにコピーします。data()

全体的なページ コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-header {
      
      
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
      
      
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-submenu index="2-1">
                        <template slot="title">选项1</template>
                        <el-menu-item index="2-1-1">选项1-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
      
      
        el:"#app",
        data() {
      
      
            const item = {
      
      
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
      
      
                tableData: Array(20).fill(item)
            }
        }
    })
</script>
</body>
</html>

Element-UI コンポーネントの使用

コンポーネントの使い方については、事例を通して実践しています

事例紹介

次のページ効果を完成させたい

ここに画像の説明を挿入

ページを完成させるには、まずページを分析してページがどこで構成されているかを確認し、それを公式 Web サイトにコピーして変更する必要があります。ページには合計で次のコンポーネントがあります

ここに画像の説明を挿入

もう1つは、新增ボタンと、次のようにダイアログボックスがページの中央にポップアップすることです。

基本ページを用意する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
      
      
        el: "#app"
    })
</script>
</body>
</html>

フォーム表示の完了

Element を使用する全体的な考え方は、コピー + 変更.

コピー

ここに画像の説明を挿入

左側のメニューバーを見つけTable 表格て、右側の本体がテーブルを見つけ、必要なテーブル効果を見つけ (上の図に示すように)、クリック显示代码してこのテーブルのコードを表示します。

次のように、html タグ<div id="app"></div>を にます。

ここに画像の説明を挿入

次のように、css スタイルを page のheadタグます。

ここに画像の説明を挿入

メソッドとモデル データを Vue オブジェクトで指定された場所にコピーします。

ここに画像の説明を挿入

コピーが完了したら、ブラウザで開いてテーブルの効果を確認します

ここに画像の説明を挿入

表の効果は出ますが、表示されるヘッダーやデータが思い通りにならないので、次にページコードを修正する必要があります。

改訂

  1. ヘッダーとデータの変更

    以下は、フォーム コードで実行された分析の図です。下の図の指示に従って、列の数と列名を変更します。

    ページを変更した後、バインドされたモデル データを変更する必要があります。次の図は、モデル データの分析の図です。

  2. テーブルにアクション列を追加する

    前のテーブルから列をコピーして変更します。ボタンは公式ウェブサイトのButton 按钮コンポーネント

  3. チェックボックス列とラベル列をテーブルに追加します

    テーブルにチェック ボックスとラベル列を追加すると、次のようになります。

    ここに画像の説明を挿入

    この効果も Element の公式 Web サイトからコピーされます。まず、対応する表の効果を見つけてから、対応するコードをコードにコピーします。以下は、チェック ボックス列の公式 Web サイトの効果図とコードです。

    ここに画像の説明を挿入

    ここで、<el-table>タグ.@selection-change="handleSelectionChange"ここでバインドされた関数も、公式ウェブサイトから独自のページコードにコピーする必要があります. 関数コードは次のとおりです:

    ここに画像の説明を挿入

    multipleSelection この関数から、モデル データが必要であることがわかり、モデル データを定義する必要があります。

ラベル列も同様にコピーして修正します。

完全検索フォーム表示

Element の公式 Web サイトで水平フォーム効果を見つけ、コードをコピーして変更します。

ここに画像の説明を挿入

上記显示代码を対応するコードが表示されます。以下は、コードのこの部分の分析の図です。

ここに画像の説明を挿入

次に、必要な効果に応じてコードを変更します。

完全一括削除・追加ボタン表示

Elementの公式サイトからカラーリング効果のあるボタンを見つけて、コードを自分のページにコピーします

ここに画像の説明を挿入

ダイアログ表示完了

次のように、Element の公式 Web サイトでダイアログ ボックスを見つけます。

ここに画像の説明を挿入

公式ウェブサイトで提供されているコードを以下に分析します

ここに画像の説明を挿入

上の図で分析されたモデル データは、Vue オブジェクトで定義する必要があります。

ページネーション バーの表示を完成させる

Element の公式 Web サイトでPagination 分页見つけて、次のように、ページの主要部分で必要な効果を見つけます。

ここに画像の説明を挿入

クリック显示代码して完整功能対応するコードを分析します

ここに画像の説明を挿入

上記のコード属性の説明:

  • page-size: 1 ページに表示するエントリ数

  • page-sizes: 各ページに数量セレクターのオプション設定を表示します。

    :page-sizes="[100,200,300,400]"対応するページ効果は次のとおりです。

    ここに画像の説明を挿入

  • currentPage: 現在のページ番号。そのページ番号をクリックすると、この属性の値は少数です。

  • total：合計。これは、データ エントリの総数を設定するために使用されます。このプロパティを設定すると、Element は、分割する必要があるページ数を自動的に計算し、対応するページ番号を表示します。

イベントの説明:

  • size-change:pageSize が変更されたときに発生します。つまり、各ページに表示されるアイテムの数を変更すると、このイベントがトリガーされます。
  • current-change: currentPage が変更されたときに発生します。つまり、他のページ番号をクリックすると、イベントがトリガーされます。

フルページコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
      
      
            background: oldlace;
        }
        .el-table .success-row {
      
      
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>
    
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>

</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
      
      
        el: "#app",
        methods: {
      
      
            tableRowClassName({
       
       row, rowIndex}) {
      
      
                if (rowIndex === 1) {
      
      
                    return 'warning-row';
                } else if (rowIndex === 3) {
      
      
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
      
      
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
      
      
                console.log(this.brand);
            },
            // 添加数据
            addBrand(){
      
      
                console.log(this.brand);
            },
            //分页
            handleSizeChange(val) {
      
      
                console.log(`每页 ${ 
        val} 条`);
            },
            handleCurrentChange(val) {
      
      
                console.log(`当前页: ${ 
        val}`);
            }
        },
        data() {
      
      
            return {
      
      
                // 当前页码
                currentPage: 4,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,

                // 品牌模型数据
                brand: {
      
      
                    status: '',
                    brandName: '',
                    companyName: '',
                    id:"",
                    ordered:"",
                    description:""
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
      
      
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
      
      
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
      
      
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
      
      
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        }
    })
</script>
</body>
</html>

おすすめ

転載: blog.csdn.net/zyb18507175502/article/details/127054073
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com