位置: IT常识 - 正文

HTML使用Element-UI制作管理系统页面(无需脚手架以及创建vue工程)(element html)

编辑:rootadmin
HTML使用Element-UI制作管理系统页面(无需脚手架以及创建vue工程) HTML正常使用Element-UI前言尝试经历设计附件前言

推荐整理分享HTML使用Element-UI制作管理系统页面(无需脚手架以及创建vue工程)(element html),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html页面引入element,html页面引入element,html element.style,htmlgetelementbyid,htmlgetelementbyid,HTML使用什么来描述网页,elementui在html中如何引入,elementui在html中如何引入,内容如对您有帮助,希望把文章链接给更多的朋友!

入职培训到Web前端后布置了一个制作管理系统前端页面的任务,任务要求包含: 1.页面的布局主要为左侧导航菜单栏,右侧为信息展示栏,要体现嵌套 2.点击菜单栏切换右侧信息展示时左侧菜单栏不能刷新(使用iframe) 3.菜单栏需要做到能够动态伸缩 4.能够显示表格(添加table组件) 5.升级:添加button等对表格进行增删等操作

尝试

由于自己前端很少接触,所以从来没有使用过各种组件,也没有接触过Vue,要在短时间内(一天)学会使用Vue制作前端页面感觉有些难度。在摸索权衡之下决定使用原生的HTML引入Element-UI制作。 决定下的很快,但是使用的过程还是遇到了众多问题,由于从来没有使用过也不了解如何使用组件,在Element-UI官网的组件库中进行在线运行的结果都并不令人满意,如图:尝试在线运行的结果: 可以看出组件并没有显示出渲染之后的效果,在线运行显示的问题是:

ReferenceError: Vue is not defined

Element-UI的官方文档也是已将其与Vue结合的背景进行介绍和使用的,这对于没有使用过Vue的尝试者而言便是一次摸着石头过河的体验。

经历

