How to use Element-UI?

Mobile 2023-01-24 01:13:54 views: null

Article Directory

Element-UI overview

Element: It is a set of Vue-based website component library provided by the front-end development team of Ele.me, which is used to quickly build web pages.

Element provides many components (parts that make up web pages) for us to use. Such as hyperlinks, buttons, pictures, tables, etc.~

The left side of the picture below is the button we see when writing the page, and the right side of the picture above is the page effect provided by Element, and the effect is clear at a glance.

insert image description here

We learn Element is actually learning how to copy components from the official website to our own pages and modify them. The official website URL is

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

Enter the official website to see the following page

insert image description here

Next click directly 组件, the page is as follows

insert image description here

Element-UI Quick Start

When we use Element-UI, we first copy the officially downloaded resource package to the current project, and then import it.

Let's try to use it:

  1. Create a page and introduce Element's css, js files and Vue.js into the page

    <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. .Create Vue core object

    Element is based on Vue, so you must create a Vue object when using Element

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

  3. Copy the Element component code from the official website

    insert image description here

    Find it in the left menu bar Button 按钮, then find the button style you like, click 显示代码it, and the corresponding code will be displayed below, just copy the code to our own page.

The overall page code is as follows:

<!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 layout

Element provides two layout methods, namely:

  • Layout layout
  • Container layout container

Layout partial

Create layouts quickly and easily with basic 24 columns. That is, a row is divided into 24 columns by default, and the number of columns occupied by each column is set according to the page requirements.

insert image description here

Find it in the left menu bar Layout 布局, then find the button style you like, click 显示代码it, and the corresponding code will be displayed below. The displayed code has styles and html tags. Copy the style into the headtag and copy the html tag into the <div id="app"></div>tag.

The overall page code is as follows:

<!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>

Now you need to add a line, which requires the line to display 8 grids. By calculating, each grid occupies 3 columns. The specific html code is as follows

<!--
添加一行，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>

Container layout container

The container component used for layout is convenient for quickly building the basic structure of the page. The following figure is the layout container effect.

The following figure is an example of the Container layout container provided by the official website:

insert image description here

The effect code includes styles, page tags, and model data. <style>Copy the style inside to the headtag of our own page; copy the html tag to the <div id="app"></div>tag , and then copy the data model to the objectvue .data()

The overall page code is as follows:

<!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 component usage

Regarding the use of components, we practice through a case

Case introduction

We want to complete the following page effect

insert image description here

To complete the page, we need to analyze the page first to see where the page is composed, and then copy and modify it on the official website. The page has the following components in total

insert image description here

Another one is that when we click the 新增button , a dialog box will pop up in the middle of the page, as follows

Prepare the basic page

<!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>

Complete the form display

The overall idea of ​​using Element iscopy + modify.

copy

insert image description here

Find Table 表格and , the main body on the right will locate the table, find the table effect we need (as shown in the figure above), and click 显示代码to see the code of this table.

Copy the html tags <div id="app"></div>into , as follows:

insert image description here

Copy the css style to the headtag , as follows

insert image description here

Copy the method and model data to the location specified by the Vue object

insert image description here

After the copy is completed, open it through the browser to see the effect of the table

insert image description here

The table effect comes out, but the header and data displayed are not what we want, so the page code needs to be modified next.

Revise

  1. Modify header and data

    Below is an illustration of the analysis performed on the form code. Modify the number of columns and column names according to the instructions in the figure below

    After modifying the page, you need to modify the bound model data. The following figure is an illustration of the analysis of the model data

  2. Add an action column to the table

    Copy a column from the previous table and modify it. The button is copied and modified from the Button 按钮component

  3. Add checkbox column and label column to the table

    Add check boxes and label columns to the table, the effect is as follows

    insert image description here

    This effect is also copied from the official website of Element, first find the corresponding table effect, and then copy its corresponding code into our code, the following is the effect diagram and code of the official website of the check box column

    insert image description here

    It should be noted here that there is an event on the <el-table>tag . @selection-change="handleSelectionChange"The function bound here also needs to be copied from the official website to our own page code. The function code is as follows:

    insert image description here

    From this function, it is found that a model data multipleSelection is needed, so the model data needs to be defined

The label column is also copied and modified in the same way.

Complete search form display

Find the horizontal form effect on the Element official website, then copy the code and modify it

insert image description here

显示代码After clicking on the above, the corresponding code will be displayed, and the following is an illustration of the analysis of this part of the code

insert image description here

Then modify the code according to the effect we want.

Complete batch delete and add button display

Find a button with a coloring effect from the Element official website, and copy the code to our own page

insert image description here

Complete dialog display

Find the dialog box on the Element official website, as follows:

insert image description here

The code provided by the official website is analyzed below

insert image description here

The model data analyzed in the above figure needs to be defined in the Vue object.

Complete the pagination bar display

Find it on the official website of Element Pagination 分页, and find the effect we need in the main part of the page, as follows

insert image description here

Click 显示代码to find the 完整功能corresponding code, and then analyze the code

insert image description here

The above code attribute description:

  • page-size: number of entries to display per page

  • page-sizes: Display the option settings of the quantity selector on each page.

    :page-sizes="[100,200,300,400]"The corresponding page effect is as follows:

    insert image description here

  • currentPage: current page number. We click on that page number, and the value of this attribute is a few.

  • total:total. It is used to set the total number of data entries. After setting this property, Element will automatically calculate how many pages need to be divided and show us the corresponding page number.

Event description:

  • size-change:fired when the pageSize changes. That is, when we change the number of items displayed on each page, this event will trigger.
  • current-change:fired when the currentPage changes. That is, when we click on other page numbers, the event will be triggered.

full page code

<!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>

Guess you like

Origin blog.csdn.net/zyb18507175502/article/details/127054073
Recommended
Ranking
How to make the url of the picture have the download attribute and force the download. Jump browser to download automatically.
Lr CC 8.3 Installation Guide
MD5Utils (MD5 encryption tools! Unsalted)
Econ 325 (004)
Photo studio photography appointment app based on java SpringBoot and Vue uniapp
What is b
2017 Second Guangdong strong network Cup online game --Nonstandard
myeclipse8.5 add tomact7
mpeg1, mpeg2 and mpeg4 standard comparative analysis and summary
Tencent sub-sub-group 6-color program
Daily
More
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)
2024-04-16(23)

Code World

© 2018 codetd.com