Element快速入门

已于 2023-07-16 10:29:52 修改
阅读量327 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2023-07-16 10:26:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50305029/article/details/131747722
版权

将 element-ui 文件夹直接拷贝到项目的 webapp 下。目录结构如下

 创建页面，并在页面引入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">

.创建Vue核心对象

Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象

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

官网复制Element组件代码

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

Element 提供了两种布局方式，分别是：

  • Layout 布局

  • Container 布局容器

Layout 局部

通过基础的 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>

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <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>

清浅7
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
非常棒的 Vue3 Element 系统解决方案 vue3快速入门、vue3实用入门到熟练实例
08-26
非常棒的 Vue3 Element 统解决方案 vue3快速入门、vue3实用入门到熟练实例 学习了vue3官网、看了视频好像感觉知道了，但实际又不会建项目。这个项目就是上你从入门到熟练的实例。 该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统开发。基于 Vue3，使用 vue-cli3 脚手架，引用 Element 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。 Element 登录/注销 Dashboard 表格 Tab 选项卡 表单 图表 富文本编辑器 图片拖拽/裁剪上传 权限测试 404 / 403 三级菜单 自定义图标 国际化 npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn // 开启服务器，浏览器访问 http://localhost:8080 npm run dev // 执行构建命令，生成的dist文件夹放在服务器下即可访问 npm run build
Element-UI快速入门
12-31
Element-UI快速入门，快速制作精美网页 。
Element使用教程
最新发布
weixin_62438322的博客
05-11 440
1.安装npm安装推荐使用 npm 的方式安装，它能更好地和打包工具配合使用CDN域名目前可以通过获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看。
ExtJS快速入门指南.pdf
01-15
一、ExtJS 框架简介...............................................................................................................3 二、如何使用Ext.................................................................................................................. 3 三、Ext 组件......................................................................................................................... 4 1、组件简介...................................................................................................................4 2、组件XType............................................................................................................... 5 3、组件应用...................................................................................................................5 4、组件配置选项........................................................................................................... 6 5、组件属性...................................................................................................................7 6、组件方法...................................................................................................................8 四、事件及事件响应............................................................................................................. 8 五、Component 及Container 简介........................................................................................ 11 1、Ext.Component........................................................................................................ 11 2、Ext.Comtainer.......................................................................................................... 12 六、面板Ext.Panel.............................................................................................................. 12 面板Panel 简介............................................................................................................ 12 面板内容...................................................................................................................... 14 面板与DOM 节点DIV................................................................................................. 15 七、ViewPort....................................................................................................................... 16 八、窗口Window................................................................................................................ 18 九、对话框.......................................................................................................................... 20 十、TabPanel....................................................................................................................... 24 十一、布局.......................................................................................................................... 28 十二、表格Grid.................................................................................................................. 31 十三、TreePanel.................................................................................................................. 32 十四、表单Form................................................................................................................. 34 十五、理解Html DOM、Ext Element 及Component............................................................ 36 十六、Ext 类中的get 方法简介........................................................................................... 37 十七、如何学习及掌握Ext..................................................................................................39
vue-element-quick-start:Vue2，Vuex 3，Vue路由器3，Element-ui和Typescript SPA项目快速入门套件（Vue element ui快速开始脚手架）
03-07
Vue Element UI快速入门 项目设置 yarn install $ yarn global add pm2 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 运行端到端测试 yarn run test:e2e 运行单元测试 yarn run test:unit 自定义配置 请参阅。 Element UI官方网站 请参阅 。 页面截屏 项目结构 . ├── public/ # public files │ └── ... ├── server/ # node server files │ ├── controller # no
初识Vue&ElementUI
热爱编程、热爱生活、热爱探索
10-14 1673
Vue是什么？Vue的作用是什么？什么是MVVM？引入vue.js库编写html测试 废话不多说直接上代码： 效果展示：常见Vue指令：和代码演示： 能够实现动态获取url，相比于原生的href显得更加灵活测试结果：代码演示： 效果演示：指令代码演示：和的效果是一样的，只要当v-show中条件满足就会展示标签中的内容两者的主要区别： 效果展示：的代码展示：基本语法： 备注：哪个标签要遍历，就添加在哪个标签上，标签遍历多少次，就会在网页上生成多少个标签 效果展示：生命周期的八个阶段：创建前/后，载入前/后
vue 和 elmentui开发后台系统项目总结
qq_38686150的博客
08-17 701
当我们用elment el-aside el-header 进行布局 组件和边框是有间距的 当你使用NavMenu 导航菜单 是无法全屏的 当你屏幕缩小时内容会被压缩 设置最小宽度 有滚动条保证内容完整显示 // 在mian.js global.css (全局的引入) html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; min-width: 1366px; } .
Elment-UI组件
weixin_53197992的博客
08-30 186
Element UI是一个基于Vue.js的前端组件库，它提供了丰富的UI组件和工具，用于构建现代化的Web应用程序。大量可定制的UI组件：Element UI提供了众多常用的UI组件，如按钮、表格、表单、弹窗等，每个组件都具有丰富的选项和样式定制能力。Form组件用于收集和验证用户输入的数据。强大的主题定制能力：开发者可以通过自定义主题样式，将Element UI的外观与应用程序的风格保持一致。完善的文档和社区支持：Element UI拥有详尽的文档和示例，以及活跃的开源社区，可以提供帮助和支持。
elementui快速入门详细介绍
wnfkbh的博客
04-21 4604
Element 是基于 Vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的 PC 端组件，减少用户对常用组件的封装，降低了开发的难易程度。--:data 引入vue中的变量tableData 必须为数组类型--><el-tableborder--el-table-column:表格的列 prop:必须和tableData中的属性名对于 -->label="出生日期"label="姓名"label="地址"></div>
ElementUI-----UI框架
热门推荐
qq_40132294的博客
05-17 6万+
ElementUI是由饿了么团队开源的UI框架，并于Vue完美契合。
vue-element-admin快速入门课程
06-29
vue-element-admin是一款后台前端解决方案，使用该框架可以很轻松地帮我们完成后台前端的工作。本课程主要带领同学们完成该框架的入门学习。 本课程首先会对框架的安装，代码目录说明，路由配置项的含义这些基础知识...
hypermesh自学快速入门
11-29
Hypermesh 自学快速入门 Hypermesh 是一种常用的网格划分软件，广泛应用于 finite element analysis（有限元分析）和计算机辅助工程（CAE）领域。通过学习 Hypermesh，可以快速掌握网格划分技巧，提高工作效率和...
element-ui按需引入
qq_54254228的博客
08-18 2481
按需引入element-ui组件库 注意： 官方文档里的"presets": [["es2015", { "modules": false }]现在要改为["@babel/preset-env", { "modules": false }]，不然会报错
Elment UI的使用说明
weixin_30527551的博客
11-20 340
一、 Elment UI 　　1、 简介 　　　　Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率，就如同bootstrap。 　　2、组件分类 　　　　 ElementUI 适用于PC端 　　　　 MintUI 适用于手机移动端　　3、官网 　　　　http://element.eleme.io/二、快速上手 　　1、 安装el...
vue+element-ui入门（手把手教你怎么用element)
Handsome2013的博客
04-25 1万+
vue+element入门，手把手教你怎么用element1.vue安装使用查看版本升级或安装 cnpm最新稳定版全局安装 vue-cli创建一个基于 webpack 模板的新项目这里需要进行一些配置，默认回车即可2.安装element-uinpm 安装3.使用项目目录：引入 Element使用elment-ui运行访问网页： 1.vue安装使用 参考：https://www.runoob.com...
elment 遇到的问题
FrontEndEngineer的博客
04-11 388
el-table 自适应列宽
element-ui组件学习
SARS_的博客
11-17 1275
element-ui组件的大致分类 element-ui的组件大致分为以下几类： Basic Form Data Notice Navigation Other 组件分类的大致意思 basic组件类型 是一些关于页面布局、按钮和icon等相关类型的组件。 关于布局方面有Layout栅格布局和Container布局容器等等 Layout布局： Container容器布局： form组件类型 form包含了所有与表单相关的组件 比如Upload上传组件 data组件类型 data组
elment树结构tree增加搜索过滤框
小码蚁
10-12 3857
官方文档： <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-no...
elment ui 组件bug总结
IT博客技术分享
04-04 2709
一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗 第一种: 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 第二种:全局设置 在mian.js里面： import Elem.
element-ui快速入门
04-28
为了快速入门element-ui，我们需要掌握以下几个步骤。 第一步是安装element-ui。我们可以使用npm或者yarn等包管理工具来安装element-ui，也可以直接在html文件中引入相关的CDN链接。在引入后，我们就可以在项目中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值