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

  • vivo怎么把5G调成sa模式(vivo手机怎么调成5g)

    vivo怎么把5G调成sa模式(vivo手机怎么调成5g)

  • oppok5微信视频怎样调美颜(oppo微信视频权限怎么开启)

    oppok5微信视频怎样调美颜(oppo微信视频权限怎么开启)

  • 华为手机怎么安装未知应用权限(华为手机怎么安装谷歌三件套)

    华为手机怎么安装未知应用权限(华为手机怎么安装谷歌三件套)

  • 支付保护中心怎么关闭(支付保护中心怎么保护银行卡)

    支付保护中心怎么关闭(支付保护中心怎么保护银行卡)

  • 华为无线耳机freebuds3怎么接电话(华为无线耳机freebuds2pro无法配对)

    华为无线耳机freebuds3怎么接电话(华为无线耳机freebuds2pro无法配对)

  • 笔记本电脑鼠标指针不见了怎么办(笔记本电脑鼠标失灵一键修复)

    笔记本电脑鼠标指针不见了怎么办(笔记本电脑鼠标失灵一键修复)

  • 下载的电影怎么保存到手机视频里(下载的电影怎么保存到相册)

    下载的电影怎么保存到手机视频里(下载的电影怎么保存到相册)

  • 魅族17的屏幕尺寸(魅族17屏幕比例是多少)

    魅族17的屏幕尺寸(魅族17屏幕比例是多少)

  • 快手注销了别人就搜不到了吗(快手注销了别人还能搜到我吗)

    快手注销了别人就搜不到了吗(快手注销了别人还能搜到我吗)

  • 苹果7打电话没有免提(苹果7打电话没声音重启好了)

    苹果7打电话没有免提(苹果7打电话没声音重启好了)

  • 华为手机返回键怎么设置(华为手机返回键怎么设置在屏幕上)

    华为手机返回键怎么设置(华为手机返回键怎么设置在屏幕上)

  • 红米k30防水吗(红米k30防不防水?)

    红米k30防水吗(红米k30防不防水?)

  • soul举报是匿名的吗(soul举报成功自己会看到吗)

    soul举报是匿名的吗(soul举报成功自己会看到吗)

  • 爱奇艺怎么看不了完整电视剧了(爱奇艺怎么看不了离线视频)

    爱奇艺怎么看不了完整电视剧了(爱奇艺怎么看不了离线视频)

  • ipad能插存储卡吗(ipad能插内存卡不)

    ipad能插存储卡吗(ipad能插内存卡不)

  • 手机卡怎么弄出来(手机卡怎么弄出来没有取卡针)

    手机卡怎么弄出来(手机卡怎么弄出来没有取卡针)

  • 2016089是哪款机子(型号2016051是什么手机)

    2016089是哪款机子(型号2016051是什么手机)

  • vivo微信视频怎么美颜(vivo微信视频怎么关闭美颜功能)

    vivo微信视频怎么美颜(vivo微信视频怎么关闭美颜功能)

  • 豆瓣看不到关注人的动态(豆瓣更新后关注的话题不见了)

    豆瓣看不到关注人的动态(豆瓣更新后关注的话题不见了)

  • 节点自由度什么意思(节点自由度概念)

    节点自由度什么意思(节点自由度概念)

  • 淘宝直播间设置弹屏优惠券(淘宝直播间设置最爱)

    淘宝直播间设置弹屏优惠券(淘宝直播间设置最爱)

  • 淘宝怎么调夜间模式(淘宝如何设置夜间)

    淘宝怎么调夜间模式(淘宝如何设置夜间)

  • 小米8如何开启录音功能(小米8如何开启开发者选项)

    小米8如何开启录音功能(小米8如何开启开发者选项)

  • 北京市增值税发票查验平台
  • 实收资本增加如何计算
  • 非营利组织企业所得税季度申报表
  • 购买财务软件可以抵税吗
  • 企业所得税税负率怎么算出来的
  • 足浴行业是否需要缴纳文化事业建设税
  • 利润分配转作股本股利
  • 游戏公司收入确认方法
  • 税金及附加和应交税费的关系
  • 补缴企业所得税的计算公式
  • 企业并购金额如何确定
  • 核定征收所得税税率
  • 营改增后书据转移印花税是含税的吗?
  • 金融业的增值税
  • 为员工购买的意外保险账务处理
  • 什么称为非正数
  • 境外取得收入要不要交企业所得税
  • 视同销售的计税依据
  • 公司购进的商品自己用的,税金怎么走账
  • 模具是可以长期待摊吗
  • 季度资产总额怎么填写
  • 收到其他公司的罚款会计分录
  • 标书费没有发票
  • 电脑如何设置屏幕常亮
  • 股权转让的条件和方式
  • PHP:stream_socket_get_name()的用法_Stream函数
  • 我的世界1.12.2优化下载
  • 任意公积金可以不提取吗
  • eslint vue配置
  • 网上打印企业征信流程
  • vue-router query
  • vue实战开发项目视频
  • php单例模式的简写是什么
  • php返回数据给ajax
  • 刷题有什么作用
  • phpcms栏目分类
  • C语言中指针变量指向字符串时是有效字符的长度吗
  • 未核定月数是什么
  • 如何理解符合立案标准的,行政机关应当及时立案
  • 发票明细太多怎么设置见清单
  • 企业单方面调整员工的工作岗位
  • 专项应付款的账务处理
  • 生产型出口企业的概念
  • 差旅费跨年报销违反什么规定
  • 哪些属于发票
  • 企业所得税中通过研发费用辅助账
  • 土地增值税中开发间接费用工资包括哪些人
  • 普票不能抵扣为什么有税率
  • 汇算清缴是怎么弄的
  • 科目余额表平是什么情况
  • 做账财务费用负数
  • 银行存款利息收入要交税吗
  • 应交税费为负数在资产负债表中的列报
  • 房屋租赁的注意问题
  • 获得赔偿收入什么科目
  • 收到预收账款要确认收入吗
  • 消费满赠送活动规则
  • 视同销售的账务处理方法
  • 个体工商户怎样申请开票
  • sql中isnull是什么意思
  • dnfxp系统能玩吗
  • centos7服务器配置
  • freebsd 安装
  • mac取消开机启动项
  • linux中的ssh命令
  • 要使用windows
  • linux date-u
  • hpm是什么格式的文件
  • centos6.2安装教程
  • cocos2d在运行java eclipse程序时出现 Error: could not open c:program FilesJavajre6libamd64jvm.cfg
  • dos改时间
  • 基于nodejs的框架
  • android 高德地图收费
  • 使用jQuery Rotare实现微信大转盘抽奖功能
  • js实现的奥运倒计时时钟效果代码
  • 陕西省税务系统
  • 深圳天然气收费价格表
  • 港口的码头用地
  • 国家税务局广东省电子税务局下载
  • 税务申报扣除
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设