Vue~UI框架功能 - 随笔分类(第2页) - Mahmud*小麦*

摘要：

对于element表格做点击跳转的功能有两大类：1，表头的点击跳转2，表格内容单元格进行点击跳转是因为该表格只有tabs标签也第二个选项被选中的时候才能让他起效果，所以先做判断，第二个tabs标签被选中的时候实现该功能 1，tabs标签做判断 this.saveTableName1是第二个tabs 阅读全文

posted @ 2023-01-10 13:51 Mahmud*小麦* 阅读(3824) 评论(0) 推荐(0)

echarts点击柱状图带参数跳转到指定页面（路由）

摘要：

echarts点击柱状图带参数跳转到指定页面（路由）项目开发者常用echarts来实现数据可视化功能。上次遇到了一个问题，就是通过后台返回的数据渲染echarts数据完成后需要点击柱形图图标的时候跳转制定的新的页面展示（当然新的页面内容，后台通过柱形图的参数来给我们返回过来的） 1，引入echar 阅读全文

posted @ 2023-01-10 12:06 Mahmud*小麦* 阅读(2888) 评论(0) 推荐(0)

element-UI 根据table中数据改变颜色或显示对应内容

摘要：

element-UI 根据table中数据改变单元格数据颜色或显示对应的内容的实现如下： 1.根据table中数据不同改变颜色（正数颜色为红色，负数颜色为绿色） <el-table-column prop="sharesReturn" label="盈亏(元)"> <template scope=" 阅读全文

posted @ 2022-12-30 11:04 Mahmud*小麦* 阅读(3680) 评论(0) 推荐(0)

el-table设置单元格里的字体颜色

摘要：

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

posted @ 2022-12-14 12:40 Mahmud*小麦* 阅读(1404) 评论(0) 推荐(0)

项目中elementui时间线的使用~✔✔

摘要：

Vue项目项目中经常会遇到事件线的功能Timeline，比如说快递跟踪功能等。element.js 时间线的使用，先来看效果图是因为element2.6.0之前的版本不支持时间线组件了。所有下载安装比较麻烦。这里推荐使用本地组件：直接放在pluginis目录下，然后引入就可以 timeline文件阅读全文

posted @ 2022-11-29 11:38 Mahmud*小麦* 阅读(2564) 评论(0) 推荐(0)

项目使用lodash（深拷贝）的方法

摘要：

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

posted @ 2022-11-28 14:29 Mahmud*小麦* 阅读(1099) 评论(2) 推荐(0)

Vue富文本编辑器（vue-quill-editor）使用✔✔

摘要：

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

posted @ 2022-11-28 12:12 Mahmud*小麦* 阅读(251) 评论(0) 推荐(0)

ElementUI实现图片上传的功能🌈~（已完成✔）

摘要：

Vue项目中经常会遇到使用ElementUI实现图片上传的需求~（已完成✔）（1）安装官网组件Upload 打开官网有个Upload 上传组件-通过点击或者拖拽上传文件：本次项目中用到了：图片列表缩略图结构  <!-- on-previ 阅读全文

posted @ 2022-11-27 23:17 Mahmud*小麦* 阅读(2996) 评论(1) 推荐(0)

Vue项目中使用ElementUI实现Steps步骤条和Tabs标签页的联动效果功能

摘要：

Vue项目中使用Elemen-tUI做一个steps步骤条：左边的内容和步骤条进度效果是同步的切换，顶部是（1）steps步骤条（2）Tabs标签页（3）steps步骤条和tabs标签页之间的联动效果思路：那么这里需要步骤条的属性名称和标签页的属性名称联动同步切换的功能：步骤条是属性 :a 阅读全文

posted @ 2022-11-27 14:30 Mahmud*小麦* 阅读(5154) 评论(0) 推荐(0)

Vue项目中使用树形控件 vue-table-width-tree-grid

摘要：

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

posted @ 2022-11-15 21:47 Mahmud*小麦* 阅读(2534) 评论(0) 推荐(0)