经过在网上查阅资料,发现想要在html中使用Element-UI主要需要引入三行代码: (参考:https://blog.csdn.net/m0_49714202/article/details/124010588)

<!--引入 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.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入后尝试在VScode运行组件代码,但是发现仍然不是想要的显示结果: 仍需检查 2.html组件代码是否被div包含 3.是否new Ctor().$mount(‘#app’) 在完成上诉三步之后终于能够正常显示Element-UI的组件了

设计HTML使用Element-UI制作管理系统页面(无需脚手架以及创建vue工程)(element html)

每次做前端页面,最喜欢做的事就是先给title换一个icon图标,在网上找了几个icon转换网站,发现icon转换转换icon比较好使,尺寸选择16x16,追求完美我又给图象去了底色。 将icon放在指定路径下,title就有图标了

<link rel="shortcut icon" href="img/title2.ico"/>

接下来先把需要引入Element-UI的语句加进去完成head部分

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>管理系统</title> <link rel="shortcut icon" href="img/title2.ico"/> <script src="js/main.js"></script> <!--引入 element-ui 的样式,--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue, 后使用element-ui --> <script src="js/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script></head>

首先需要完成管理系统的左右布局,在Element-UI上刚好找到一个比较吻合的布局。

<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container></el-container>

然后在Aside部分加入一个侧栏导航菜单,头部加上一个简洁菜单,一个基础布局就完成了,稍微润色一下的结果: 接下来就是如何使用实现iframe使点击左侧菜单栏只刷新右侧的展示部分了。网上有很多复杂的实现方法,但是懒人有懒福,找到一个简单的实现方法: 假如点击上级邮件显示page2,点击下级邮件显示page3,我只需要为上级邮件添加一个a标签:

<a href="page2.html" target="iframe_a">上级邮件</a>

在展示的右栏框架内写入iframe:

<iframe src="page2.html" name="iframe_a" frameborder="1" height="900px"></iframe>

即可。同理使下级邮件显示page3只需为下级邮件添加如下标签:

<a href="page3.html" target="iframe_a">下级邮件</a>

参考:ifame实现动态显示 最后,由于Element-UI的table组件有一个移除表格中一行的功能:

deleteRow(index, rows) { rows.splice(index, 1); }

我研究了一下splice函数的功能,发现它不仅能够实现数据的删除,也能实现数据的增加。 为了实现一个增加功能,我首先添加了一个button,点击后进行弹窗,输入合法的邮箱后进行数据添加,实现代码为:

open3(rows){ this.$prompt('请输入邮箱', '添加邮件信息', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, inputErrorMessage: '邮箱格式不正确' }).then(({ value }) => { this.$message({ type: 'success', message: '你的邮箱是: ' + value +"添加邮件信息成功" }); item = { date: '2022-07-12', name: '何亚告', address: value, tag:"公司" }; rows.splice(0,0,item); }).catch(() => { this.$message({ type: 'info', message: '取消输入' }); }); }

弹窗使用的是Element-UI的组件,虽然很好用,但是很难改!!! 实现效果: Element-UI的table组件还能够实现标签筛选:

附件

1.Element-Ui网站:Element-Ui网站 2.源代码:源代码

本文链接地址:https://www.jiuchutong.com/zhishi/290230.html 转载请保留说明!

上一篇:大提顿国家公园中的野牛,怀俄明州 (© Brian Evans/Getty Images)(美国大提顿国家公园)

下一篇:【前端工程化】配置package.json中scripts命令脚本,新手必学(前端工程化的理解简书)

  • 腾讯课堂麦克风怎么打开(腾讯课堂麦克风怎么关闭)

    腾讯课堂麦克风怎么打开(腾讯课堂麦克风怎么关闭)

  • powerpoint主题怎么设置(powerpoint主题内容)

    powerpoint主题怎么设置(powerpoint主题内容)

  • 钉钉直播开小窗会计算时间吗(钉钉直播开小窗算时间吗)

    钉钉直播开小窗会计算时间吗(钉钉直播开小窗算时间吗)

  • iphonexr信息发送失败(苹果xr短信发送失败)

    iphonexr信息发送失败(苹果xr短信发送失败)

  • ipad重启后激活出错(ipad重新激活但是激活失败怎么办)

    ipad重启后激活出错(ipad重新激活但是激活失败怎么办)

  • 乔安智联摄像头显示离线(乔安智联摄像头怎么倒过来)

    乔安智联摄像头显示离线(乔安智联摄像头怎么倒过来)

  • oppoa53m一直显示内存不足怎么办(oppoa53m一直显示oppo)

    oppoa53m一直显示内存不足怎么办(oppoa53m一直显示oppo)

  • 哔哩哔哩可以同时登录两个手机吗(哔哩哔哩可以同屏)

    哔哩哔哩可以同时登录两个手机吗(哔哩哔哩可以同屏)

  • 苹果手机导出照片失败是什么原因(苹果手机导出照片老是中断)

    苹果手机导出照片失败是什么原因(苹果手机导出照片老是中断)

  • 信息闪退是怎么回事儿(信息闪退打不开)

    信息闪退是怎么回事儿(信息闪退打不开)

  • 电脑结束进程后黑屏怎么办(电脑结束进程后又自动启动了)

    电脑结束进程后黑屏怎么办(电脑结束进程后又自动启动了)

  • 微信怎么关闭刷脸支付(微信怎么关闭刷视频)

    微信怎么关闭刷脸支付(微信怎么关闭刷视频)

  • 冯诺依曼结构五大系统(冯诺依曼结构基本原理)

    冯诺依曼结构五大系统(冯诺依曼结构基本原理)

  • 淘宝预售产品怎么加购物车(淘宝预售产品怎么加购)

    淘宝预售产品怎么加购物车(淘宝预售产品怎么加购)

  • 手机卡显示hd什么作用(手机上电话卡显示hd)

    手机卡显示hd什么作用(手机上电话卡显示hd)

  • 摩拜单车押金怎么退(摩拜单车押金怎么查询)

    摩拜单车押金怎么退(摩拜单车押金怎么查询)

  • 小米8是快充吗(小米8是快充吗还是慢充)

    小米8是快充吗(小米8是快充吗还是慢充)

  • 抖音怎么一下子取消所有喜欢(抖音怎么一下子取消所有关注)

    抖音怎么一下子取消所有喜欢(抖音怎么一下子取消所有关注)

  • 淘手游怎么提现微信(淘手游怎么提现在微信)

    淘手游怎么提现微信(淘手游怎么提现在微信)

  • oppok3怎么关闭后台

    oppok3怎么关闭后台

  • linux系统怎么快速切换文本模式和X环境?(linux小技巧)

    linux系统怎么快速切换文本模式和X环境?(linux小技巧)

  • Vue3中操作dom的四种方式,建议收藏!!!(vue3 ref dom)

    Vue3中操作dom的四种方式,建议收藏!!!(vue3 ref dom)

  • 【华为OD机试真题2023 JAVA】服务中心的最佳位置(华为od测试岗机试需要怎么准备)

    【华为OD机试真题2023 JAVA】服务中心的最佳位置(华为od测试岗机试需要怎么准备)

  • 增值税建筑服务税率变化时间
  • 经济补偿影响下份工作吗
  • 购入生产线属于固定资产吗
  • 母公司及子公司借款要利息吗
  • 调整账户和被调整账户的关系
  • 开发票商品类别与商品明细的区别
  • 合伙企业取得分红如何缴纳个人所得税
  • 融资性售后回租承租方出售资产为什么不缴纳增值税
  • 房地产开发企业的土地使用权计入哪里
  • 税费返还如何处理
  • 购买房产怎么确认收入
  • 部分红冲的发票无法勾选怎么办
  • 需要月报的税收项目
  • 建安发票是什么意思
  • 工资表中有哪些项目
  • 加工产品不一定有合理损耗
  • 支票发生退票
  • 发票少开退回多付的货款怎么入账?
  • 专利代理服务费入账
  • 股票溢价净收入计入
  • windows10轻松使用是什么
  • php正则匹配字符串
  • 公司总部固定资产折旧
  • php自学
  • 免征的增值税需要纳税调整吗
  • 按实际成本结转6日和7日的材料采购成本
  • 内部审计范围有哪些
  • 发票填开的基本规定?
  • vue做移动端
  • 油气勘探支出包括
  • 营业利润期末余额怎么算
  • 30个极致实用的东西
  • 基于php技术
  • 灵活就业养老保险退休后每月领多少钱
  • 公司账户转法人账户
  • Cookie和Session的区别,各自的使用方法及常用操作
  • php识别验证码的库高级
  • php自定义表单
  • 残疾人保障金计入哪个会计科目
  • 金税盘证书已冻结怎么解决
  • 公司还款给个人怎么操作
  • css样式居中
  • 不征税发票需要申请吗
  • mysql主从配置详解
  • 公司账户取出来要交税吗
  • 计提未发生的费用
  • 公司租赁个人车辆租金多少合适
  • 内含增长率的推导
  • 贴现的利息通过什么会计科目核算
  • 销售货物并提供安装服务是混合销售吗
  • 销售发奖金感谢说说
  • 支付安全生产费会计科目
  • sqlserver多表查询 索引
  • sql常用语句大全简书
  • windows下修改uuid的工具
  • mysql转换数据类型
  • 如何备份还原电脑系统
  • 系统有乱码怎么解决
  • 微软今天正式停产了吗
  • win平板装ubuntu
  • macbookzen
  • linux 更改目录名
  • linux发布项目
  • Win7登录密码
  • linux mangle
  • Cocos2d-x c++和java相互调用
  • node.js的使用
  • fat32和fat16
  • shell脚本加密不可破解
  • fragment切换保存状态
  • unity方法调用
  • JavaScript italics方法入门实例(把字符串显示为斜体)
  • python爬虫利器
  • 开票系统怎么设置默认税率
  • 扣缴义务人申报和综合所得年度自行申报
  • 电信业务发票
  • 江阴市税务局电话号码
  • 绿牌电动车需要过户吗?
  • 转让土地的土地增值税
  • 办理养殖照税务登记证
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设