vue
vue
毅大师
java开发程序猿
展开
-
vue-admin动态路由的实现
前言:项目开发中菜单栏往往是后端基于角色控制的,所以菜单栏通过后端返回,然后在进行渲染,vue-admin这个管理系统模板用的人贼多,以此为例。一、首先打开router/index.js文件吗,把constantRoutes写的静态路由全删了,只留下公共的界面,比如login、404之类的。因为这些路由后面通过接口获取。二、在store/modules/permission.js进行修改,如果没有文件就创建,该文件使用vuex的状态管理,把路由信息存储起来,最后把// router/..原创 2021-06-23 16:47:15 · 11762 阅读 · 282 评论 -
js 遍历树形结构(Tree),根据id找到对应的name(递归)
getTreeName(list,id){ let _this=this for (let i = 0; i < list.length; i++) { let a=list[i] if(a.id===id){ return a.name }else{ if(a.children && a.children.length>0){ ...原创 2021-05-10 16:55:28 · 8214 阅读 · 5 评论 -
js正则实现关键字高量-替换html标签的text文本内容的指定值
一、背景在开发中,有个需求是关键字高量显示,如果只是存文本形式就很简单,但是我的数据是自定义的模板,一大段html代码,这个时候需要把文本内容的指定关键字找出来,替换成加红色后的样式。网上的代码好多都是直接把html标签清空返回,得到的只是text内容,我的是必须包含html标签,只替换内容关键点:html标签的text内容的指定值二、效果展示:原始效果: 关键字高量显示:三、实现代码思路:在html标签中找出text文本内容,在...原创 2021-03-26 15:26:22 · 4123 阅读 · 80 评论 -
element ui中dialog编辑回显数据后关闭,重置表单,然后新增重新打开dialog,表单没有重置
问题描述:一般表单使用 this.$refs[formName].resetFields() 进行重置,但是elementui中,清空数据是基于第一次打开时的数据为模板进行重置,由于第一次点击的编辑,数据渲染到模板上了,所以dialog就认为这个是初始模板,每次重置都以这一部分数据来重置表单。解决方案:渲染表单用以下方式:this.$nextTick(function () { _this.ruleForm = {...data};})...原创 2020-12-23 14:27:20 · 3006 阅读 · 2 评论 -
element-ui中el-tree树节点的级联操作(取消子节点,父节点不变)
首先,这个tree节点操作中,选中了父节点,会默认选中全部子节点,某个子节点没选中,那么所有父节点都为半选状态。半选状态时,使用this.$refs.tree.getCheckedKeys()是获取不到半选状态节点的id的。现在需求是:选中父节点,子节点全部选中,取消某个子节点,父节点不变。关键点是@check-change事件和this.$refs.tree.setChe...原创 2020-04-26 16:00:22 · 11686 阅读 · 16 评论 -
vue-cli项目中this.$router.push传参的各种方式和接受参数
1、必须在router/index.js中配置这里有三个参数,后面跳转需要用到:1、path:跳转路径2、name:跳转的名字3、component:组件名字2、跳转this.$router.push({key1:'/xx/xx',key2: {id:'1'}});key1:可以写2个值name:根据路由配置中的name属性查找,进行跳转。值必须是路由...原创 2020-04-26 13:47:40 · 6745 阅读 · 20 评论 -
vue-cli引入axios
1、创建vue-cli项目:https://blog.csdn.net/qq_39648029/article/details/1042500672、下载依赖:npm install axios --save3、 在 main.js中添加如下代码:import axios from 'axios';Vue.prototype.$axios = axios;...原创 2020-04-17 15:48:12 · 6183 阅读 · 58 评论 -
vue引入element-ui
1、安装npm i -S element-ui百度出来的是npm i element-ui -S,这个会出错,-S换到i后面就好了。2、在main.js中添加import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);3、...原创 2020-02-28 15:59:37 · 296 阅读 · 0 评论 -
创建第一个vue项目
1、安装node.js下载地址:https://nodejs.org/en/download/下载完成后直接默认安装,安装完成执行:node -v2、使用淘宝的npm镜像,这样下载依赖会很快cmd中执行:npm install -g cnpm --registry=http://registry.npm.taobao.org3、安装vue-cli脚手架构建工具cmd中执...原创 2020-02-10 16:06:09 · 684 阅读 · 29 评论 -
Ant Design moment对象和字符串之间的相互转化
moment对象转字符串values.saleStartTime=values.saleStartTime.format('YYYY-MM-DD');字符串转moment对象this.model.saleStartTime=moment(record.saleStartTime);原创 2019-12-12 14:23:29 · 4606 阅读 · 0 评论 -
vue学习笔记4、父子组件之间的数据通信
1、父组件向子组件进行数据传递<body> <div id="app"> <p>{{a}}</p> <br/> <br/> <son :parentval="a"></son> </div> &l...原创 2019-11-18 17:19:19 · 390 阅读 · 0 评论 -
vue学习笔记3、实例的声明周期
什么是生命周期:从Vue实例创建、运行、到销毁期间人总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子:就是生命周期事件的别名而已;主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate :实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性 created :实例已经在内存中创建OK ,此时data和methods已经...原创 2019-11-13 15:31:49 · 357 阅读 · 0 评论 -
vue学习笔记2、v-model实现表单元素的数据双向绑定
v-bind只是单向绑定v-model双向绑定,只要这里面任意一个地方的值变了,其余地方都会变v-model只适用于表单元素中<body> <div id="app"> <p>{{msg}}</p> <input type="text" v-model="msg" style="width:5...原创 2019-11-12 16:56:51 · 488 阅读 · 0 评论 -
vue学习笔记1、事件修饰符
.stop阻止冒泡 .prevent阻止默认事件 .capture捕获机智 .self只有点击自己才执行(只会阻止自己发生的冒泡,并不会阻止别人的冒泡) .once只触发一次就失效 <body> <div id="app"> <div class="box" @click="div">...原创 2019-11-12 15:51:45 · 243 阅读 · 0 评论