vue
过去式的美好
编程既是技术也是艺术
展开
-
vue前端通过sessionStorage缓存字典
通过后端获取字典,保存在前端session中,如果session有则使用,不存在的则调接口获取并增加字典过期时间原创 2024-07-01 16:08:04 · 462 阅读 · 0 评论 -
vue3以及vue2自定义封装v-model
在v2的时候,默认的prop字段是value,emit触发的名称是input,对于其他非输入框的例如checkbox的prop应该是checked,emit触发的名称应该是change。这些prop跟emit对应的用于原生组件使用。v3则由默认的value改成modelValue,并且emit触发的名称由input改成update。并且允许加上修饰符(绑定自己定义的属性名称),例如:emit(‘update:values’, e);因此v3可以绑定多个属性为双向绑定。v2通过 原生组件@input事件得到的原创 2022-11-18 09:43:37 · 880 阅读 · 0 评论 -
express+mockjs+axios实现简单的vue3.x获取分页模拟数据
想为了提升开发效率,基于接口文档已确定,前端可以模拟后端数据接口返回一些mock数据从而达到同步开发。使用到的框架依赖:expressmockjsbody-parser@vue/cli到4.x脚手架就够了,5.x的看个人需求axioselement-plus我这边是分两个项目分别搭建服务器跟前端(都在同一台电脑上),使用vue脚手架创建项目,并安装axios,element-plus依赖。使用npm init在空文件中初始化服务器项目,并安装express,mockjs,body-par原创 2022-02-24 10:48:43 · 875 阅读 · 0 评论 -
记录vue+elementui 动态添加输入选择框并增加校验
一个新的需求,需要动态添加选择条件,虽然可以实现了,但是在校验提示部分感觉欠佳,直接通过$message 的方式提示不够友好,最后通过网上示例完善校验,对部分几个点做个人总结。实现思路:1.由于vue是通过数据驱动展示页面内容,那么可以通过“添加条件”按钮往一个数组中添加对象,然后在下面展示区for循环遍历数组,从而动态生成输入表单。2.已经完成了动态生成输入框/选择框。那么就是怎么加校验了。注意点来了,该循环的数组对象一点是要在这个form表单绑定的对象中才行:model="dialogForm"原创 2022-01-20 16:45:54 · 6389 阅读 · 0 评论 -
vue for循环图片加载异常显示默认图片
<el-row > <el-col :sm="6" :md="4" v-for="(o,index) in tableData" :key="o.id" style="padding:20px"> <el-tooltip effect="dark" :offset="0" placement="top"> <div slot="content">访问地址:{{o.visi原创 2021-08-23 18:04:05 · 378 阅读 · 0 评论 -
vue 左侧导航右侧内容互定位
1.需求:点击左侧导航,右侧内容定位到指定位置。右侧数据内容滚动,左侧导航对应定位颜色。同时左侧导航复选框选中时,右侧内容位置对应选中。部分代码通过百度网上查到,抄抄改改。2.实现思路:左侧用 ul li 实现导航效果,从左侧导航到右侧内容定位可以用锚点方式。我这边左侧用 click点击事件,<div style="width:100%;height:500px;overflow:auto"><div class="left-menu"> <ul .原创 2021-08-17 18:27:01 · 3360 阅读 · 2 评论 -
el-tree支持类似懒加载效果及其多选回填功能
需求来源:组织机构树的数据太多全一次性加载树数据会导致页面卡死或崩溃(比如组织机构树有十万条而且有十级层级)原先是想用官方懒加载功能,但是用时发现取不到树的data属性值,也就是树数据源。导致没办法回填勾选树节点。也取不到树数据做些其他操作。后续觉得可以自己根据已有根节点加载出响应的下级子节点。这样就相当于懒加载了。实现思路:1,页面初始化时调接口后端返回根节点数据。2,点击节点时后端根据节点Id 返回当前节点及其下层子节点数据(children)属性数据。3. 迭代当前树数据,判断当前点击的节点id原创 2021-04-15 18:44:25 · 1617 阅读 · 2 评论 -
el-tree只能勾选已选同层
最近有个需求,树结构选项,如果有已勾选节点了,后续只能勾选同一层级节点数据。感觉可以记录下。实现思路:1.同一层级的上一节点(父节点)肯定是相同的。所以判断当前勾选的节点的父节点是否相同2.如果没有已选节点则可以随意勾选节点<el-tree check-strictly show-checkbox ref="orgTreeRef" node-key="dataId" @check-change="orgNodeChange" :data="orgTree" accordion><原创 2021-03-02 19:05:38 · 1279 阅读 · 2 评论 -
js axios文件流下载
downTemplate: function(id) { // partyAccountRole.vue页面 this.$message.info("正在下载,请稍等"); let params = { id: id }; // let param ={"templeType":this.updateParams.temp...原创 2020-04-01 11:27:26 · 1322 阅读 · 0 评论 -
vue+elementui 实现动态必填表单项操作
实现表单项动态必填功能,目前看到方法有两种1.在必填的el-form-item 写两个一样的,一个有rules一个没,然后用v-if去动态判断2.现在要说的是方法2,大部分网上看的都是用方法一的方式,而且基本都copy的文章1)首先在data()数据定义中先定义个布尔值isIpv4:true, //是否是必填项2)在html页面部分写动态的rules<el-form-item...原创 2019-12-23 10:53:00 · 7956 阅读 · 9 评论 -
vue+elementui+vuex+sessionStorage实现历史标签菜单
一般是有左侧菜单后,然后要在页面上部分添加历史标签菜单需求。借鉴其他项目,以及网上功能加以组合调整实现按照标签实现方式步骤来(大致思路):1,写一个tagNav标签组件2,在路由文件上每个路由组件都添加meta属性 meta:{title:'组件中文名'}3,在store的mutation.js文件中写标签的添加/删除方法以及在方法中更新sessionStorage数据4,在主页面上添...原创 2019-12-02 11:35:37 · 2388 阅读 · 0 评论 -
关于vue+elementui设置div背景图片填充不生效问题
正常css填充div图片背景.itemDiv { background-size: 100% 100%; background-repeat: no-repeat; background-image: url(../../images/Tickets_background.png);}但是在vue项目中不生效,需要改成如下。.tip-div { positio...原创 2019-07-15 15:46:08 · 5874 阅读 · 0 评论 -
vue+el国际化-东抄西鉴组合拳
vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585说得比较详细。另外做点补充,比如这里cn下的可以以项目模块加公共模块来细分。import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = { m...原创 2019-07-05 09:45:17 · 272 阅读 · 0 评论 -
chart 完成拓扑图单节点拖拽不影响其他节点位置
就是做这种的功能,箭头原本是可以动态重复移动的,但不知道哪里问题导致没箭头了,然后补了个edgeSymbol: ['','arrow'], 字段,才增加了箭头。拖拽某个节点,只有关联到的线条会跟着变动其他的节点位置不变。参考https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9https://echarts.baidu.com/exam...原创 2019-04-22 17:19:34 · 3554 阅读 · 14 评论 -
vue同页面多路由懒加载-及可能存在问题的解决方式
先上图,再解释图一是多路由页面,图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应,并且图二的路由层在跟图一对应的页面中要加上components层,多一个s结尾,里面的的方法名就是图一路由的name值,里面还可以照样用懒加载的方式。页面上其他的路由在路由文件中也跟图二是一样的写法。附送可能存在的问...原创 2019-04-04 10:05:55 · 2107 阅读 · 0 评论 -
vue子路由回退后刷新页面方式
最近碰到一个小问题,页面中含有<transition name="router-slid" mode="out-in"> <router-view></router-view> </transition>作为子页面加载显示的地方。但是一般正常子路由通过 this.$router.go(-1) 返回到上一层原先的页面中。通过路...原创 2019-03-13 09:47:27 · 6174 阅读 · 0 评论 -
vue+elementUI下拉框联动显示
<el-row> <el-col :span="12"> <el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"> ...原创 2019-03-19 17:14:57 · 5969 阅读 · 1 评论 -
vue 路由跳转新的窗口页面
<template> <div id="accordion"> <ul class="side_menu"> <li v-for="(item, index) in menus" class="item"> <router-l原创 2019-03-14 16:23:36 · 1918 阅读 · 0 评论 -
vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决
解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时,抬起并不会再触发。而keyup.enter事件是在抬起时触发。so,找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的 //js中 all...原创 2019-03-14 11:15:47 · 2222 阅读 · 0 评论