vvv3171071的博客

续先前分享项目中select选项框可复用的options选项组件后（传送门：vue项目中一个开发思路记录：可复用的select选项框中的options数据，根据用户选择后可添加子级拓展），今天自己活学活用，亲手写了一个可复用的给项目字典排序的方法，来记录一些经验与心得~先来看看原功能：在我们项目中有个字典管理功能该字典返回的对象数组为：该功能里每一项的排序方式是以字典代码首字母来排序的，这样运用到该页面时顺序就会很乱：而我们真正想要的排序是产品经理提供给我们的需求制定的，应该如下：那

el-tree默认的focus样式颜色太浅，有时候电脑亮度低或者换个有色差的屏幕，根本看不出来哪一个节点被选中了。而且只有焦点在el-tree时才有颜色变化，鼠标在别的地方点一下就没了，这样会让用户忘记自己之前选的是哪个节点，很不方便。第一步：给el-tree组件标签加上属性highlight-current开启高亮加了这个属性，选中的节点的样式才会有highlight-current类，这样接下来才能改变选中的节点的样式。第二步：在css中修改高亮样式一个小tip：这里建议是给该页面文件最.

前提：时间选择器绑定的值类型取Date，当选择时间发生改变时，执行paramsChange方法，在该方法开头验证所选时间是否正确，若正确则进行接口请求，反之弹出错误提示信息。时间显示维度为日时，正常查询显示如下：若所选时间范围超过30天，则弹出错误提示信息：方法一：用时间戳验证时间范围 paramsChange(row) { this.params = { ...this.params, ...row, // 因为时间维度选的是

这篇文章用来分享自己项目中做el-calendar日历组件封装时的一些实用功能和踩的一些坑吧，毕竟ElementUI官方文档上对这个组件的描述实在太少了。1、给每一天增加可输入的input框其实这个功能在官方文档上基本已经实现了（在“自定义内容”那一块），直接在slot插槽里再加个input即可。 <el-calendar v-model="calendarDate"> <template slot="dateCell" slot-scope="{ da

网上查el-calendar相关的按钮点击事件文章，清一色都是在mounted挂载阶段通过document.querySelector绑定类名添加点击事件。我想说为啥要弄得这么麻烦？el-calendar组件标签中v-model绑定了一个Date/string/number的时间值，无论点击上述哪个按钮，该值都是会改变的。而我们想要实现的是当该时间值改变时（例如变成上个月或下个月或其他时间变回今天）执行某个事件，那直接用watch来监听该值来实现逻辑不就更方便且简单了么放一下我这边的代码：el-.

在工作中遇到的一些项目上有意思、实用性强、复用性广的开发思路

看了各个帖子的描述，还是未能参透$在vue中所想发挥的本意，将一些一知半解的理解摘抄下来，顺带附上自己常见的用法，以加深理解和记忆。摘抄这些只是Vue的命名规则，为了区分普通变量属性，避免我们自己声明或者添加自定义属性导致覆盖$event 是 vue 提供的传递实践的参数。$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。另一个好问题

文章转自：思否链接项目中用到的地方：vue.config.js里的chainWebpack：前言在项目开发中我们难免碰到需要对webpack配置更改的情况，今天就主要来讲一下在vue.config.js中对一些配置的更改，简单介绍一下loader的使用；用configureWebpack简单的配置；用chainWebpack做高级配置；包括对loader的添加，修改；以及插件的配置1、首先简单介绍一下webpack中loader的简单使用：loader：是webpack用来预处理模块.

0到100之间最多允许包含2位小数多用于百分数场景：^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/.test(value)测试结果：0，1，99，100 true0.11，10.00，99.99 true-1，0.111，100.00 false好家伙，现在CSDN字数少还被提示影响文章质量和创作推广了？那再放一段最近做的一个导入功能中判断百分

ElementUI下拉框+树形控件+搜索+标签功能

项目中做看板重构时遇到的开发需求，不能使用组件，乍一看感觉很头大，但实际上手做出来后还是小有成就的。直接进入正题：先创建一个简单的vue demo项目<template> <div class="drag"> <div class="back_box"> 这是一个背景 <div class="drag_box">这是一个蓝色可拖拽元素</div> </div> </div&g

业务场景：渲染一个这样框框的数据，html代码如下：其中meters数组是有初始数据的，而statusData初始是个空对象：在该情况下，页面DOM肯定是在我请求到statusData数据之前就已渲染完成了，而在我拿到statusData后，页面上的数据也未产生变化。statusData内容：楼主首先想到的是用$set代替直接赋值，然而马上发现了问题：我statusData原本就是个空数组，没有初始属性，要怎么用$set呢？那就得在使用$set前给对象一个默认值，在data里给statu

promise解决异步

之前做过一个长这样的看板：上图底部背景是一张图片，但蓝色牌子上的工厂名和红色框是CSS+js写出来的背景原图：首先我们做一个对象数组存放每个位置的数据，加上top和left定位位置，同时也能自适应窗口宽高：v-for该数组遍历的标签：数组中每个元素（每个工厂）有它唯一的id（工厂nodeid），但该id不是从0开始的。（像楼主项目中的工厂id是从1000+开始的）此时，若我们要给每个标签加一个点击事件，该如何用数组每个工厂元素的唯一性实现呢？楼主一开始想到的方法是点击时获取标签的no

今天在项目中遇到一个异步问题，出现原因如下：我在getEnergeHouseDanhao这个函数中加入了一个请求，该函数是获取某机器单耗，但要请求四次分别去获取年单耗、月单耗、日单耗、小时单耗然而执行后因为请求是异步的，此时打印datas拿不到在请求中push进去的数组，在设置定时器才能拿到数组。然而我们无法确定接口的相应时间，用定时器解决显然是存在很大风险的。那么该如何解决类似的问题呢？可以使用promise.all解决异步。首先简单且通俗易懂地介绍一下promise.all是什么，具体

2021.12.24字符串转数字：若字符串内容都是数字，可以使用强制转换方法Number()；若字符串内有除数字外的字符，用该方法会返回NaN。若字符串内容有数字+字母，可以使用parseInt或parseFloat，例如：var s = '234string';　　　parseInt(s);　//234　　　parseFloat(s); //234.0...

本篇文章比较浅显，主要写给想要快速直接上手数据可视化带Echarts图表项目的新人们。1、实例化图表：setOption(Object option)Object类型的参数 option，表示图表数据结构 ，形如：var option = { title: { text: "我的第一个ECharts图表示例" }, tooltip: {

项目中遇到的问题：一个页面里有六个图表，每5000ms刷新一次数据，且每次刷新数据时图表会上下滚动（左列和右列分别有7个和6个厂房，循环滚动），这样每5000ms里不仅要重新加载v-for出来的标签的dom，还要跟着标签销毁并重新绘制Echarts（若不执行销毁，图表里的数据是从上一项遗留的数据过渡到新一项的数据，而不是从0过渡到新数据，用户体验很差）。此时我们需要在mounted里设置一个每5000ms执行一次的循环定时器来执行数据更新，而在定时器中，我们不仅需要重新赋值v-for的数组，还要给每个v

①. 首先介绍一下window.onresize，这个方法可以监听窗口变化。将window.onresize写在mounted中，在窗口变化时就会执行它的内容。如： mounted() { window.onresize = () => { console.log("窗口发生变化时会打印该条"); }; },②. 接下来，只要在window.onresize中写入重新绘制echarts的逻辑就OK了echarts自带resize这个API，即.