m0_51073906的博客

原创 vue表单必填项过多时点击自动跳转聚焦最上一个必填项

【代码】vue表单必填项过多时点击自动跳转聚焦最上一个必填项。

原创 下载文件,自动获取后端返回文件名,并自动识别文件格式,如果是iso-8859-1编码转换utf-8

vue下载获取文件

原创 vue实现前端验证码

【代码】vue实现前端验证码。

原创 vue文字广告循环匀速滚动效果

需求：vue实现文字在div中从左到右实现循环滚动效果，鼠标移入暂停滚动，鼠标移出继续滚动，从后端拿到文本数据，不管数据长短，循环匀速播放。

原创 elementui竖向导航栏卡顿问题

只需要加上这行CSS即可，同时设置菜单宽度也在这个CSS里面设置，效果完美。今日发现Element 菜单折叠效果卡顿。

原创 map处理对象数组不更改原数组的方法

map处理对象数组不改变原数组

原创 如何使用Element ui 树形表格 增删改查

elementui 树形表格 增删改查

转载 vuex存取数据 刷新页面数据不丢失问题

vux存取数据 刷新页面数据不丢失问题

原创 表格@selection-change分页勾选数据清空问题

el-table 表格切换分页勾选框丢失问题

原创 js简洁方法

1.数组去重let arr = [1,2,3,4,5]let arr1 = {...arr}console.log(arr1)3.字符串转Numer类型let str = '123' //numberlet num = +strconsole.log(typeOf(num)) //Number4.Number转字符串类型let num = 123 //numberlet str = num + ''console.log(typeOf(str)) //String

原创 一个数组赋值给另一个数组。修改这个数组会改变原来的数组里的内容。深拷贝和浅拷贝

