快速搭建外贸网站,国产网站开发工具公司,网站推广怎么样做,wordpress 桌面通知系列文章目录
IDEA项目实践——JavaWeb简介以及Servlet编程实战
IDEA项目实践——Spring当中的切面AOP
IDEA项目实践——Spring框架简介#xff0c;以及IOC注解
IDEA项目实践——动态SQL、关系映射、注解开发
IDEWA项目实践——mybatis的一些基本原理以及案例
文章目录 …系列文章目录
IDEA项目实践——JavaWeb简介以及Servlet编程实战
IDEA项目实践——Spring当中的切面AOP
IDEA项目实践——Spring框架简介以及IOC注解
IDEA项目实践——动态SQL、关系映射、注解开发
IDEWA项目实践——mybatis的一些基本原理以及案例
文章目录
系列文章目录
前言
2.Element
2.1 快速入门
2.2 Element 布局
2.2.1 Layout 布局
2.2.2 Container 布局容器
2.3 案例
2.3.1 准备基本页面
2.3.2 完成表格展示
2.3.2.1 拷贝
2.3.2.2 修改
2.3.3 完成搜索表单展示
2.3.4 完成批量删除和新增按钮展示
2.3.5 完成对话框展示
2.3.6 完成分页条展示
2.3.7 完整页面代码
总结 前言
本文主要讲解Element UI,下面的案例经供参考。
2.Element
Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。
Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等~
如下图左边的是我们编写页面看到的按钮上图右边的是 Element 提供的页面效果效果一目了然。 我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改官网网址是 Layout 布局 | Element Plus (element-plus.org) 进入官网能看到如下页面 接下来直接点击 组件 页面如下
点击下面的小图标也可以看到完整的代码段 2.1 快速入门 创建页面并在页面引入Element 的css、js文件 和 Vue.js !-- 引入vue --script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script!-- 引入样式 --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css!-- 引入组件库 --script srchttps://unpkg.com/element-ui/lib/index.js/script .创建Vue核心对象 Element 是基于 Vue 的所以使用Element时必须要创建 Vue 对象 scriptnew Vue({el:#app})/script 官网复制Element组件代码 在左菜单栏找到 Button 按钮 然后找到自己喜欢的按钮样式点击 显示代码 在下面就会展示出对应的代码将这些代码拷贝到我们自己的页面即可。
整体页面代码如下 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleTitle/title/headbodydiv idappel-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger删除/el-button/el-rowel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button/el-rowel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button/el-rowel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-row/div!-- 引入vue --script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script!-- 引入样式 --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css!-- 引入组件库 --script srchttps://unpkg.com/element-ui/lib/index.js/scriptscriptnew Vue({el:#app})/script/body/html
2.2 Element 布局
Element 提供了两种布局方式分别是 Layout 布局——Layout 布局 | Element Plus (element-plus.org) Container 布局容器——Container 布局容器 | Element Plus (element-plus.org)
2.2.1 Layout 布局
通过基础的 24 分栏迅速简便地创建布局。也就是默认将一行分为 24 栏根据页面要求给每一列设置所占的栏数。 在左菜单栏找到 Layout 布局 然后找到自己喜欢的按钮样式点击 显示代码 在下面就会展示出对应的代码显示出的代码中有样式有html标签。将样式拷贝我们自己页面的 head 标签内将html标签拷贝到 div idapp/div 标签内。
整体页面代码如下 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleTitle/titlestyle.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/headbodydiv idappel-rowel-col :span24div classgrid-content bg-purple-dark/div/el-col/el-rowel-rowel-col :span12div classgrid-content bg-purple/div/el-colel-col :span12div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span8div classgrid-content bg-purple/div/el-colel-col :span8div classgrid-content bg-purple-light/div/el-colel-col :span8div classgrid-content bg-purple/div/el-col/el-rowel-rowel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-col/el-row/divscript srcjs/vue.js/scriptscript srcelement-ui/lib/index.js/scriptlink relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew Vue({el:#app})/script/body/html
现在需要添加一行要求该行显示8个格子通过计算每个格子占 3 栏具体的html 代码如下 !--添加一行8个格子 24/8 3--el-rowel-col :span3div classgrid-content bg-purple/div/el-colel-col :span3div classgrid-content bg-purple-light/div/el-colel-col :span3div classgrid-content bg-purple/div/el-colel-col :span3div classgrid-content bg-purple-light/div/el-colel-col :span3div classgrid-content bg-purple/div/el-colel-col :span3div classgrid-content bg-purple-light/div/el-colel-col :span3div classgrid-content bg-purple/div/el-colel-col :span3div classgrid-content bg-purple-light/div/el-col/el-row
2.2.2 Container 布局容器
用于布局的容器组件方便快速搭建页面的基本结构。如下图就是布局容器效果。
如下图是官网提供的 Container 布局容器实例 该效果代码中包含了样式、页面标签、模型数据。将里面的样式 style 拷贝到我们自己页面的 head 标签中将html标签拷贝到 div idapp/div 标签中再将数据模型拷贝到 vue 对象的 data() 中。
整体页面代码如下 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleTitle/titlestyle.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}/style/headbodydiv idappel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-submenu index2-1template slottitle选项1/templateel-menu-item index2-1-1选项1-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/el-main/el-container/el-container/div!DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleTitle/title/headbodydiv idappel-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger删除/el-button/el-rowel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button/el-rowel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button/el-rowel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-row/div!-- 引入vue --script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script!-- 引入样式 --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css!-- 引入组件库 --script srchttps://unpkg.com/element-ui/lib/index.js/scriptscriptnew Vue({el:#app})/script/body/htmlscriptnew Vue({el:#app,data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(20).fill(item)}}})/script/body/html
2.3 案例
其他的组件我们通过完成一个页面来学习。
我们要完成如下页面效果 要完成该页面我们需要先对这个页面进行分析看页面由哪儿几部分组成然后到官网进行拷贝并修改。页面总共有如下组成部分 还有一个是当我们点击 新增 按钮会在页面正中间弹出一个对话框如下 2.3.1 准备基本页面 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleTitle/title/headbodydiv idapp/divscript srcjs/vue.js/scriptscript srcelement-ui/lib/index.js/scriptlink relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew Vue({el: #app})/script/body/html
2.3.2 完成表格展示
使用 Element 整体的思路就是 拷贝 修改。
2.3.2.1 拷贝 在左菜单栏找到 Table 表格并点击右边主体就会定位到表格这一块找到我们需要的表格效果如上图点击 显示代码 就可以看到这个表格的代码了。
将html标签拷贝到 div idapp/div 中如下 templateel-table:datatableDatastylewidth: 100%:row-class-nametableRowClassNameel-table-column propdate labelDate width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress //el-table
/template 将css样式拷贝到我们页面的 head 标签中如下 style
.el-table .warning-row {--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {--el-table-tr-bg-color: var(--el-color-success-light-9);
}
/style 将方法和模型数据拷贝到 Vue 对象指定的位置 script langts setup
interface User {date: stringname: stringaddress: string
}const tableRowClassName ({row,rowIndex,
}: {row: UserrowIndex: number
}) {if (rowIndex 1) {return warning-row} else if (rowIndex 3) {return success-row}return
}const tableData: User[] [{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,},
]
/script 上方是方法下方为模型数据
拷贝完成后通过浏览器打开可以看到表格的效果 表格效果出来了但是显示的表头和数据并不是我们想要的所以接下来就需要对页面代码进行修改了。
2.3.2.2 修改 修改表头和数据 下面是对表格代码进行分析的图解。根据下图说明修改自己的列数和列名 修改完页面后还需要对绑定的模型数据进行修改下图是对模型数据进行分析的图解 给表格添加操作列 从之前的表格拷贝一列出来并对其进行修改。按钮是从官网的 Button 按钮 组件中拷贝并修改的 给表格添加复选框列和标号列 给表格添加复选框和标号列效果如下 此效果也是从 Element 官网进行拷贝先找到对应的表格效果然后将其对应代码拷贝到我们的代码中如下是复选框列官网效果图和代码 这里需要注意在 el-table 标签上有一个事件 selection-changehandleSelectionChange 这里绑定的函数也需要从官网拷贝到我们自己的页面代码中函数代码如下 从该函数中又发现还需要一个模型数据 multipleSelection 所以还需要定义出该模型数据
标号列也用同样的方式进行拷贝并修改。
2.3.3 完成搜索表单展示
在 Element 官网找到横排的表单效果然后拷贝代码并进行修改 点击上面的 显示代码 后就会展示出对应的代码下面是对这部分代码进行分析的图解 然后根据我们要的效果修改代码。
2.3.4 完成批量删除和新增按钮展示
从 Element 官网找具有着色效果的按钮并将代码拷贝到我们自己的页面上 2.3.5 完成对话框展示
在 Element 官网找对话框如下 下面对官网提供的代码进行分析 上图分析出来的模型数据需要在 Vue 对象中进行定义。
2.3.6 完成分页条展示
在 Element 官网找到 Pagination 分页 在页面主体部分找到我们需要的效果如下 点击 显示代码 找到 完整功能 对应的代码接下来对该代码进行分析 上面代码属性说明 page-size 每页显示的条目数 page-sizes 每页显示个数选择器的选项设置。 :page-sizes[100,200,300,400] 对应的页面效果如下 currentPage 当前页码。我们点击那个页码此属性值就是几。 total 总记录数。用来设置总的数据条目数该属性设置后 Element 会自动计算出需分多少页并给我们展示对应的页码。
事件说明 size-change pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后该事件会触发。 current-change currentPage 改变时会触发。也就是当我们点击了其他的页码后该事件会触发。
2.3.7 完整页面代码 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleTitle/titlestyle.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}/style/headbodydiv idapp!--搜索表单--el-form :inlinetrue :modelbrand classdemo-form-inlineel-form-item label当前状态el-select v-modelbrand.status placeholder当前状态el-option label启用 value1/el-optionel-option label禁用 value0/el-option/el-select/el-form-itemel-form-item label企业名称el-input v-modelbrand.companyName placeholder企业名称/el-input/el-form-itemel-form-item label品牌名称el-input v-modelbrand.brandName placeholder品牌名称/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form!--按钮--el-rowel-button typedanger plain批量删除/el-buttonel-button typeprimary plain clickdialogVisible true新增/el-button/el-row!--添加数据对话框表单--el-dialogtitle编辑品牌:visible.syncdialogVisiblewidth30%el-form refform :modelbrand label-width80pxel-form-item label品牌名称el-input v-modelbrand.brandName/el-input/el-form-itemel-form-item label企业名称el-input v-modelbrand.companyName/el-input/el-form-itemel-form-item label排序el-input v-modelbrand.ordered/el-input/el-form-itemel-form-item label备注el-input typetextarea v-modelbrand.description/el-input/el-form-itemel-form-item label状态el-switch v-modelbrand.statusactive-value1inactive-value0/el-switch/el-form-itemel-form-itemel-button typeprimary clickaddBrand提交/el-buttonel-button clickdialogVisible false取消/el-button/el-form-item/el-form/el-dialog!--表格--templateel-table:datatableDatastylewidth: 100%:row-class-nametableRowClassNameselection-changehandleSelectionChangeel-table-columntypeselectionwidth55/el-table-columnel-table-columntypeindexwidth50/el-table-columnel-table-columnpropbrandNamelabel品牌名称aligncenter/el-table-columnel-table-columnpropcompanyNamelabel企业名称aligncenter/el-table-columnel-table-columnproporderedaligncenterlabel排序/el-table-columnel-table-columnpropstatusaligncenterlabel当前状态/el-table-columnel-table-columnaligncenterlabel操作el-rowel-button typeprimary修改/el-buttonel-button typedanger删除/el-button/el-row/el-table-column/el-table/template!--分页工具条--el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 15, 20]:page-size5layouttotal, sizes, prev, pager, next, jumper:total400/el-pagination/divscript srcjs/vue.js/scriptscript srcelement-ui/lib/index.js/scriptlink relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew 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
总结
以上就是今天的内容~
欢迎大家点赞收藏⭐转发 如有问题、建议请您在评论区留言哦。
最后转载请注明出处
