位置: IT常识 - 正文

11-ElementUI

编辑:rootadmin
1、Element简介 Element是饿了么公司前端开发团队提供的一套基于Vue的网站组件库,用于快速构建网页 Element提供了很多组件(组成网页的部件)供我们使用。 官方网站 https://element.eleme.cn/#/zh-CN 2、快速入门 2.1、将相关的element-ui ... 1、Element简介Element是饿了么公司前端开发团队提供的一套基于Vue的网站组件库,用于快速构建网页Element提供了很多组件(组成网页的部件)供我们使用。官方网站https://element.eleme.cn/#/zh-CN2、快速入门2.1、将相关的element-ui和js文件拷贝至个人项目的webapp下2.2、创建页面,并在页面引入Element的css、js文件和Vue的js文件<script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/vue.js"></script><script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/index.js"></script><link rel="stylesheet" href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/theme-chalk/index.css">2.3、创建Vue核心对象

推荐整理分享11-ElementUI,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

<script> new Vue({ el:"#id值" })</script>2.4、在官网中复制Element组件代码在左边菜单栏找到Button按钮选项,然后找到自己喜欢的按钮样式,点击显示代码,在下面就会展示出对应的代码,将这些代码拷贝到我们自己的页面即可2.5、整体代码如下<!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="https://www.cnblogs.com/OnlyOnYourself-lzw/p/js/vue.js"></script> <script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/index.js"></script> <link rel="stylesheet" href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app" }) </script> </body> </html>3、Element布局Element提供了两种布局方式,分别是Layout布局Container布局容器3.1、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="https://www.cnblogs.com/OnlyOnYourself-lzw/p/js/vue.js"></script><script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/index.js"></script><link rel="stylesheet" href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/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>3.2、Container布局容器

概念

用于布局的容器组件,方便快速搭建页面的基本结构,如下图就是布局容器效果11-ElementUI

如下图是官网提供的Container布局容器实例

该效果代码中包含了样式、页面标签、模型数据。将里面的样式<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> <el-aside width="200px"> <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> <el-dropdown> <i class="el-icon-setting"></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="https://www.cnblogs.com/OnlyOnYourself-lzw/p/js/vue.js"></script><script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/index.js"></script><link rel="stylesheet" href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/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>4、综合案例需求

完成如下页面效果要完成该页面,需要先对这个页面进行分析,看页面由哪几个部分组成,然后到官网进行拷贝并修改,页面总共有如下组成部分还有一个是当点击新增按钮的时候,会在页面正中间弹出一个对话框,如下所示4.1、准备基本页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/js/vue.js"></script><script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/index.js"></script><link rel="stylesheet" href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/theme-chalk/index.css"><script> new Vue({ el: "#app" })</script></body></html>4.2、完成搜索表单展示在Element光网找到横排的表单效果,然后拷贝代码并进行修改点击上面的显示代码后,就会展示出对应的代码,下面是对这部分代码进行分析的图解分析结束后就可以根据需求效果修改代码4.3、完成批量删除和新增按钮展示从Element官网找到具有着色效果的按钮,并将代码拷贝到我们自己的页面上4.4、完成对话框的展示在Element官网找到对话框的效果如下图所示:对代码进行分析的图解如下图所示上图分析出来的模型数据需要在Vue对象中进行定义表单代码如下所示4.5、完成表格界面展示在左边菜单栏找到Table表格按钮,找到需要的表格效果,并复制代码,将html标签拷贝到<div id="app"></div>中,如下所示将相关css样式拷贝到head标签中,如下所示将方法和模型数据拷贝到Vue对象指定的位置拷贝完成后通过浏览器打开可以看到表格的效果虽然表格效果出来了,但是显示的表头和数据并不是我们想要的,所以还需要对页面代码进行修改1.修改表头和数据下面是对表格代码进行分析的图解。根据下图书名修改自己的列数和列名修改完页面后,还需要对绑定的模型数据进行修改,下图是对模型数据进行分析的图解2.给表格添加操作列从官网上找到有按钮的表格,复制过来进行修改3.给表格添加复选框和标号列预期效果如下此效果也是从Element官网进行拷贝,找到对应的表格效果,然后将其对应代码拷贝至个人代码中,如下是复选框列官网效果图和代码这里需要注意在<el-table>标签上有一个事件@selection-change="handleSelectionChange",这里绑定的函数也需要从官网拷贝到我们自己的页面代码中,函数代码如下所示:从函数中又发现一个模型数据multipleSelection,所以还需要定义出该模型数据。标号列也用同样的方式进行拷贝并修改4.给表格处理禁用和启用4.6、完成分页条的展示

在Element官网找到Pagination分页,在页面主体部分找到需要的效果,如下所示

点击显示代码,找到完整功能对应的代码,接下来对该代码进行分析

上述代码属性说明

page-size:每页显示的条目数page-sizes:每页显示个数选择器的选项设置:page-sizes="[100, 200, 300, 400]"对应的页面效果如下:

currentPage:当前页码。我们点击哪个页面,此属性值就是几total:总记录数。用来设置总的数据目录条数,该属性设置后,Element会自动计算出需要分多少也给我们展示对应的代码

事件说明

size-change:pageSize改变的时候会触发。也就是当我们改变了每页显示的条目数后,该事件会触发

current-change:currentPage改变的时候会触发。也就是当我们点击了其他的页码后,该事件会复发

