随笔分类 - Vue项目
element-UI 根据table中数据改变颜色 或显示对应内容
摘要:
element-UI 根据table中数据改变单元格数据颜色或显示对应的内容的实现如下: 1.根据table中数据不同改变颜色(正数颜色为红色,负数颜色为绿色) <el-table-column prop="sharesReturn" label="盈亏(元)"> <template scope="

el-table设置单元格里的字体颜色
摘要:
例如图中,设置某个单元格的字体颜色: ① el-table标签上添加属性::cell-style=“cellStyle” <el-table :data="tableData" :cell-style="cellStyle" border stripe fit> ②vue文件里在method里声明

更新代码出现冲突:incoming change和current change
摘要:incoming change和current change incoming change和current change 1.提交代码时冲突。 如果远端代码和本地修改有冲突,是不会拉取代码成功的,也就是说,只有把代码贮藏【stash】起来,才能拉取到最新代码,这时候 应用贮藏的时候就可能会发生冲突
项目中elementui时间线的使用~✔✔
摘要:
Vue项目项目中经常会遇到事件线的功能Timeline,比如说快递跟踪功能等。element.js 时间线的使用,先来看效果图 是因为element2.6.0之前的版本不支持时间线组件了。所有下载安装比较麻烦。这里推荐使用本地组件:直接放在pluginis目录下,然后引入就可以 timeline文件

项目使用lodash(深拷贝)的方法
摘要:
Vue项目使用lodash(深拷贝)的方法 Lodash使用了一个简单的 _ 符号,就像Jquery的 $ 一样,十分简洁。 https://www.lodashjs.com/ 1.安装 npm install lodash -S 2.导入 (1)方式一:在main.js中导入 //全部导入 imp

Vue富文本编辑器(vue-quill-editor)使用✔✔
摘要:
最近工作中需求使用一款富文本编辑器,最终选择了vue-quill-editor,之所以选择vue-quill-editor,是看上了它的轻量以及外观简洁的优势。打开官方文档,直接上手配置,各种报错,踩了很多坑,遇到的主要问题有以下几个 字体大小无法设置 工具栏样式错位 图片上传报错 编辑器高度无法设

ElementUI实现图片上传的功能🌈~(已完成✔)
摘要:
Vue项目中经常会遇到使用ElementUI实现图片上传的需求~(已完成✔) (1)安装官网组件Upload 打开官网有个Upload 上传组件-通过点击或者拖拽上传文件:本次项目中用到了:图片列表缩略图结构 <!-- action-表示图片要上传到的后台api地址--> <!-- on-previ

Vue项目中使用ElementUI实现Steps步骤条和Tabs标签页的联动效果功能
摘要:
Vue项目中使用Elemen-tUI做一个steps步骤条:左边的内容和步骤条进度效果是同步的切换,顶部是 (1)steps步骤条 (2)Tabs标签页 (3)steps步骤条和tabs标签页之间的联动效果 思路: 那么这里需要步骤条的属性名称和标签页的属性名称联动同步切换的功能:步骤条是属性 :a

Vue项目中使用树形控件 vue-table-width-tree-grid
摘要:
Vue项目中使用树形控件 vue-table-width-tree-grid 需要实现的整体效果如下: 这个树形结构组件ElementUI是没有提供的,我们需要依赖第三方插件来完成。 一、安装tree-table组件 (1)Vue 可视化工程vue UI来安装: 我们打开VUE的可视化面板(在cmd

vue项目中手机号+邮箱验证正则~✔
摘要:
vue项目中手机号+邮箱验证正则~✔ vue项目中经常会遇到各种验证规则的需求。这里我把布局用ElementUI来写出来了。接下来需要添加用户,密码,手机号,邮箱的验证规则。 里面用户名,密码是比较简单的,直接用element提供的组件验证规则。手机号和邮箱是自定义规则,需要严格验证是否合法 1,首

ElementUI中Table和Switch组件中插槽scope应用使用场景
摘要:
ElementUI中Table和Switch组件中插槽scope应用使用场景 ElementUI 安装 npm i element-ui -S 引入 Element main.js 内容添加 import ElementUI from 'element-ui';import 'element-ui/

项目中使用ElementUI的Form 组件
摘要:使用ElementUI的Form 组件 (1)首先必须是项目中安装ElementUI库 (2)引入Vue的项目中 (3)引入对应的组件名称并且全局注册 ElementUI 安装 npm i element-ui -S 引入 Element main.js 内容添加 import ElementUI
项目上线-项目报告+创建web服务器
摘要:一般我们的项目开发完毕以后就需要考虑如何优化,如何将项目部署上线,提供给外界用户使用等的问题。 所有必须要考虑的问题是:优化项目,部署上线项目 项目优化方案: (1)生成打包报告:通过项目的Vue UI可视化工具生成一个打包的报告,根据报告发现和优化项目,进一步的区解决。(2)第三方库使用CDN:为
ElementUI的左侧菜单栏的小问题~~
摘要:
Vue后台管理的项目中使用了ElementUI的组件库。左侧菜单栏遇到了一些小问题,结果一步一步的解决了~~ 1,首先菜单栏的图标Icon不满足我们的需求,我们可以引入公司内部的样式icon图标文件,数组的方式动态渲染出来就可以。 2,左侧菜单栏的列表渲染完成后点击一个菜单发现全部菜单同时展开 3,

axios请求拦在器添加token(请求头添加token)保证有权访问请求数据~~
摘要:
axios请求拦在器添加token 开发项目中有很多个请求接口,除了login以外其他的请求接口有了访问权限才能正常请求数据访问页面。 需要授权的API必须每一次的请求携带token,就是请求头添加token,后端根据token来判断该请求有没有授权。 那么必须在请求头中使用Authorizatio

登录/退出—token验证(路由导航守卫控制访问权)
摘要:
登录/退出—token验证(路由导航守卫控制访问权)如果不是要访问登录页先判断登录状态,不在登录状态的强制跳转到login登录页面 登录功能 登录login页面点击按钮绑定点击事件@click="login" 1,login事件里先判断表单预验证:用户名和密码是否为合法。如果是合法内容直接走下一步发

Vue项目中定时器的问题...
摘要:Vue项目中定时器的问题... 比如说 我们现在在a页面写一个定时,让他每秒钟处理操作,比如:每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行。这样是非常消耗性能的。如下图所示: 解决方法1: 首先我在data函数里面进行定义定时器名称: data() { return { tim
登录与退出功能-保存token和设置token过期时间过期重新到登录页面
摘要:
Vue项目登录与退出功能-保存token和页面权限控制,设置token过期时间过期重新到登录页面,本地保存有token就直接不用输入账号密码跳转到首页 做vue后台管理系统的项目的过程中有个登录退出的业务逻辑: (1)发起登录请求之前做个对账号密码表单的合法性进行验证规则 (2)登录的时候发起请求获

解决vue项目$router.go(-1)返回刷新问题(keep-alive)
摘要:
相信每个人在项目中都会遇到这样的需求,就是跳到详情在返回来还希望保持原来的搜索结果,就是不希望刷新,这个时候呢keep-alive就起到了很大的作用 ***接下来就说说如何使用keep-alive来动态缓存页面的。 一: 直接在<router-view></router-view>外边加一层keep

百度分享插件
摘要:window._bd_share_config = { common : { bdText : '分享标题', bdDesc : '分享描述', bdUrl : '分享链接', bdPic : '分享图片' }, share : [{ "bdSize" : 22 }], image : [{ vie