项目实现用户长时间不操作，自动退出登录⏳

摘要：

Vue项目实现用户长时间不操作，自动退出登录 1.实现思路使用 mouseover事件来监测是否有用户操作页面，然后写一个定时器间隔特定时间检测是否长时间未操作页面，如果是清除token，提示登录已过期请重新登录每隔10s去检查一下用户是否过了10秒未操作页面因为我这边是单点登录所以用户10秒阅读全文

posted @ 2022-11-12 15:06 Mahmud*小麦* 阅读(1045) 评论(0) 推荐(0)

vue项目中手机号+邮箱验证正则~✔

摘要：

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

posted @ 2022-11-09 20:22 Mahmud*小麦* 阅读(862) 评论(0) 推荐(0)

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/ 阅读全文

posted @ 2022-11-08 21:15 Mahmud*小麦* 阅读(305) 评论(0) 推荐(0)

项目中使用ElementUI的Form 组件

摘要：

使用ElementUI的Form 组件（1）首先必须是项目中安装ElementUI库（2）引入Vue的项目中（3）引入对应的组件名称并且全局注册 ElementUI 安装 npm i element-ui -S 引入 Element main.js 内容添加 import ElementUI 阅读全文

posted @ 2022-11-08 20:24 Mahmud*小麦* 阅读(138) 评论(0) 推荐(0)

左侧菜单改造路由链接

摘要：使用ElementUI实现左侧菜单改造路由链接 Vue的项目中我们会经常用到Element，Iview..等轻量框架来实现页面布局。如果是不是彻底理解这些框架的各个功能和属性的话会带来很多麻烦的。项目中用到了elementUI的菜单组件，有个展开和折叠功能。这个时候需要实现路由地址的改造链接：就是阅读全文

posted @ 2022-11-08 09:19 Mahmud*小麦* 阅读(155) 评论(0) 推荐(0)

ElementUI侧边栏展开隐藏折叠功能

摘要：

一般后台管理项目中无论是ElementUI或Iview 轻量UI框架都有很多组件来实现功能我们需要实现的是这样子的：在源代码里左侧菜单之前添加一个div，类名为“toggle-button”，然后在div中添加“|||”三个竖杠，作为可以折叠的图例：然后为该div添加样式然后给按钮添加事件事阅读全文

posted @ 2022-11-08 00:28 Mahmud*小麦* 阅读(4867) 评论(1) 推荐(0)

解决vue项目$router.go(-1)返回刷新问题（keep-alive）

摘要：

相信每个人在项目中都会遇到这样的需求，就是跳到详情在返回来还希望保持原来的搜索结果，就是不希望刷新，这个时候呢keep-alive就起到了很大的作用 ***接下来就说说如何使用keep-alive来动态缓存页面的。一：直接在<router-view></router-view>外边加一层keep 阅读全文

posted @ 2022-08-14 16:01 Mahmud*小麦* 阅读(2474) 评论(0) 推荐(1)

百度分享插件

摘要：window._bd_share_config = { common : { bdText : '分享标题', bdDesc : '分享描述', bdUrl : '分享链接', bdPic : '分享图片' }, share : [{ "bdSize" : 22 }], image : [{ vie 阅读全文

posted @ 2019-08-01 13:56 Mahmud*小麦* 阅读(218) 评论(0) 推荐(0)

关于iview ui的"Page分页"组件的使用

摘要：iView是一个很好的vue框架，但是因框架比较新，使用的案例比价少，官网上虽有api，但是api应用案例也比较少，下面来说下“Page分页”组件的使用，但我们属性了这个组件，会感觉到其实框架的套路也就这样，用法差不多的。这里给出Page分页网址：https://www.iviewui.com/c 阅读全文

posted @ 2019-06-28 18:21 Mahmud*小麦* 阅读(2541) 评论(0) 推荐(1)

Mahmud

随笔分类 - Vue~UI框架功能

公告