sumiao64427的博客

原创 el-table实现动态表头

el-table动态表头

原创 npm 下载包失败解决方案

npm下载依赖包失败解决方案

原创 echarts多图联动并闪烁标注

echarts多图联动及闪烁标注

原创 vue中export和export default

export和export default

原创 vue中全局变量

vue中全局变量

原创 js变量及其赋值

js变量

原创 ElementUI同时合并行和列

同时合并行和列

原创 当曲线的值都为null时，Echarts 的tooltip显示不出来

echarts的tooltip展示不出来问题

原创 解决表单校验提示信息不消失问题以及赋值不生效问题

表单校验不消失问题，赋值不生效问题

原创 实现table某个单元格背景色设置

单元格背景色

原创 table中同一列中合并相同项

table合并相同项

原创 实现鼠标悬浮遮罩层

鼠标悬浮遮罩层

原创 el-table单选并隐藏全选框

elementUI中el-table实现单选且隐藏全选框

原创 echarts常用属性设置

echarts常用

原创 elementUI穿梭框 el-transfer 列表内容文字超长处理

穿梭框列表文字超长

原创 echarts中x轴‘value’ 数值轴

x轴

原创 post和get请求及其传参

get post

原创 win10录屏

1.win+G快捷键,进入录屏界面2.点击【开始录制】按钮，如下图：3.结束点击【停止录制】按钮，如下图：4.查看录制视频的位置：C:\Users\Administrator\Videos\Captures

原创 elmentUI下拉框实现全部功能

1.需求：实现下拉框全选功能2.实现<el-form-item label="人员名称" prop="person"> <el-select v-model="submitForm.person" multiple collapse-tags placeholder="请选择" @change='changeSelect' @remove-tag='removeTag'> <el-option v-if="personDict.length>1" lab

原创 elmentUI表单中input 和select长度不一致问题

1.问题现象：2.问题原因：因为el-select右边有一个icon图标(右边的padding为35px),而el-input只有15px,所以就存在了一个宽度的误差.3.解决方法：方法一：当下拉列表 style="width:92%"时，可以与input输入框大小一致<el-form-item label="图标类型" prop="iconId"> <el-select v-model="addEditForm.iconId" placeholder="请选择"

原创 el-table动态表头红色字体设置

