xiongdaandxiaomi-CSDN博客

原创 js中forEach跳出循环问题

在使用foreach 做循环时使用return 没有效果；forEach没办法终止（异常除外。）var multipleFlag = true; this.singleRow.forEach(element => { if(element.itemState == '2'){ multipleFlag = true; return multipleFlag }else{ multipleFlag = false;

2020-06-15 14:26:43 787

原创 vue下拉框数据清空后，赋值无效

1、页面效果2、背景一级项目与二级项目联动，当选择“一级项目”后，清空“二级项目”选择框内容，此时出现赋值无效的问题。3、解决页面methodgetSecondName(){ this.$forceUpdate();}添加this.$forceUpdate();进行强制渲染，效果实现。因为数据层次太多，render函数没有自动更新，需手动强制刷新。...

2020-06-11 15:46:21 2584

原创 Vue 表单只提交修改过的部分

文章目录1、页面效果2、实现1.修改回显2.声明，method3.提交方法时调用1、页面效果2、实现1.修改回显注意：在this.reset() 方法中每次清空 diffDatathis.diffData = {};2.声明，methoddata() { return { …… 之前的数据不变 form: null, //记录设备原始数据 diffData: null, //记录修改过的值 }}, /

2020-06-04 17:13:27 3949 2

原创 Vue路由导航两种方式router-link router.push

文章目录1、页面效果2、路由配置router.js3、html4、小结1、带参数的路由2、获取参数方法：1、页面效果2、路由配置router.js{ path: '/contract', component: Layout, hidden: true, children: [ { path: 'type/invoice/:dataId/:itemId/:number/:name', component: () =&gt

2020-06-02 14:13:00 771

原创 Element-Ui input只允许输入数字和两位小数

方法一1、页面效果2、form表单<el-form-item label="审计价格(元)" prop="auditPrice"> <el-input v-model="form.auditPrice" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入审计价格" /></el-form-item>3、校验规则 data() { const validate

2020-05-29 10:39:47 31050 4

原创 el-checkbox同时获取value 和 name

1、页面效果2、后台返回checkbox数据格式3、实现el-checkbox-group 所对应v-model 必须是数组格式，且没有层级嵌套<el-checkbox-group v-model="checkModule"> <el-checkbox v-for="item in checkModuleList" :label="item.dictLabel" :value="item.dictValue" :key="item.dicValue" @chang

2020-05-21 13:45:48 5974

原创 JavaScript join() 方法

console.log('.--',checkarrname)console.log('.--',checkarrname).join(',')

2020-05-21 11:31:47 276

原创 Vue+Element实现表格的编辑、删除、以及新增行

文章目录方案一、原生表格1、页面效果2、实现3、定义方案二、element表格1、页面效果2、实现3、定义方案一、原生表格1、页面效果2、实现3、定义addRow:[{configInfo:{fieldEnglishName:'',fieldChineseName:'',totalType:'',fieldLength:'',isNotNull:'',primaryKey:'',remark:'',isNotSelected:'0'}}],方案二、element表格1、页面效果2、实

2020-05-15 18:34:42 4619

原创 Vue，element-ui中Select组件创建新选项

1、页面效果2、使用3、实现<el-select class="width100" v-model="form.nowname" clearable multiple filterable allow-create default-first-option placeholder="输入修改后的文件名，用回车添加"> <el-option v-for="item in newName" :key="item.key" :label="item.label" :value="

2020-05-15 18:07:20 7001 1

原创 vue中使用moment封装时间过滤器

文章目录1、安装2、在main.js 引入组件3、注册组件4、在需要转换时间的页面使用1、安装npm install moment --save # npm2、在main.js 引入组件import Moment from 'moment'3、注册组件//定义全局过滤器Vue.filter('convertTime',function(data,formatStr){ return Moment(data).format(formatStr)})4、在需要转换时间的页面使用{

2020-05-14 10:10:53 520

原创 [Vue warn]: Error in render: "TypeError: date.getFullYear is not a function" found in

添加完毕点击“修改”按钮时报错解决方案如下1、rerurn 定义时，设置为null2、在时间控件添加 value-format

2020-05-11 18:11:20 13744

原创 vue项目整合ueditor，将其封装为公共组件

文章目录1、下载依赖2、引入组件3、注册组件4、绑定数据5、配置参数注意6、封装为组件使用7、页面效果8、拓展1、下载依赖npm i vue-ueditor-wrap -S2、引入组件import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module3、注册组件components: { VueUeditorWrap}// 或者在 main.js 里将它注册为全局组件Vue.component('vue-ueditor-wrap'

2020-05-09 09:44:42 1252

原创 element-ui table组件中Table Events使用

文章目录页面效果table组件设置hover时背景颜色一、直接修改css样式二、配合cell-mouse-enter cell-mouse-leave使用Table Events 使用说明实现methods中html中页面效果鼠标hover时显示当前行下可编辑的元素table组件设置hover时背景颜色一、直接修改css样式.el-table .el-table__body tr:ho...

2020-04-10 23:04:37 4867

原创 z-index 层级的使用

注意只有定位的盒子（除了static）才有z-index如果都是定位，他们默认的z-index是0，最后一个靠上背景：鼠标hover时出现边框html 方法一<style> .test{ width:150px; height: 300px; float: left; border:1px solid #ddd; margin-top: 50px;...

2020-04-09 11:44:29 775

原创 Element-UI改变单元格样式

页面效果：点击单元格时，在printer name和location两列，显示编辑按钮，并且互斥，只显示一个实现methods中方法cellclick(row, column, cell, event){ console.log(row, column, cell, event) if(column.label == 'Printer Name'){ ...

2020-04-08 18:44:04 1817

原创给数组中每个对象加一个相同属性

原数组：["赵","钱","孙","李"]目标数组：[{"name":"赵"}，{"name":"钱"}]，{"name":"孙"}]，{"name":"李"}]]，实现js：var list = ["赵","钱","孙","李"];let array=[]; list.map((item,index)=>{ array.push( Object.assig...

2020-04-02 21:40:23 2025

原创 Vue 自定义全局Loading组件

自定义标题1、页面效果2、思路3、Loading.vue 组件4、loading文件夹下的 index.js5、在main.js中注册6、引用1、页面效果2、思路在component文件夹下新建loading文件夹，用于存放Loading.vue,index.js 和其他依赖文件3、Loading.vue 组件<template> <div class="lo...

2020-03-20 18:05:39 2674

原创 elementUI中日期时间插件（DateTimePicke）限制结束时间大于指定的开始时间并且结束时间小于当前时间

有小伙伴问以下问题，为了方便说明特作此文以解惑效果如下选择指定时间以后的时间为结束时间相关实现代码为HTML <div class="block"> <span class="demonstration">开始时间：</span> <el-date-picker v-model="startTime" ...

2020-02-10 11:39:18 2057 1

原创百度地图路书添加回调功能

百度路书API需求分析在路书跑完后，隐藏小车图标页面效果html //路书--start--_this.drivingCar = new BMap.DrivingRoute('北京', { onSearchComplete: function(res) { if (_this.drivingCar.getStatus() == BMAP_S...

2019-11-19 16:06:17 1346

原创 vue中websocket心跳机制

参考链接直达：vue中websocket心跳机制

2019-11-07 15:30:02 1573

原创流程公共组件封装，父子组件

父传子：用prop； props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值，Vue 警告。子传父：1，用ref ，父中通过this.$refs["***"].属性可以得到子组件的data属性值，共享，能进行更改操作；2，用eventBus 监听事件与触发事件；页面效果子组件...

2019-10-17 17:05:47 356

原创 Vue+WebSocket 实现页面消息提醒

项目中有些系统消息需要实时提醒，如果数据量不大的情况下可以考虑定时器。页面效果主要代码<script> export default { data() { return { websocket: null, } },　　　　created(){ ...

2019-10-08 17:52:23 9919 6

原创 echarts 清空上一次加载的数据

目标效果及数据格式echarts目标链接后台数据格式Json中List类型，并遍历List中的对象 for(var i in sigleRow) { chargingPowerList.push(sigleRow[i].chargingPower); drivingMileageList.push(sigleRow[i].drivingMileag...

2019-09-20 18:25:49 27801 1

原创百度地图覆盖物使用本地图标Marker

js方法// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);//图标var pt = new BMap.Point(116.417, 39.909);var myIcon = new BMap.Ico...

2019-08-28 16:36:31 2685

原创 echarts 散点地图

效果图数据格式转换var convertData1 = function(data,index) {console.log('daft',data)var res = [];for (var i = 0; i < data.length; i++) { var geoCoordCar = data[i]; if (geoCoordCar) { res.push({ n...

2019-08-21 13:55:09 1148

原创 js中获取项目名，路径等

在jsp中可以使用<%=path%> 获取当前项目名，但如果在外部js中则不能使用。以下是替代方案：//获取当前网址，如：var currentWPath=window.document.location.href;//获取主机地址之后的目录如：/project/index.jspvar pathName=window.document.location.pathname;...

2019-08-13 17:02:12 1111

原创 vue单页面使用百度地图

需求：采用vue组件化开发的单页应用项目，现需要在项目中引入百度的地图展示功能，用于展示站点的分布情况。交互：点击某个站点，弹出站点的基本信息。地图支持聚合和缩放。页面效果在这里插入图片描述使用方式我这里只演示单页应用的开发方式。1.安装组件npm install vue-baidu-map --save2.注册组件组件的注册可以分为全局注册和局部注册，我这里采用的是局部注...

2019-08-12 18:04:22 1672 1

原创百度地图绘制行驶轨迹、折线上添加箭头、修改地图底色

页面效果页面代码<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user...

2019-08-12 17:35:05 4962 3

转载编写一个方法去掉一个数组中的重复元素

分析：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。参考链接 JavaScript语法基础：数组的常用方法详解

2019-08-09 15:23:10 1306

原创 vue中使用vue-awesome-swiper

npmjs网站直通车全局引用import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper' // require stylesimport 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options ...

2019-08-05 16:47:41 401

原创 window.clearInterval与window.setInterval

clearInterval和setTimeout区别setTimeout()只执行函数一次，如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()window.setInterval()功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。语法：setInterval(code,millisec)...

2019-07-24 11:11:30 835

原创 JavaScript实现无缝滚动图片

自动滚动，鼠标浮在滚动区域内，停止滚动<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ...

2019-07-23 18:09:20 173

原创模拟实现select效果,可搜索

html<span>所属线路：</span><div class="rowline"> <input size="small" class="containIpt" id="sellineName" v-model="searchingCondition.lineName" clearable @focus="isshowlist" @inp...

2019-07-22 18:14:48 995 3

原创 vue 点击其他区域关闭自定义div

方法一：在外层div添加事件 @click="closeSel"htmlmethod closeSel(event){ var currentCli = document.getElementById("sellineName"); if(currentCli ){ if(!currentCli.contains(event.target)){ ...

2019-07-22 18:05:31 5410 5

原创 vue v-model赋值立即生效问题 set get

我们将调用接口后的返回值，分别给车队名称，线路名称，车牌号赋值时发现没有立即回显出来_this.updateRecordOpe.carNo = obj.data.carNo //没有生效解决方法如下，使用$set对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属...

2019-07-19 14:07:03 8695

原创 javascript倒计时

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><input type="text"/><button id="btn"&gt...

2019-07-18 15:00:37 273

原创 Web前端开发规范手册

文章目录1 文件命名规则a. HTML的命名原则b. 图片的命名原则c. javascript的命名原则d. 动态语言文件命名原则2 文件存放位置3 css 书写规范4 html书写规范1.网页制作细节 ---- head区代码规范2.网页制作细节 ---- 字体3.网页制作细节 ---- 链接4.网页制作细节 ---- 表格5.网页制作细节 ---- 下载速度6.网页制作细节 ---- ...

2019-07-16 14:18:49 6486 1

原创 css3 transition属性实现三角形

css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值，增强用户体验。transition主要包含四个属性值1、变化的属性：transition-propertytransition-property : none | all | [][’,’]* ;...

2019-07-11 15:49:43 1435

原创将两个数组中重复的数据保留

描述：在右侧val（selectBranchIdList）中不存在的数据删除掉item为左侧数据for (let index = _this.selectBranchIdList.length - 1; index >= 0 ; index--) { _this.teamIds.filter(function(item, second, array){ if(...

2019-07-08 18:04:49 1528

原创关于时分秒各种格式相互转换

文章目录秒数转换成时分秒格式时间转为秒秒转为时间获取当前日期时间戳秒转年月日时分秒秒数转换成时分秒格式/*** 秒数转换成时分秒格式* @param time 秒* @returns XX小时XX分XX秒*/eg: msd = 1935087274 ⇒ 537524小时14分34秒export const secondToHour = function (msd) { ...

2019-07-05 14:40:46 5706

百度路书添加回调方法后js

空空如也