白枫 White Maple-CSDN博客

原创 el-table 设置行背景颜色鼠标移入高亮问题处理

注意，是.tableStyle.el-table 不是.tableStyle .el-table。2.2 :row-class-name=“tableRowClassName” 方式。2.3 :cell-style="cellStyle"方式。后端返回表格数据，有特定行数需要用颜色标识。4.2 第二种设置类名避免样式污染推荐第二种。4.1 第一种直接设置。

2023-07-28 15:21:53 2759

在前端项目的数据处理中，json数据的拷贝是很常见的，怎么使拷贝的双方数据之间互不影响，这就要用到深拷贝了深拷贝：引用数据类型中名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值，深拷贝就是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。方法一：使用Object.assign(),一般用于数据类型比较简单，层数不大于1的数据；因为Object.assign无法深层拷贝。const strJson = { id:'12343231',

2022-01-11 17:11:04 698

原创 vue+elementUI el-select 搜索下拉框数据过多分页加载

需求描述：下拉框获取的数据过多，需要对数据进行分页加载，下拉刷新数据关键词：Select 选择器 InfiniteScroll 无限滚动<el-form-item label="项目名称" prop="name" > <el-select v-model="form.name" placeholder="请选择项目名称" filterable

2021-09-24 17:21:37 2372

原创移动端 H5 tab吸顶的需求

需求：展示页面包含：广告位，tab切换，内容展示，需要向上滑动的时候，广告位隐藏，tab吸顶展示，内容区域正常滑动；下拉刷新后，广告位显示，tab取消吸顶。页面：

2021-09-23 17:29:13 927

原创 Vuex state的引入，取值和修改

前提：在vue的项目中，不可避免的会使用到vuex用于数据的存储，今天总结练习的内容需求：后台管理系统左侧菜单的展开和缩进步骤：在vue项目中建立store文件夹，用于放置数据存储的文件，collapse就是需要的文件首先。store/index.js中的内容：import Vue from 'vue';import Vuex from 'vuex';import modules from './modules'Vue.use(Vuex)const store = new Vuex.

2021-09-06 17:31:31 1430 1

原创 js 展开运算符深拷贝与浅拷贝

区别：引用数据类型的存储：name存在栈内存中，val存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值浅拷贝：只是复制了一个指向堆内存中值的指针，堆内存并没有独立，所以会相互影响深拷贝：增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，完全独立，两者互不影响图：<img src="https://img-blog.csdnimg.cn/927778bad4cf4014b2ca8b44b12ade1f.png?x-oss-process=image/water

2021-08-26 17:25:43 3729

原创前端项目种正则总结

let a = ‘你好’; //用户输入的字符串let str = [’’,…a,’’].join(’.*’); //转化成正则格式的字符串let reg = new RegExp(str) //正则reg.test(‘aaa你aaa好aaa’) //去匹配待查询的字符串

2021-08-19 16:39:25 77

原创 vue computed 计算属性的使用

在开发项目时，前端有时需将后台的多个数据处理出一个结果显示，如果在模板中放入太多的逻辑会让模板过重且难以维护，所有就用到了计算属性例子一：性别根据code区分显示<template> <div> 性别：{{sexC}} </div></template><script>export default { data() { return { sex:1 }; }, computed:{

2021-07-20 15:58:44 170

原创 vue 有关过滤器filter的总结

在vue项目中过滤器的作用主要是将一些后台的数据按照前端想要展示的形式处理并展示出来，比如说简单的数字截取显示，code对比显示等局部过滤器：<template> <div> {{name | nameF}} </div></template><script>export default { data() { return { name:'我是Cdns，我是filter的总结，啦啦啦啦啦'

2021-07-20 14:49:06 104

原创 vue 有关watch监听的几种方式

data() { return { name:'李四', obj:{ name:'张三' }, list:[] }; }, watch:{ // 监听普通数据 name (newValue,oldValue) { console.log('新数据',newValue); console.log('旧数据',oldValue); }, // 监听整个对象 ..

2021-07-20 11:37:16 333

原创 form表单中数组的校验升级---校验多个

之前的form表的数组的校验只能单纯的处理单一的必填校验，如果有多个校验条件就不好处理了，所以换了一种写法：上一篇form表单校验的地址：：https://blog.csdn.net/qq_42323925/article/details/109613569#comments_16650949<template> <div class="hello"> <el-form ref="form" :model="form" :rules="rules"&gt

2021-05-27 14:27:15 1664

原创 element upload 上传图片闪烁的问题

一个样式修改解决问题，棒呆！！<style lang="scss" scoped>/deep/ .el-upload-list__item.is-ready { display: none;}</style>

2021-05-26 15:41:26 1747 3

原创验证码倒计时

前端在做登录页面时，大多数都需要倒数计时需求：点击获取验证码按钮，开始倒数，倒数时间60s，倒数到0秒后恢复获取验证码、如果获取验证码接口有误，中止倒数，显示获取验证码样式：先设置变量：countdown: 60, // 倒计时timer: null // 控制是否开始倒数倒计时方法： getCode() { const TIME_COUNT = 60; if (!this.timer) { this.coun

2021-04-20 09:51:06 399

原创图形验证码

前端完成图形验证码html: <div class="canvas" @click="getCanvasHandle()" > <canvas id="canvas" /> </div>js:生成图形验证码的方法： getCanvasHandle

2021-04-20 09:34:13 183

原创安装 npm install -g vue-cli 报错 ‘proxy‘ config is set properly. See: ‘npm help config‘

今天电脑重新更新后，发现安装vue项目进行npm时总是报'proxy' config is set properly. See: 'npm help config' 的错然后查了资料是因为代理出了问题导致的报错，解决方法就是直接设置新的代理先查找一下自己的代理npm config get proxynpm config get npm config get https-proxy然后将代理和缓存置空第一种：npm config set proxy falsenpm ca.

2021-04-11 19:56:20 8133 1

转载 js 隐式类型转换

概念：无需程序员手动转化，由编译器自动转换的方式称为隐式转换规则：1.转化成String : + (字符串链接发)2.转换为Number类型：（1） ++/-- （自增自减运算符）（2）+ - * / % （算数运算符）（3）> < >= <= == != === !== (关系运算符)3.转化为Boolean类型：！（逻辑非运算符）例子总结：1. 字符串连接符与算术运算符的区分1+‘true’ ----> String(1) + 'true' ...

2021-01-06 11:28:54 263

原创前端数组扁平化的几种方法

数组扁平化是将一个多维数组转化为一维数组[1,[2,[3,4,[5,6]]]] ------->[1,2,3,4,5,6]可以使用的方法：1.float:Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响 let arr = [1,[2,[3,4,[5,6]]]] const result = arr.flat(Infinity) console.log(result...

2020-12-08 10:53:52 961

原创上传本地文件到gitlab

在开发过程中，有时自己写的项目存储在本地，不是很方便多地点操作，所以将项目存储在gitlan上，既方便多人开发开发又方便存储代码1.首先打开gitlab，新建一个空项目填写项目名和项目描述，点击创建，完成空项目的创建2.利用命令行将本地项目上传到gitlab上（1），在本地创建git仓库cd 本地项目地址git init图片展示：（2）将本地项目加入到gitlab中git remote add origin git的项目地址git add .图片展示：

2020-12-03 15:15:10 633

原创 vue中使用iframe的总结

需求描述：在后台管理系统中需要预览配置的数据在手机上显示的样式，方便后台管理人员操作，因为预览的内容比较多，h5已经写好了一套代码，所以利用iframe将h5的页面展示引入到后台代码展示：iframe：<iframe id="iframe" ref="iframe" frameborder="0" class="iframe" :src="srcH5" //srcH5:预览页面的地址/>srcH5:'/iframeH5/preview',父页面给子

2020-11-25 18:05:51 1665

原创 el-cascader 级联选择器总结

1.组件使用图片展示：代码展示：<template> <div class="home"> <el-cascader ref="myCascader" v-model="form.id" :placeholder="form.name" :options="options" :show-all-levels="false" :props="{ value: 'id', labe

2020-11-23 16:15:11 4356

原创设置选中最大值，选中数达最大值时，其他选项置灰

需求描述：循环数组得到选项的div块，选中的爱好达到3个时，其他选项置灰，不能选择；点击取消3个中的一个选项，可以继续选择选项图片描述：循环得到选项点击选中的样式选中数量达到最大值代码设计：<template> <div> <div class="interest-home flex"> <p ...

2020-11-23 15:20:14 278

原创 form表单中数组的校验

1，校验的form对象中，包含数组，对数组进行循环<template> <div class="hello"> <el-form ref="form" :model="form" :rules="rules">  <div v-for="(item, index) in form.list" :key="index"> <el-form-it

2020-11-11 10:28:58 7573 2

原创 vue form表单父页面对子组件进行校验

在做vue项目时，pc端经常会有这样的需求：在不页面对多个子组件中的form表单字段进行校验。解决这个需求的方法：在每个子组件中写入form表单的校验方法，在父页面对子页面中的校验方法进行调用。子组件页面...

2020-11-10 10:18:33 5357 8

原创 png,jpg,svg的区别

png,jpg,svg的区别位图：点阵图（像素图），由电脑上屏幕上的发光（像素）的构成，如jpg.png,gif等矢量图：向量图，由一系列计算机指令来描述和记录一幅画，因为生成的矢量图文件存储量很小，适合文字设计和图案设计等,如svg等无损压缩:对文件本身的压缩，使图片占用的存储空间变小，并且不会损坏图片的质量，如png等；有损压缩：对图像本身的改变，会对图片质量造成损害，随着压缩次数越来越多，图片质量会越来越差，如jpg等；如果要减少图像占用内存的容量，就必须使用有损压缩方法,(删除人类不敏感的

2020-11-09 17:40:02 9343

空空如也

关于vue.set()，强制刷新的使用的疑问