位置: 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）

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>  <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就有图标了

接下来先把需要引入Element-UI的语句加进去完成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标签：

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

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

参考：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命令脚本，新手必学(前端工程化的理解简书)