位置: 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命令脚本,新手必学(前端工程化的理解简书)

  • 企业网络营销十项实战技巧(网络营销企业有哪些营销策略)

    企业网络营销十项实战技巧(网络营销企业有哪些营销策略)

  • vivox70pro是什么屏幕材质(vivox70Pro是什么散热)

    vivox70pro是什么屏幕材质(vivox70Pro是什么散热)

  • 在快手上买的东西没有显示(快手里买的东西)

    在快手上买的东西没有显示(快手里买的东西)

  • xp系统是不是不能用了

    xp系统是不是不能用了

  • 恢复出厂后电池会损坏健康吗(恢复出厂后电池容量变小)

    恢复出厂后电池会损坏健康吗(恢复出厂后电池容量变小)

  • 微信怎么恢复白色主题(微信怎么恢复白名单)

    微信怎么恢复白色主题(微信怎么恢复白名单)

  • 荣耀30s多少hz(荣耀30s多少毫安)

    荣耀30s多少hz(荣耀30s多少毫安)

  • 苹果6sp用几分钟就发烫(苹果6s plus用多久)

    苹果6sp用几分钟就发烫(苹果6s plus用多久)

  • 手机怎么录制mp4(手机怎么录制mp4视频)

    手机怎么录制mp4(手机怎么录制mp4视频)

  • 设为群待办怎么取消(设为群待办怎么查看)

    设为群待办怎么取消(设为群待办怎么查看)

  • 怎么能删掉好友不删聊天记录(怎么能把删掉的微信好友找回来)

    怎么能删掉好友不删聊天记录(怎么能把删掉的微信好友找回来)

  • 拼多多开参团是什么意思(拼多多直接参团和自己发起有区别吗)

    拼多多开参团是什么意思(拼多多直接参团和自己发起有区别吗)

  • 手机充电口接触不良怎么办(手机充电口接触不良松动老是断电)

    手机充电口接触不良怎么办(手机充电口接触不良松动老是断电)

  • 手机暂停服务啥意思(手机暂停服务啥原因)

    手机暂停服务啥意思(手机暂停服务啥原因)

  • 小米初始空间密码是啥(小米初始空间密码忘了)

    小米初始空间密码是啥(小米初始空间密码忘了)

  • 荣耀v20怎么反向充电(荣耀v20如何反向充电)

    荣耀v20怎么反向充电(荣耀v20如何反向充电)

  • 港版三星note10 支持5g吗(港版三星note10+支持5g吗)

    港版三星note10 支持5g吗(港版三星note10+支持5g吗)

  • 爱康卓悦是爱康国宾吗(爱康卓悦是爱康集团的吗)

    爱康卓悦是爱康国宾吗(爱康卓悦是爱康集团的吗)

  • 手机版安全教育平台怎么激活(手机版安全教育平台app下载)

    手机版安全教育平台怎么激活(手机版安全教育平台app下载)

  • 微信视频怎么只看对方(微信视频怎么只能看到自己)

    微信视频怎么只看对方(微信视频怎么只能看到自己)

  • 苹果6微信怎么加密码锁(苹果6微信怎么下)

    苹果6微信怎么加密码锁(苹果6微信怎么下)

  • excel大于号怎么打(excel 大于号)

    excel大于号怎么打(excel 大于号)

  • 微信已经实名认证为什么收不了红包(微信已经实名认证了为什么还要认证)

    微信已经实名认证为什么收不了红包(微信已经实名认证了为什么还要认证)

  • 鸿蒙怎么查手机软件使用时间?鸿蒙查看手机软件使用时间教程(华为鸿蒙怎么看手机型号)

    鸿蒙怎么查手机软件使用时间?鸿蒙查看手机软件使用时间教程(华为鸿蒙怎么看手机型号)

  • 卷曲的蕨菜叶,加拿大魁北克 (© Marianna Armata/Getty Images)(卷曲的蕨菜叶怎么吃)

    卷曲的蕨菜叶,加拿大魁北克 (© Marianna Armata/Getty Images)(卷曲的蕨菜叶怎么吃)

  • 房地产税收有哪些
  • 对本次疫情有什么看法
  • 住房补贴需要交什么材料
  • 固定资产补提之前月度折旧怎么调整
  • 个体户一年能开多少普票
  • 其他综合收益包括资本公积吗
  • 个别计价法和先进先出法举例
  • 四种股利分配政策类型
  • 非税收入专用申报表
  • 收到员工归还借款属于现金流量表
  • 去年发生的成本但今年9月份才开票付款
  • 建筑企业建安税是多少
  • 公司宿舍房租
  • 应收票据会计分录怎么做
  • 生产企业有哪些费用
  • 自己承担所有
  • 出口退税和企业所得税
  • 购买固定资产的进口关税
  • 增值税红字发票怎么做账
  • 以不动产对外投资要交什么税
  • 个人所得税更正申报有滞纳金吗
  • 未立项进行建设
  • 股息红利税补缴什么时候收取
  • 权益法初始入账价值和初始投资成本
  • 物流货损怎样处理
  • 简介linux系统中的10个常用命令及功能
  • xshell怎么用vim
  • php字符串定义
  • 事业单位专项款不能购买资产吗
  • cpqa1000.exe是安全进程吗 cpqa1000进程有什么作用
  • mis.off c n
  • 电汇款项会计分录
  • 人工智能lisp
  • 出口退税管理类别四类
  • mysql分表数量取决于什么
  • java 泛型方法
  • In Java, how do I read/convert an InputStream to a String? Stack Overflow
  • 企业对外担保代偿能否税前扣除 税务局
  • 冲以前年度成本分录
  • 物流货运发票要交税吗
  • 固定资产融资租赁如何确认入账价值
  • 伪静态html
  • mongodb性能测试
  • 应交税费应交增值税的三级科目有哪些
  • 长期待摊费用的账务处理
  • 税盘抵扣怎么做分录
  • db2pd 命令
  • 幼儿园伙食账目
  • 主营业务成本和营业成本的区别
  • 企业破产作用
  • 应收票据到期收回的会计分录
  • 企业验资的好处
  • 销售退回的账务处理会计分录图片
  • 小企业购进商品怎么入账
  • 兼职费计入什么科目
  • 在建工程账务处理问题有哪些
  • 企业内部银行转账怎么记账
  • 购入固定资产一次性扣除政策
  • 计税价格里含税吗
  • sqlserver通用的删除服务器上的所有相同后缀的临时表
  • mysql版本信息
  • Win10 Build 10565 Edge浏览器更新日志和已知问题
  • openstack 创建云主机,计算节点磁盘不足
  • mac上dns设置
  • centos7.4修改主机名
  • fedora最新版
  • 电脑安装了安卓系统没用
  • win10系统怎么设置开机密码
  • centos6启动不了
  • win8系统升级
  • win7使用率
  • win7无法远程桌面win10
  • Android之Android apk动态加载机制的研究(二):资源加载和activity生命周期管理
  • Node.js中的construct
  • python true的用法
  • javascript高级程序设计pdf下载
  • jquery操作
  • 县里的附加税
  • 简述会计估计及其特点
  • 重庆税务自助取票地点
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设