需求：表头动态生成，当订单量和实发量不同时，红色标记二者。实现方法：数据结构：针对每一行数据，封装的需要标红的数组使用表格提供的cellStyle方法分析：订单量所在列是3的倍数，实发量所在列是除3余1。行、列和列名称唯一确定红色的所在的表格位置。cellStyle({row,column,rowIndex,columnIndex}) { for(let i=0;i<this.data.length;i++){ for(let j=0; j&lt

原创 js实现对象中key值的改变

原始对象：const obj={ user_id: 1, user_name:'张三'}期望对象：const obj={ id: 1, userName:'张三'}实现方法：const mapObj = { user_id: "id", user_name: "userName",};const newObj = Object.fromEntries(Object.entries(obj).map(([k, v]) => [mapO

原创 前端代码统计

1.VS code在文件中查找，输入正则表达式^b*[^:b#/]+.*$2.SourceCounter步骤一：选择代码类型步骤二：选择文件夹，开始统计

原创 vue中对提交等按钮做防抖处理

// 防抖function debounce(func, wait = 300) { let timeout; return function (event) { clearTimeout(timeout); timeout = setTimeout(() => { func.call(this, event); }, wait); };}// 提交按钮中使用handleSubmit: debou

原创 行业标准、规范、国家标准

原创 解决密码框自动填充上一个input框

【问题】：遇到密码框，输入后，自动填充其上一个临近的input框【原因】：以Chrome为例，当浏览器遇到type="text"与type="password"的标签紧邻时，会触发浏览器自动填充行为。默认为黄色背景。firefox和360浏览器的处理方式是：只要检测到页面里有满足填充机制的，不管是不是display：none 的，只要检测到就直接往里填充。【解决】：既然浏览器遇到type="text"与type="password"的标签紧邻时触发自动填充行为，则将两个隔开，使用隐藏的方式“欺骗”

原创 vue中图片及背景图

方式一：直接写路径<img src="@/assets/logo.png" alt="">方式二： 绑定<img :src="require('./assets/images/logo.jpg')" alt="">// 三元绑定<img :src="OnOff?require('@/assets/icon_blue.png'):require('@/assets/icon_red.png')" alt="" />方式三：引入import radio1 f

原创 常用正则校验

1.邮箱/^[a-zA-Z0-9]+([a-zA-Z0-9_\\.\\-])*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/2.首尾空格/^[^\s].*[^\s]$/3.移动电话/^[0-9]{11}$/4.固定电话/^\d{3}-\d{8}$|^\d{4}-\d{7,8}$/// 固定电话验证规则：区号+号码，// 区号3位或4位，号码由7位或8位数字组成 。// 区号3位-号码8位// 区号4位-号码7位或8位

原创 vue项目目录结构说明文档模板

vue项目中说明文档模板目录结构说明.md文件，如下图：具体文件内容，如下：views中：EquipmentManage：设备管理（仅为拆分代码做示例）||__infomation：设备管理中信息管理模块| || |___sparePart：备品备件| | || | |___component：备品备件功能中拆分出来的组件，组件仅供本功能使用| | |___index.vue：备品备件功能的入口文件 | || |___

原创 vue table静态数据及分页

table代码片 <a-table class="whiteSpaceTable" :columns="columns" :dataSource="dataSource" :showHeader="true" :rowKey="record => record.key" :pagination="false" :scroll="{ x: scrollWidth }" > <template slot="in

原创 vue中密码密文登录（js-base64）

使用插件：js-base641.安装依赖npm install --save js-base642.在main.js中引入const Base64 = require('js-base64').Base64new Vue({ el: '#app', Base64})3.在需要转码的文件中使用// 密文const Base64 = require('js-base64').Base64const exStr = Base64.encode('base64')4.项目实例登录

原创 vue国际化

使用插件：vue-i18n1.npm安装npm install vue-i18n2.main.js文件中配置import Vue from 'vue';import VueI18n from 'vue-i18n';Vue.use(VueI18n);创建带有选项的 VueI18n 实例const i18n = new VueI18n({ locale: localStorage.getItem("locale") || "zh-cn", // 语言表示，通过切换local来切换本地

原创 Vue编码风格

Prop定义尽量详细：指定类型、是否必填、是否固定集合中的一个。Prop命名：在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。（props: {greetingText: String} // ）页面样式移动到assets下面按业务分类引用。通用处理类、函数、可以提取的复杂处理逻辑、数据清洗过程建议移动到全局utils下，如果是组件专属放到组件所属文件夹下的utils下，以避免组件本身复杂化，进而提升utils的复用效果。.

转载 vue 父组件传值给子组件

方法一：父传子主要通过在父组件v-model绑定数据，在子组件进行用props进行数据的接收。父组件：<template> <div id="container"> <Child :msg="data"></Child> </div></template><script>import Child from "@/components/Child";export default {

原创 video.js视频播放报错样式

video.js视频播放报错默认样式为：去掉中间叉号方法–控制样式：.vjs-error .vjs-error-display:before {display: none;}效果图如下：

原创 antd的Select组件，Cascader组件，DatePicker等下拉选项随页面滚动分离问题

现象如下图解决方法：具体代码实现如下<div class="form-input-item"> <div class="form-label form-require-icon">{{ $t("commonSetting.noOperationSetting") }}</div> <div class="form-field">

原创 Vue.js中this.$nextTick()的使用

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中； Hello World ~ this.$nextTi

原创 jquery属性设置

$("#trend_PublicRadio").prop(“disabled”, true);$(“input[name=‘nTrendGroupType’][value=‘1’]”).attr(“checked”, true);

原创 JS 字符串与数组之间转换

1.数组转字符串 b=a.join(" ");2.字符串转数组 b=a.split(’ ');

原创 电脑快捷键

1.显示打开文件，Win+Tab显示电脑所有打开文件，然后按下上下左右键，切换文件选中状态；点击界面，该界面全屏显示。2.切换打开文件，Alt+Tab按住Alt不动，不断点击Tab，切换文件，松开Alt,切换到的文件全屏显示。3.VS快捷键注释，Ctrl+K,Ctrl+C去掉注释，Ctrl+K,Ctrl+U...