- 博客(28)
- 收藏
- 关注
RSS订阅原创 el-table表格动态合并行、合并行列及详解
在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下：而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下：所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下：首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）
2022-08-18 11:52:19
24324
22
原创 el-teable表格动态列数渲染及详解
在项目中编写数据大屏的时候，除了柱状图、折线图、散点图…，还有，首先想到的是的表格，但是在后续的实现过程中，后端范围的列数是动态的，刚开始没有考虑到，然后采用了第一种方式，但是数据处理方式不太好，后来在Element官网查看了文档，就使用方式进行实现（第二种方式），不过两种方式都需要对数据进行处理第一种方式主要使用循环实现，页面逻辑比较简单，具体布局如下：中数据如下：使用来处理数据，将数据处理成渲染需要的格式，如下：因为列数不固定，需要每一列的宽度也需要动态的计算，通过来实现，具体如下：实现效果图如
2022-08-11 17:46:09
9911
2
原创 element中MessageBox消息提示内容换行显示
目录方式一：使用块级标签方式二：使用模板字符串和换行标签方式三：使用正则替换前言： 最近在写项目中遇到这样一个需求，就是把MessageBox的提示信息换行居中显示，而title和按钮不居中显示实现效果大概是这样的默认效果是这样的然后就在网上查找了几种方法，简单总结一下方式一、方式二适用于前端确定那些文字，然后进行渲染；方式三是根据后端返回的message信息进行处理用到了MessageBox的两个属性参数说明类型可选值默认值dangerouslyUseHTMLS
2022-04-26 11:37:49
9829
4
原创 JavaScript中根据一个数组对象过滤另一个数组对象
在写项目中遇到一个问题，就是根据一个对象数组去获取另一个对象数组中的值假设现在有以下两个对象数组let arr1 = [ { id: 1, name: '张三', age: 20, hobby: ['吃饭', '睡觉', '打豆豆'] }, { id: 2, name: '李四', age: 21, hobby: ['吃饭', '睡觉', '打豆豆'] }, { id: 3, name: '王五', age: 22, hobby: ['吃饭', '睡觉', '打豆豆'] },
2022-04-20 00:02:56
9821
1
原创 使用moment获取本周、前n周、后n周开始结束日期以及动态计算周数
项目中有一个需求：需要根据学期时间动态的计算出该学期有多少周通过上网查找，找到了一个工具类moment.jsmoment.js是一个JavaScript日期处理类库，能够实现对日期的便捷操作官网地址：Moment.js环境： 需要有Node环境支持首先需要安装moment工具包npm install moment然后引入刚才下载的工具包import moment from "moment"因为使用的地方比较少，所以是在使用的.vue文件中引入的，如果整个项目使用比较多，可以在main
2022-04-15 17:42:48
11266
6
原创 正则匹配字符串中汉字及中文标点符号
问题： 在写项目时遇到需要匹配字符串中所有的汉字并且包括简单的中文标点符号比如：匹配下面这个完成的字符串let str = '上传文件，你好呀，我很好';网上能够查到很多匹配汉字的正则let reg = /[\u4e00-\u9fa5]+/g;console.log(str.match(reg));// 结果如下['上传文件', '你好呀', '我很好']从结果可以看出上面写的正则没有匹配到标点符号，，所以将完整的字符串（str）分隔开了又从网上查找匹配中文标点的正则// 匹配中文
2022-04-08 17:42:59
12272
5
原创 HbuliderX项目运行至微信开发者工具详细教程
首先需要安装两个工具：点击下载：HbuilderX根据操作系统选择对应的版本，然后选择软件版本，推荐使用App开发版，里面安装好了很多插件点击下载：微信开发者工具推荐使用稳定版安装好之后打开HbuilderX编辑器，点击文件 -> 新建 -> 项目后出现如下页面，填写项目名称，选择项目保存路径，然后点击创建即可然后在HbuilderX顶部导航栏找到工具 -> 设置后点击点击左侧运行配置，下滑找到微信开发者工具路径，点击浏览找到自己微信开发者工具安装路径即可然后打开
2022-03-30 11:48:57
7578
2
原创 element中Dialog和MessageBox弹框按钮和关闭图标样式修改
项目中用到了比较多的Dialog弹框和MessageBox弹框，但是Element原始的组件样式已经不符合项目的风格，所以需要对Element中的样式进行整体修改原始的组件样式如下原始Dialog弹框原始MessageBox弹框直接上修改完成的代码重新写了一个类名oe-dialog-btn，在使用Dialog和MessageBox弹框的地方直接写此类名就好了（可以将修改的样式写在全局公共样式中，这样整个项目都可以用了）/* 修改 取消 按钮默认的边框颜色 */.oe-dialog-bt
2022-03-28 18:51:11
9830
1
原创 indexOf()和includes()方法的使用详解
在写项目的时候，需要实现一个搜索功能，并且能够支持模糊查询，起初最先想到了indexOf()方法，后来觉得includes()方法更好一些，简单记录下indexOf()定义：indexOf()方法可返回某个制定的字符串值在字符串中首次出现的位置语法：该方法有两个参数：indexOf(val, idx)val 表示需要查找的字符串值idx 表示在字符串中开始查找的位置，合法值是 0 到 length - 1；默认值为 0如果要查找的字符串值没有出现，则该方法返回 -1首先需要引入log方法
2022-02-23 16:42:33
2200
原创 axios结合Promise及Vue整合小demo
文章目录一、随机获取笑话二、查询天气在浏览的时候看到两个有意思的小demo，自己动手写了写，具体如下一、随机获取笑话随机获取笑话的接口请求地址：https://autumnfish.cn/api/joke请求方式：get请求参数：无参数相应内容：一条随机笑话DOM结构比较简单了<div id="app"> <div class="title font-coloe">{{ title }}</div> <div class="
2022-02-18 15:16:01
629
1
原创 JS递归过滤树形结构数组对象--模糊查询
文章目录前言方式一方式二方式三前言 2022年第一篇文章，祝大家新年快乐呀~ 在工作中为了优化项目性能，决定由前端来实现简单树形数据的搜索功能，有一个功能需求是这样的，简单描述下需求内容1、父节点含有，将父节点返回（包含所有子节点）2、父节点没有，但子节点含有，父节点仍要返回，而子节点只返回包含的搜索内容的自己也写了算法来实现，可是总有点问题，于是就上网查了，果然有好多方法，但是有些方法是具有局限性的，因为不能确定树形结构的层级是多深的，所以还是边查边修改，调试了好长时间，最终找到了
2022-02-09 17:21:34
4064
3
原创 Vue实现选项卡切换
Vue实现选项卡切换前言用原生JS写过一个选项卡切换功能，但是相对比较复杂，然而用Vue实现就相对比较简单了首先需要引入vue.js<!-- 引入vue.js --><script src="./js/vue.js"></script>页面元素的DOM结构也相对比较简单，因为使用了v-for进行循环，比原生JS编写时还要简洁，如下 <div id="app"> <!-- ul用来控制上部分切换模块 --> <
2022-01-19 17:37:43
6437
3
原创 原生JS实现轮播图 - 有缝轮播详解
前言现在前端有好多的插件都能实现轮播图的效果，而且动画样式也比较新颖好看，但是使用原生js实现轮播图算是比较基础的，今天就来写写有缝轮播图和无缝轮播图，并说说二者之间的差别先来看下实现的页面样式然后先看页面DOM结构<div id="box"> <!-- ul用来存放需要展示的图片 注意修改图片的路径--> <ul> <li><img src="../../img/1.png" alt=""></li
2022-01-19 15:28:09
1122
原创 element中el-select下拉框整体样式修改
前言最近写项目的时候，需要对element中原有的下拉框组件进行整体样式的修改，修改完后简单记录一下原有组件里的el-select下拉框这是修改完成之后的样式页面的DOM元素也是直接使用组件中的例子<template> <div class="wrap"> <div class="dark-select"> <el-select v-model="value" placeholder="请选择" :popper-append-t
2022-01-14 16:21:19
15354
9
原创 数据结构与算法一 - 位运算
前言什么是位运算？数据都是以二进制的形式存储在设备中，即0、1两种状态，计算机对二进制数据进行的运算（+、-、*、/）都叫位运算，即将符号位共同参与的运算首先引入log方法const { log } = console举一个简单的例子看下cpu是如何进行计算的let a = 35let b = 47let c = a + b计算两个数的和，而在计算机中都是以二进制进行计算的，所以上面定义的变量在计算机内部先转换为二进制再进行相加35：0 0 1 0 0 0 1 147：0 0 1
2021-12-27 15:34:44
357
原创 Vue中使用CSS（pointer-events）禁止鼠标的点击事件
前言 在有些场景下，我们需要根据数组的长度或者一个布尔值去把原本可点击区域（如：div或img）的点击事件给禁止掉，变成不可点击事件一、DOM元素，添加class属性首先是获得需要判断是否禁止的条件；可以是某一个变量的布尔值，也可是数组的长度…<img src='@/assets/img/logo.png' @click="onGoIndex()" :class="goIndex ? 'go-index' : 'not-go-index'"而控制点击区域是否可以点击的属性是pointe
2021-12-22 16:06:39
10527
原创 js判断是否为整数类型
在写项目的时候，后端返回了一个数值，但是需要知道此数值是整数或者小数，分别做对应的处理// 首先引入log方法const { log } = console使用取余运算判断// 封装一个方法用来判断当前数值是否为整数，返回true 或 falsefunction isInteger(num) { return num % 1 === 0}log( isInteger(1) ) // truelog( isInteger(1.1) ) // false但是对空字符串、字符串类型
2021-12-21 14:53:48
1124
原创 瀑布流布局原理及详解
文章目录前言原生JS实现瀑布流flex属性实现瀑布流列数动态的瀑布流前言 在写项目的过程中，整个页面分成了3列，每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，所以就在网上查了下，这种布局方式叫做瀑布流布局原生JS实现瀑布流首先对原生JS实现瀑布流布局的原理进行分析：瀑布流布局最大的特点就是等宽不等高使用瀑布流布局可以使页面最后一行的容器高度差距最小，所以从第二行开始，每一个容器都要放在第一行容器高度最小的下方，以此类推将所有容器（子元素）放在一个大容器（父
2021-12-13 13:36:51
11902
4
原创 原生JS实现全屏和退出全屏详解
原生JS实现全屏和退出全屏在写项目的时候，需要实现一个需求：点击页面的某一个功能按钮，模拟F11进入浏览器全屏模式也是在网上看了好多，都是大同小异，简单做下记录首先是页面布局结构，布局比较简单<button id='btn' class="btn">进入全屏</button><div id="content"> <button id="quite" class="btn">退出全屏</button></div>然
2021-12-09 18:03:20
2839
原创 git命令之分支管理和Tag标签
分支管理1 、创建分支$ git checkout -b devSwitched to a new branch 'dev'git checkout命令加上-b参数表示创建并切换，相当于一下两条命令：$ git branch dev$ git checkout devSwitched to branch 'dev' 注意到切换分支使用git checkout 切换的分支名称，而Git中撤销修改是git checkout -- 撤销的文件名称为了避免困惑，最新版本的Git提供了新的命
2021-11-15 16:40:20
2558
原创 ES6中for...of循环和可迭代对象
ES6中for…of循环和可迭代对象在之前，有很多方法可以遍历数组和对象最经典的就是for循环，它可以遍历数组或者有索引且具有length属性的对象// 遍历数组let arr = [1, 2, 3]for (var i = 0; i < arr.length; i++) { console.log( arr[i] )}// 结果123// 遍历对象// 可以使用Object的keys()方法和values()方法分别获取键名和值进行遍历let obj = {
2021-11-10 15:34:51
2445
原创 Node.js连接MySql数据库实现增删改查
首先需要准备好一些环境和开发工具VsCode官网Node.js官网使用node -v(version)查看Node版本，确定是否安装成功MySql官网使用mysql -u 用户名 -p 密码查看MySql是否安装成功NaviCat官网，Navicat是一个数据库可视化图形工具然后创建一个空文件夹（我创建的是demo），进入空文件夹所在的命令行，然后使用npm init -y命令进行初始化操作// 初始化结果如下{ "name": "demo", "version": "1.
2021-09-11 21:11:11
1802
原创 原生JS实现选项卡
原生js实现选项卡html代码<div class="wrap"> <ul> <li class="eat">早饭</li> <li>中饭</li> <li>午饭</li> </ul> <div class="eat-detail">豆浆、青椒鸡蛋、宫保鸡丁</div> <div>米
2021-09-08 16:29:37
651
原创 数组去重与数组合并去重
数组去重与数组合并去重数组去重（1）indexOf()方法let arr = [4, 1, 3, 2, 4, 1, 2] arr = removeRepeat(arr)console.log(arr) // [ 1, 2, 3, 4 ]function removeRepeat(val){ let newArr = [] val.forEach( item => { if(newArr.indexOf(item) == -1){
2021-09-08 14:49:35
3474
原创 深浅拷贝与for...of/in
深浅拷贝与for…of/infor…of与for…infor…of是ES6新增的遍历方式，允许遍历一个含有Iterator接口的数据结构并且返回各项的值具有原生Iterator接口的数据结构ArrayMapSetTypeArray类数组对象（函数的arguments对象、NodeList对象）...可见Object没有部署原生的Iterator接口，所以不能使用for…of进行循环遍历Objectlet obj = { a: 1, b: 2, c: 3}
2021-09-06 11:46:15
401
2
原创 数组扁平化与reduce()方法详解及高级技巧
在学习数组扁平化之前，先了解一下reduce()方法~~ QoQreduce()方法及高级技巧reduce()方法接收一个函数作为累加器，数组中的每个值（从左向右）开始缩减，最终计算为一个值。注意：reduce()方法不能对空数组执行回调函数。1、语法let arr = []arr.reduce(callback, [initialValue])reduce()为数组中的每一个元素依次执行回调函数，其接受两个参数，第一个参数是回调函数，第二个参数是初始值。callback(previousV
2021-08-10 11:32:37
1002
原创 git基本操作命令及分支合并
基本命令1、文件夹初始化，将本地文件夹变成本地仓库，操作成功后会出现一个.git文件夹，但是此文件夹默认是隐藏的，需要打开“隐藏的项目”才能查看到，只有存在.git文件才能执行git相关的操作git init2、将内容添加到暂缓区git add . # 将当前目录下所有新增和修改存至暂缓区，但不包括删除git add -u # 将当前目录下所有修改和删除存至暂缓区，但不包括新增git add -A # 缓存所有的改动git add index.html # 添加具体的某一文件至暂缓区gi
2021-08-06 15:11:52
449
原创 数组的fill方法
近期在学习Vue框架，在使用Element-UI组件库的时候，看到了操作数据的fill()方法，因为以前没遇到过，所以就记录一下~~~1、fill()方法可用于空数组的初始化，接受一个参数时，表示数组填充的值。// 原数组中没有给定长度，没有数据可以替换，所以结果仍为空数组var arr1 = []arr1.fill(6)console.log(arr1) // [] // 当一个参数的值为数值时：var arr2 = ['x', 'y', 'z']arr2.fill(7)console
2021-03-18 22:46:29
2844
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人