前言该项目是一款对公司员工及商品管理的后台系统,主要实现功能:公司角色的增删改查,和商品的增删改查,项目的主要模块有,登录,主页,员工管理,权限管理,商品管理,该项目的亮点是权限管理,不同角色登录进入首页,看到的菜单和可操作的按钮是不一样的,如系统管理员可查看和操作所有模块。1.初始化项目涉及的前端技术栈:Vue Vue是一个用于创建用户界面的开源JavaScript框架Vue-router vu
转载
2024-09-14 09:03:39
199阅读
文章目录1、引言2、整体布局3 、主页3.1 实现基本的主页布局3.2 美化主页的header区域3.3 实现导航菜单的基本结构3.4 通过axios拦截器添加token验证3.5 解决每次只能打开一个菜单项和边框问题3.7 实现首页路由的重定向3.8 实现侧边栏路由链接的改造5、结束语 1、引言这是一个用于交流学习的后台管理系统,会陆续的更新开发进度,欢迎关注!2、整体布局3 、主页3.1 实
转载
2024-06-14 07:24:52
83阅读
文章目录0. 简介1. Hello, world!2. Icon 图标3. Button 按钮3.1 基础用法3.2 禁用状态3.3 文字按钮3.4 图标按钮3.5 按钮组3.6 加载中按钮3.7 按钮尺寸3.8 按钮点击事件3.9 总结——所有属性4. Radio 单选框4.1 单选框组4.2 禁用状态4.3 按钮样式的单选框4.4 带有边框的选项4.5 获取选中状态4.6 总结——所有属性5
转载
2024-06-18 14:49:50
96阅读
# Harmony TV 开发 Element UI 教程
## 1. 整体流程
为了实现 Harmony TV 的开发,我们需要使用 Element UI 这个优秀的前端框架。下面是实现该任务的整体流程。
```mermaid
gantt
title Harmony TV 开发 Element UI 教程
section 安装环境
初始化项目: done, 202
原创
2024-01-09 18:00:06
90阅读
根据一个信息匹配显示不同的图片。在vue项目中如果想在data里面定义图片就必须加上require(图片路径)比如,我的课程有语文数学英语。对应的有三张图片。我要显示他相应的图片。这个时候我们可以用对象的键值对来写,键代表科目。定义
src:{
“语文”:require("…/…/…/…/assets/H5/H5set.png"),
“数学”:require("…/…/…/…/assets/
ElementUI是由饿了么团队开源的UI框架,并于Vue完美契合。项目文档:Element - The world's most popular Vue UI framework要使用elementui现成的资源,需要在Vue中先导入elementui,将其设为全局组件,然后就可以在官方文档中复制现成的控件代码来使用了。1.选择需要的控件,点击扩展按钮即可展示前端代码1.安装elementui:
转载
2024-02-20 22:10:48
115阅读
关于element-ui表格使用的一些方法最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台系统,里面表格用到比较多,但是其实我也只是一个刚入行不久的菜鸟,只看官方文档,开发起来还是有难度.不过经过不停的测试以及查阅资料,还是勉强实现了效果,这里就把一些方法分享出来,
转载
2024-05-18 06:52:45
115阅读
ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件ElementUI官网:http://element-cn.eleme.io/#/zh-CN注1:类似前端框架还有iview 案例:<!DOCTYPE
转载
2024-04-18 10:18:39
95阅读
提示:npm run dev 文章目录前言一、vue-element-admin是什么?二、使用步骤1.下载源码2.运行程序1)安装npm2)启动程序总结 前言记录如何使用Vue-element-admin模板开发自己的项目,一个是为了防止自己下一次学习时忘记之前自己学到的东西,而重复学习浪费了时间;与此同时也是想将自己学习到分享出来,希望能帮到初学者,如果起到了让他们少走些弯路的作用,我所整理的
转载
2024-03-13 09:42:13
124阅读
Layout Element 布局元素包括7个属性,其中前6个属性是每个布局元素自身大小信息的设定,一般用于布局控制器对其进行大小和位置的设定。 1.布局涉及两个核心要件,包括布局控制器(La
转载
2024-07-30 19:47:31
48阅读
历时2周左右,我终于完成了我的毕业项目。虽说页面不是特别美观,但是对于一个后四、总结 一、页面展示登录界面管理界面数据操作二、代码展示登录页代码<templa
转载
2024-04-17 16:59:33
92阅读
目录前言一、检查项目开发环境二、搭建项目1.安装vue-cli2.创建vue项目总结前言随着框架的流行,越来越多的开发者喜欢用框架开发项目,以vue、react等居主流,国内比较常用的就是vue进行项目的搭建,本系列文章主要使用vue+webpack进行项目的搭建,其中使用了elementUI进行了扩展,增加到后台系统的布局和路由相关知识,有兴趣就往下看吧~一、检查项目开发环境搭建项目前,我们要检
转载
2024-05-08 16:58:32
66阅读
简介element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。Layout布局(el-row、el-col)element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下<el-row>
<el-col :span="6"><div class="
转载
2024-03-28 12:41:54
704阅读
今天将介绍的是, 如果页面需要在后台执行很长时间怎么办, 通过 ResponseProgress由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:http://code.google.com/p/zsharedcode/wiki/ResponseProgress请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码, 目录 /
转载
2024-08-01 13:41:57
82阅读
插槽---可以理解成占位符。方便组件功能的扩展。 一个 slot 标签就是一个插槽,如果没有内容传入,则显示 slot 标签原有的内容,如果有内容插入,则显示插入的内容。vue的插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。匿名插槽(slot 不带 name 属性),看下面例子:先在main.js定义一个组件my_slot:Vue.com
转载
2024-03-16 12:00:26
746阅读
1.开发需求在日常开发中,我们会遇到form表单的动态添加和校验,当我们需要在动态添加的内容中再次动态使用输入框的时候,就会变得很繁琐,我在网上找了很多案例,没有符合自己需求的内容,只好闲暇时间自己搞一下了...比如一下操作,在一个输入框中输入多个批号,然后提示多个批号有逗号分开。这种操作让用户操作起来就很不方便然后我就想到了,在element中,有一个动态添加tag的案例,于是就想着使用这个方式
转载
2024-07-25 21:29:29
582阅读
Vue-elementUI实现PC端商城购物车计算Vue-elementUI实现PC端商城购物车计算,最重要的就是【computed】里面的计算,用来算出勾选的商品的总价 文章目录Vue-elementUI实现PC端商城购物车计算前言一、实现效果二、使用步骤1.数据结构部分2.HTML部分3.部分CSS样式4.JS中的data5.JS中的method6.JS中的computed(计算最终勾选的价格
转载
2024-03-25 14:18:08
93阅读
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。一、入门编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: .代码如下:
jQuery.fn.myPlugin = function(){
转载
2023-12-11 12:45:23
16阅读
文章目录项目部署视频一、Bug修改和插件安装二、调试1、Debug启动项目三、用户密码加密四、接入Swagger接口文档1、什么是Swagger?1.1、Swagger介绍1.2、使用Swagger的好处2、项目中如何载入Swagger?3、如何使用Swagger?3.1、接口归类3.2、接口方法4、配置Swagger 一、Bug修改和插件安装经过前面的代码接口测试,基本的功能都可以实现了,但是
转载
2024-04-17 11:16:48
50阅读
参考:https://www.jb51.net/article/147917.htm思路一、多选框勾选,出现对应的tag:1.利用watch监听多选框绑定的值A(数组)的变化;2.根据A的变化,循环拿到勾选多选框的id对应的name,将id以及对应的name组成新的对象数组;3.将上一步得到的对象数组,去重(产品要求,出现的tag里不能有重复的)得到结果B;4.将B赋值给tags,循环展示出来;二
转载
2024-04-17 09:12:52
36阅读