对象或数组的简单赋值，修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。方法一知道要赋值的是对象还是数组对于对象，可以通过newObj = JSON.parse(JSON.stringify(obj))实现。对于数组，可以通过 newArr = […arr]或者newArr = arr.slice(0)来实现。方法二不知道要赋值的数据类型还有个通用的方法调用一次let isClass=function(o) {undefinedif (o === null) return “Null”

原创 Vue子组件调用父组件的方法函数

第一种方法直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import child from './components/dam/child'; export default { components: { child

原创 vue element el-input 输入框当内容长度超出时现示el-tooltip提示

html <el-form-item label="派驻寿险机构" prop="lifeComName"> <el-tooltip :disabled="disabledTooltip" effect="dark" :content="ruleForm.lifeComNameStr" placement="top"> <el-input ref="lifeComNameStr" v-model="ruleForm.lifeCo

原创 Vue子组件调用父组件的方法函数

第一种方法直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import child from './components/dam/child'; export default { components: { child

原创 父组件通过事件显示子组件弹框

// 子组件正常填写<dialog :visible.sync="dialogvisible"></dialog>// 子组件<components ref="authordialog"><components>// 父组件不需要给子组件传递dialogvisible// 事件中填写 click () { this.$nextTick(() => { this.$refs.authordialog.dialogvisible =

原创 如何将字符串false、true转为boolean类型

JSON.parse('true')JSON.parse('false')

转载 如何完整的搭建一个项目的开发环境？

本章节主要说的是如何完整的搭建一个项目的开发环境一、安装vue脚手架首先创建一个文件夹并且在本文件夹的黑窗口(cmd命令进入)安装Vue的脚手架，使用：cnpm i -g @vue/cli 命令进行安装检查是否安装成功 ：vue --version 命令二、前端vue项目创建创建前端项目文件夹 vue create 项目名例如：vue create kigo-web2.选择Man…(手动安装)3.选择需要的样式4.用2.0x5.Use history mode for router

原创 vue中动态添加class类名的方法

<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名， 第二个参数：boolean值 --> <!-- 对象的形式: 用花括号包裹起来，类名用引号， --> <!-- 优点: 以对象的形式可以写多个，用逗号分开 --> <p :class="{'p1' : true.

原创 vue中动态添加class类名的方法

<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名， 第二个参数：boolean值 --> <!-- 对象的形式: 用花括号包裹起来，类名用引号， --> <!-- 优点: 以对象的形式可以写多个，用逗号分开 --> <p :class="{'p1' : true}

原创 js正则效验不能全为数字、字母 不超过50字符

var regu = " ^(?![0-9]+$)(?![\u4E00-\u9FA5a-zA-Z]+$)[0-9A-Za-z]{6,20}$"

原创 vue中，实现锚点定位及跳转（url不发生变化）

出现问题：has模式的原因页面实现锚点跳转，但跳转之后点击返回列表时候由于url地址出现#id，导致点击列表或创建修改成功不会返回列表。 解决办法：<div class="footer" @click="returnTop"> 跳转 </div> <div id="header"> 内容 </div> methods:{ returnTop:function(){ document.querySelector("

原创 vue实现监听滚动条

绑定在window上 addEventListener 事件需要 第三个参数设置为true，不然事件不起作用 mounted() { window.addEventListener('scroll',this.handleScroll,true) } methods: { handleScroll(){ let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; co

原创 vue获取当前年月日

首先在方法里声明时间接收addDate() { let nowDate = new Date(); let date = { year: nowDate.getFullYear(), month: nowDate.getMonth() + 1, date: nowDate.getDat

原创 vue 的 for 循环体里面的 element UI 表单项添加必填校验

今天遇到一个需要给 for 循环体里面的 form 表单项添加校验的需求，为每一个循环的模块单独添加校验，实现如下：<el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeh

原创 ＜pre＞标签用法 展示代码块

你可能正在使用 pre 标签。这是一个 HTML 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一个。　主要用于来显示代码块 包括换行空格　后端返回字符串的json　前端需转换 JSON.parse()　然后放入《pre》标签内let data = "{sunny:sunny}"data = JSON.parse(data)<pre>{{data}}</pre>...

原创 vue初始化全部的 data数据

初始化全部的 data数据很强！！Object.assign(this.$data, this.$options.data());

原创 js 判断对象中是否含有 键

在js后台返回对象中，判断是否存在该key， 和java 中判断map中是否还有该key 差不多意思：data： 是后台的返回对象，如 在ajax success 中返回的对象。data.hasOwnProperty("key") ---> true or false

原创 传参为fromdata表单时 需要传入证书有特殊符号需怎么转义

场景：上传证书后返回字符串包含 ±= 中文 fromdata模式会自动将特殊符号转义 后端接收不到这个值 需转义encodeURIComponent(URIstring)JSON.stringify() 传多个数组和其他类型数据`

原创 数组a的key的value值，拿走数组B的vaue值

var a = [] let b = [{ mz: '我是名字', bumen: '我是工号' }, { mz: '我是名字2', bumen: '我是工号2' }] b.forEach((item, index) => { a.push({ value: item.mz, bmid: item.bumen }) }) console.log...

原创 js 判断是否为对象

原创 VUE+ELEMENT-UI实现表格CHECKBOX单选

因为element-ui上面的带checkbox的表格，是多选。如下操作，能把多选变成单选。最终结果如下图：代码如下： <el-table ref="multipleTable" :data="dialogTables" @select-all="dialogCheck" @select="dialogCheck" @selection-change="dialogCheckChange"> <el-table-column type="selection" width="

原创 两个相同数组筛选相同项

let arr = [{ id: 1, name: 'zs' }, { id: 2, name: 'ls' }, { id: 3, name: 'ww' }, { id: 4, name: 'xm' }, { id: 5, name: 'xh' },]let sum = [{ id: 1, name: 'cc' }, { id: 2, name: 'ls' }, { id: 3, name: 'ww' }, { id: 4, name: 'xm' }, { id: 5, name: 'xh' },] d

原创 将一个已知数组的所有对象其中某些值赋值给另一个数组

需求：需要将一个数组中的所有对象其中的某些键值对赋值给另一个数组，并且这个新数组是[[],[]]多重数组 赋值给第一个数组<script> let b =[[],[]] let c = [ { a:1, b:2, c:3, }, { a:1, b:2, c:3, },

原创 js怎么遍历对象 JS 快速将对象中所有键赋值为空

遍历对象：Object.keys(arr)console.log(Object.keys(arr))JS 快速将对象中所有键赋值为空‘’arr = { a : '1111', b : '2222', c : '33333'}Object.keys(arr).forEach(key=>{arr[key]=''})console.log(arr)

原创 setChecked和setCheckable区别

setChecked和setCheckable区别setCheckable(true)为属性，表示可以选中setChecked（true）为属性的值，表示已经选中<div ref="tree"></div>methods:{check () {this.$refs.tree.setChecked(data,true)}

原创 vue解决非响应数据问题方法

在Vue官方文档中指出，$forceUpdate具有强制刷新的作用。$forceUpdate()那在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的<template> <p>{{userInfo.name}}</p> <button @click="updateName">修改userInfo</button>&lt

原创 elementui中导航组件点击二级菜单页面跳转但是二级菜单关闭问题

elementui中导航组件库 多个一个菜单中包含二级菜单 第一次点击二级菜单页面跳转但是二级菜单关闭功能解决方法： :default-active="$route.path" :unique-opened="true"根据路由判断是否展开当前选中项...

原创 动态路由传值

出现情况：1.在主页面进入相同页面时显示数值不相同可以根据动态路由传参，在相同页面中mounted中监听动态路由参数判断来做出逻辑主页面 // 相同页面 this.$router.push({name: '路径一级名称-二级名称', params: { // 参数名 ：数值 tablebtn: true } })相同页面 mounted () { // 输出路由 // 根据路由传参做出判断 i

原创 async异步和await等待使用

asyncasync的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数也就意味着该函数的执行不会阻塞后面代码的执行，async函数返回的是一个promise 对象。async 函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号 且 使用 .then的方法（参考https://www.jianshu.com/p/ab767311589d）awaitawait的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继

原创 项目点击默认导航第一项内容

在当前文件夹下index中设置<template> <div id="app"> <router-view /> </div></template><script>export default { name: 'App', // 需要router-view中使用默认 created: function () { this.$router.push({name: '路径一级名称-二级名称'})