20220722_使用Element UI写html页面

原创 已于 2022-07-22 00:26:54 修改 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui #html #vue.js #elementui

于 2022-07-22 00:26:34 首次发布
本文介绍了如何利用Element UI库来构建HTML页面，通过Element官网获取组件资源，并提供了从下载到实际应用的步骤，包括四个不同的页面示例。

Element官网component资源点击这里
结构图，element-ui自行下载复制到一致路径
请添加图片描述

第一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <el-row>
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
    </el-row>

    <el-row>
        <el-button plain>Plain</el-button>
        <el-button type="primary" plain>Primary</el-button>
        <el-button type="success" plain>Success</el-button>
        <el-button type="info" plain>Info</el-button>
        <el-button type="warning" plain>Warning</el-button>
        <el-button type="danger" plain>Danger</el-button>
    </el-row>

    <el-row>
        <el-button round>Round</el-button>
        <el-button type="primary" round>Primary</el-button>
        <el-button type="success" round>Success</el-button>
        <el-button type="info" round>Info</el-button>
        <el-button type="warning" round>Warning</el-button>
        <el-button type="danger" round>Danger</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>```

请添加图片描述
第二个

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

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

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

请添加图片描述
第三个

<!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>Navigator One</template>
                    <el-menu-item-group>
                        <template slot="title">Group 1</template>
                        <el-menu-item index="1-1">Option 1</el-menu-item>
                        <el-menu-item index="1-2">Option 2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group 2">
                        <el-menu-item index="1-3">Option 3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">Option4</template>
                        <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
                    <el-menu-item-group>
                        <template slot="title">Group 1</template>
                        <el-menu-item index="2-1">Option 1</el-menu-item>
                        <el-menu-item index="2-2">Option 2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group 2">
                        <el-menu-item index="2-3">Option 3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">Option 4</template>
                        <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
                    <el-menu-item-group>
                        <template slot="title">Group 1</template>
                        <el-menu-item index="3-1">Option 1</el-menu-item>
                        <el-menu-item index="3-2">Option 2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group 2">
                        <el-menu-item index="3-3">Option 3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">Option 4</template>
                        <el-menu-item index="3-4-1">Option 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>View</el-dropdown-item>
                        <el-dropdown-item>Add</el-dropdown-item>
                        <el-dropdown-item>Delete</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>Tom</span>
            </el-header>

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="Date" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="Name" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="Address">
                    </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: 'Tom',
                address: 'No. 189, Grove St, Los Angeles'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    })

</script>
</body>
</html>

请添加图片描述
第四，最后一个

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

    <!--Search Form-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="Status Now">
            <el-select v-model="brand.Status" placeholder="Status Now">
                <el-option label="Enable" value="1"></el-option>
                <el-option label="Disable" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="Company">
            <el-input v-model="brand.Company" placeholder="Company"></el-input>
        </el-form-item>

        <el-form-item label="Brand">
            <el-input v-model="brand.Brand" placeholder="Brand"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Query</el-button>
        </el-form-item>
    </el-form>

    <el-row>
        <el-button type="danger" plain>Batch Delete</el-button>
        <el-button type="primary" @click="dialogVisible = true" plain>Add New</el-button>
    </el-row>
    <!--dialog form-->
    <el-dialog
            title="Edit Brand"
            :visible.sync="dialogVisible"
            width="30%"
            >

        <el-form ref="form" :model="brand" label-width="120px">
            <el-form-item label="Brand">
                <el-input v-model="brand.Brand"></el-input>
            </el-form-item>
            <el-form-item label="Company">
                <el-input v-model="brand.Company"></el-input>
            </el-form-item>
            <el-form-item label="Ordered">
                <el-input v-model="brand.Ordered"></el-input>
            </el-form-item>
            <el-form-item label="Remark">
                <el-input type="textarea" v-model="brand.Description"></el-input>
            </el-form-item>
            <el-form-item label="Status">
                <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">Create</el-button>
                <el-button @click="dialogVisible = false">Cancel</el-button>
            </el-form-item>
        </el-form>

<!--        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>-->
  </span>
    </el-dialog>


    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    align="center"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="Brand"
                    label="Brand"
                    align="center"
                    >
            </el-table-column>
            <el-table-column
                    prop="Company"
                    label="Company"
                    align="center"
                    >
            </el-table-column>
            <el-table-column
                    prop="Ordered"
                    label="Ordered"
                    align="center"
                    >
            </el-table-column>
            <el-table-column
                    prop="Status"
                    label="Status"
                    align="center">
            </el-table-column>

            <el-table-column

                    label="Operation"
                    align="center">

                <el-row>
                    <el-button type="primary">Edit</el-button>
                    <el-button type="danger">Delete</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </template>

    <!--pagination-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            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 '';
            },
            /*multi selection be selected , do this method*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
                /*output the multiple selection see how it is, on browser F12 page*/
                console.log(this.multipleSelection)
            },
            /*for search form, click submit button, see output on browser F12 page */
            onSubmit() {
                console.log(this.brand);
            },

            addBrand(){
                console.log(this.brand)
            },

            /*for pagination*/
            handleSizeChange(val) {
                console.log(`${val} items per page`);
            },
            handleCurrentChange(val) {
                console.log(`current page: ${val}`);
            }

        },
        data() {
            return {
                /*for pagination*/
                currentPage4: 4,

                /*for pop dialog form*/
                dialogVisible: false,

                /*for search form data, and for form in dialog*/
                brand: {
                    Id: '',
                    Brand: '',
                    Company: '',
                    Ordered: '',
                    Description: '',
                    Status: ''
                },

                /*for multi selection box */
                multipleSelection:[],

                tableData:  [{
                    Brand: 'IDEA',
                    Company: 'JetBrain',
                    Ordered: 'No. 189',
                    Status: '1'
                }, {
                    Brand: 'IDEA',
                    Company: 'JetBrain',
                    Ordered: 'No. 189',
                    Status: '1'
                }, {
                    Brand: 'IDEA',
                    Company: 'JetBrain',
                    Ordered: 'No. 189',
                    Status: '1'
                }, {
                    Brand: 'IDEA',
                    Company: 'JetBrain',
                    Ordered: 'No. 189',
                    Status: '1'
                }]

            }
        }

    })

</script>

</body>
</html>

请添加图片描述

前端技术(27) : 纯HTML使用Element UI
Lxinccode的博客
02-13 979
安装完成之后在node_modules文件夹找到element-ui, 将其中的lib文件夹复制到工程目录, 改名为element-ui即可。
Element-ui v2.15.13离线文档 解压后 双击index.html即可
09-12
该组件库遵循谷歌的Material Design设计规范，因此，使用Element-ui开发的应用程序不仅在功能上强大，而且在视觉上也具有良好的用户体验。 Element-ui包含了丰富的Web组件，涵盖了表单、表格、按钮、对话框、导航...
html element
05-22
html element. 网页设计，标准html element，
静态Html、jsp、php等使用element ui最简单直观例子（含table/对话框服及js/css等）
12-04
静态Html、jsp、php等使用element ui 的最简单直观联系，含table样例/对话框样例及所有 js css和图标，学习前台框架很好的入门资源
element-ui动态渲染表格.html
04-01
element-ui动态渲染表格
在html中使用elementui
qq_25741071的博客
08-26 1万+
最近项目有要求不通过脚手架的方法使用element，然后试一下下面的方法可以使用。ps:可以把js以及css下载下来，这样就不用每次打开页面就去请求一次。
vue-element-hello word
xie__jin__cheng的博客
06-21 567
1.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"&g.
精选资源
HTML+Element-ui邮件管理前端界面
07-12
-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index....
精选资源
element-ui 2.15.14, 静态资源版本, 纯HTML可用
最新发布
02-13
它的静态资源版本则进一步拓宽了Element UI的使用场景，使得不依赖Vue框架的纯HTML页面也能享受到Element UI带来的便利。因此，无论是在Vue项目中，还是在其他静态HTML页面中，Element UI都是一个值得考虑的前端UI...
如何在HTML项目中使用ElementUI组件
小飞的学习笔记的博客
12-26 1万+
如何在非Vue脚手架创建的HTML项目中使用ElementUI
单文件HTML本地引入elementUI
04-18
单文件HTML本地引入elementUI
HTML使用Element-UI制作管理系统页面（无需脚手架以及创建vue工程）
qq_44229840的博客
07-12 1万+
入职培训到Web前端后布置了一个制作管理系统前端页面的任务，任务要求包含： 1.页面的布局主要为左侧导航菜单栏，右侧为信息展示栏，要体现嵌套 2.点击菜单栏切换右侧信息展示时左侧菜单栏不能刷新（使用iframe） 3.菜单栏需要做到能够动态伸缩 4.能够显示表格（添加table组件） 5.升级：添加button等对表格进行增删等操作由于自己前端很少接触，所以从来没有...
html怎么使用element ui,element-ui是什么，以及element-ui如何使用
weixin_31290899的博客
06-10 1381
一，什么是element-uielement-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库，而手机端有对应框架是Mint UI。整个ui风格简约，很实用，同时也极大的提高了开发者的效率，是一个非常受欢迎的组件库。二，element-ui的使用1. 安装，推荐使用npm安装方式命令：npm install element-ui -save2...
html使用elementui案例
weixin_52236586的博客
05-23 1105
【代码】html使用elementui案例。
html 引入vue Element ui 的方式
qq_44146522的博客
04-12 3532
html 引入vue Element ui 的方式
html项目引入element-ui
细雨纷飞~~~
02-24 1万+
1.html 页面外部的 element-ui <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.j
element ui html,element-ui简洁版
weixin_35724794的博客
06-11 378
vue初始化一个项目vue create 项目名【element-ui-form】cd 项目名【element-ui-form】npm run serve 运行安装element-ui框架npm install --save element-ui在main.js里面引入element-ui和// 引入两个element-ui文件 ElementUI和index.cssimport Element...
html中直接使用element-ui
热门推荐
阳光大男孩！！！的博客
07-30 2万+
element-ui是饿了么团队基于Vue开发的组件库，所以若要直接在html中使用，需要挂载vue的js文件。 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 使用element-ui也可以也可以直接挂载 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/l
用element写一个简单的页面
qq_58024411的博客
08-09 379
在之前的文章当中我写了vue，element相关的基础，本次实战，用element写一个页面。本次实现的页面ui
html页面如何使用element ui
09-12
要在HTML页面中使用Element UI，需要按照以下步骤进行设置： 1. 首先，确保你已经引入了Vue.js。你可以通过在HTML页面中添加以下代码来引入Vue.js： ```html <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ``` 2. 接下来，你需要下载并引入Element UI的CSS和JS文件。你可以从Element UI的官方网站（https://element.eleme.cn）下载文件，或者使用CDN链接。在HTML页面中添加以下代码引入Element UI的CSS和JS文件： ```html <!-- 引入Element UI的CSS文件 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入Element UI的JS文件 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 3. 确保Vue.js和Element UI的文件都已经引入后，你可以开始在HTML页面中使用Element UI组件了。在Vue实例的`template`中，使用Element UI提供的组件标签即可。例如，要使用一个按钮组件，可以在`template`中添加以下代码： ```html <el-button type="primary">按钮</el-button> ``` 4. 最后，需要在Vue实例中注册Element UI的组件。你可以通过在Vue实例的`components`属性中注册所需的组件。例如，如果你要使用按钮组件，在Vue实例中添加以下代码： ```javascript new Vue({ el: '#app', components: { 'el-button': ElementUI.Button } }); ``` 这样，你就可以在HTML页面中使用Element UI的组件了。记得将`#app`替换为你实际的根元素选择器。 希望对你有所帮助！如果还有其他问题，请继续提问。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值