4.7、完整案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--elementui的css--> <link rel="stylesheet" href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/theme-chalk/index.css"> <!--先导入vue的js--> <script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/js/vue.js"></script> <!--再导入element的js--> <script src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/element-ui/lib/index.js"></script> <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="dialogFormVisible = true">新增</el-button> </el-row> <!--添加表单的对话框--> <el-dialog title="编辑品牌" :visible.sync="dialogFormVisible" 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.desc"></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="saveBrand">提交</el-button> <el-button @click="dialogFormVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> <!-- 表格 @selection-change:多选框发生选择变化的时候触发的事件 --> <el-table :data="tableData" :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" label="排序" align="center"> </el-table-column> <el-table-column prop="status" label="当前状态" align="center"> <!--获取到status值,然后进行判断--> <template slot-scope="scope"> <el-tag>{{scope.row.status=='1'?'启用':'禁用'}}</el-tag> </template> </el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页条: @size-change:每页条数变化的时候 @current-change:页码变化的时候 :current-page:展示的页码 :page-sizes:每页显示的条数可选列表 :page-size:每页显示的条数 :total:总条数 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </div></body><script> new Vue({ el:"#app", data() { return { brand: { status: '', companyName: '', brandName: '' }, dialogFormVisible: false, tableData: [{ brandName: '红米', companyName: '小米科技', ordered: '1', status:'0' },{ brandName: '红米', companyName: '小米科技', ordered: '1', status:'1' },{ brandName: '红米', companyName: '小米科技', ordered: '1', status:'0' },{ brandName: '红米', companyName: '小米科技', ordered: '1', status:'1' },{ brandName: '红米', companyName: '小米科技', ordered: '1', status:'0' },{ brandName: '红米', companyName: '小米科技', ordered: '1', status:'0' }], currentPage: 2 } }, methods: { onSubmit() { console.log(this.brand); }, saveBrand() { console.log(this.brand); }, //切换表格行的样式 tableRowClassName({row, rowIndex}) { if (rowIndex%2 === 0) { return 'success-row'; } return ''; }, //处理选择框变化的事件方法 handleSelectionChange(val) { console.log(val); this.multipleSelection = val; }, //处理编辑操作 handleEdit(index, row) { console.log(index, row); }, //处理删除操作 handleDelete(index, row) { console.log(index, row); }, //获取每条显示的条数 handleSizeChange(val) { console.log(`每页 ${val} 条`); }, //获取当前页码 handleCurrentChange(val) { console.log(`当前页: ${val}`); } } });</script></html>
本文链接地址:https://www.jiuchutong.com/zhishi/313290.html 转载请保留说明!

上一篇:DEDECMS织梦调用某个作者在某个栏目发布的文章列表(将织梦dedecms转换到wordpress)

下一篇:python缩进和空格的好处(python缩进有什么作用)

  • 印花税应税凭证书立日期怎么写
  • 进项税转出大于进项税,加计抵减怎么计算
  • 公司控股另一家公司的风险
  • 绿化养护合同免费
  • 减免税款会计分录
  • 去年的增值税普票能作废吗?
  • 无票收入申报时要填税率吗
  • 行政会计账务处理
  • 超过五千
  • 制造业贷款用途
  • 大型超市税收分析报告
  • 报税没有报怎么办
  • 分包业务的账务处理办法
  • 增值税扣税凭证包括增值税专用发票
  • 外币出资汇率变动会计处理
  • 其他业务收入包括哪些内容
  • 增值税一般项目是指什么
  • 办劳务发票需要什么资料
  • win10怎么自定义开机音乐
  • php字符串操作函数
  • 腾讯云php
  • 最保值的ipad
  • 外资企业出租房产税优惠
  • uniapp微信小程序上传文件
  • PHP:imagepsencodefont()的用法_GD库图像处理函数
  • 向银行贷款资金成本率计算公式是什么
  • 政府补助资金使用范围及管理方法
  • 可抵扣增值税有哪些
  • 合并及公司利润表
  • 变电所的相关费用是什么
  • 事业单位委托业务费的现金流量
  • 无形资产的处置方式
  • mysqld_safe mysqld from pid
  • 应付职工薪酬怎么冲平
  • 租赁房屋开具发票商品名称
  • 金蝶k3固定资产如何入账
  • 接手前往年的银行余额不平怎么办?
  • 持有至到期投资科目被取消了吗
  • 织梦自定义模型调用
  • 固定资产的核算内容包括
  • 个人所得税汇算清缴
  • 个税手续费发给财务人员 文件
  • 个人所得税如何缴纳
  • 扣供应商的货款进项税要转出吗
  • 税务局退回来的附加税金怎么做账
  • 固定资产盘亏账务处理的问题
  • 其他应收款核算什么
  • 增值税可以退吗
  • 国家规定房屋买卖中介费
  • 增值税专用发票丢了怎么补救
  • 销售自己使用过的物品免税吗
  • 实收资本怎么入账?
  • sql server在表里查找具体数据
  • mac安装mysql没看见初期密码
  • win7电脑磁盘空间不足清理步骤
  • ubuntu虚拟机怎么改用户名
  • win7旗舰版怎么进入bios
  • win7系统如何删除隐藏文件
  • 电脑xp系统如何
  • Ubuntu如何安装vim编辑器
  • 64位CentOS 6.4安装配置流量监控工具ntopng
  • window打开
  • win10注销是干嘛的
  • ubuntu20安装unity桌面
  • 批处理书
  • cocos2dx官方教程
  • 常见的dos命令及功能
  • unity字符串
  • linux shell if -e
  • js实现多继承
  • JavaScript中getUTCSeconds()方法的使用详解
  • 如何在脚本中调字体
  • android简单app实例
  • python5.7汉诺塔
  • jquery实例
  • 知道金额和税额怎么求
  • 济南税务局投诉电话
  • 收到补税点的分录
  • 残疾人交房产税有什么优惠
  • 宁波税务局qzzn
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设