el-table 设置行背景颜色 鼠标移入高亮问题处理 注意,是.tableStyle.el-table 不是.tableStyle .el-table。2.2 :row-class-name=“tableRowClassName” 方式。2.3 :cell-style="cellStyle"方式。后端返回表格数据,有特定行数需要用颜色标识。4.2 第二种 设置类名 避免样式污染 推荐第二种。4.1 第一种直接设置。
js 深拷贝的几种情况总结 在前端项目的数据处理中,json数据的拷贝是很常见的,怎么使拷贝的双方数据之间互不影响,这就要用到深拷贝了深拷贝:引用数据类型中名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值,深拷贝就是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存。方法一:使用Object.assign(),一般用于数据类型比较简单,层数不大于1的数据;因为Object.assign无法深层拷贝。const strJson = { id:'12343231',
vue+elementUI el-select 搜索下拉框数据过多 分页加载 需求描述:下拉框获取的数据过多,需要对数据进行分页加载,下拉刷新数据关键词:Select 选择器 InfiniteScroll 无限滚动<el-form-item label="项目名称" prop="name" > <el-select v-model="form.name" placeholder="请选择项目名称" filterable
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.
js 展开运算符 深拷贝与浅拷贝 区别:引用数据类型的存储:name存在栈内存中,val存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值浅拷贝:只是复制了一个指向堆内存中值的指针,堆内存并没有独立,所以会相互影响深拷贝:增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存,完全独立,两者互不影响图:<img src="https://img-blog.csdnimg.cn/927778bad4cf4014b2ca8b44b12ade1f.png?x-oss-process=image/water
前端项目种正则总结 let a = ‘你好’; //用户输入的字符串let str = [’’,…a,’’].join(’.*’); //转化成正则格式的字符串let reg = new RegExp(str) //正则reg.test(‘aaa你aaa好aaa’) //去匹配待查询的字符串
vue computed 计算属性的使用 在开发项目时,前端有时需将后台的多个数据处理出一个结果显示,如果在模板中放入太多的逻辑会让模板过重且难以维护,所有就用到了计算属性例子一:性别根据code区分显示<template> <div> 性别:{{sexC}} </div></template><script>export default { data() { return { sex:1 }; }, computed:{
vue 有关过滤器filter的总结 在vue项目中过滤器的作用主要是将一些后台的数据按照前端想要展示的形式处理并展示出来,比如说简单的数字截取显示,code对比显示等局部过滤器:<template> <div> {{name | nameF}} </div></template><script>export default { data() { return { name:'我是Cdns,我是filter的总结,啦啦啦啦啦'
vue 有关watch监听的几种方式 data() { return { name:'李四', obj:{ name:'张三' }, list:[] }; }, watch:{ // 监听普通数据 name (newValue,oldValue) { console.log('新数据',newValue); console.log('旧数据',oldValue); }, // 监听整个对象 ..
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">
element upload 上传图片闪烁的问题 一个样式修改解决问题,棒呆!!<style lang="scss" scoped>/deep/ .el-upload-list__item.is-ready { display: none;}</style>
验证码倒计时 前端在做登录页面时,大多数都需要倒数计时需求:点击获取验证码按钮,开始倒数,倒数时间60s,倒数到0秒后恢复获取验证码、如果获取验证码接口有误,中止倒数,显示获取验证码样式:先设置变量:countdown: 60, // 倒计时timer: null // 控制是否开始倒数倒计时方法: getCode() { const TIME_COUNT = 60; if (!this.timer) { this.coun
图形验证码 前端完成图形验证码html: <div class="canvas" @click="getCanvasHandle()" > <canvas id="canvas" /> </div>js:生成图形验证码的方法: getCanvasHandle
安装 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.
js 隐式类型转换 概念:无需程序员手动转化,由编译器自动转换的方式称为隐式转换规则:1.转化成String : + (字符串链接发)2.转换为Number类型:(1) ++/-- (自增自减运算符)(2)+ - * / % (算数运算符)(3)> < >= <= == != === !== (关系运算符)3.转化为Boolean类型: !(逻辑非运算符)例子总结:1. 字符串连接符与算术运算符的区分1+‘true’ ----> String(1) + 'true' ...
前端数组扁平化的几种方法 数组扁平化是将一个多维数组转化为一维数组[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...
上传本地文件到gitlab 在开发过程中,有时自己写的项目存储在本地,不是很方便多地点操作,所以将项目存储在gitlan上,既方便多人开发开发又方便存储代码1.首先打开gitlab,新建一个空项目填写项目名和项目描述,点击创建,完成空项目的创建2.利用命令行将本地项目上传到gitlab上(1),在本地创建git仓库cd 本地项目地址git init图片展示:(2)将本地项目加入到gitlab中git remote add origin git的项目地址git add .图片展示:
vue中使用iframe的总结 需求描述:在后台管理系统中需要预览配置的数据在手机上显示的样式,方便后台管理人员操作,因为预览的内容比较多,h5已经写好了一套代码,所以利用iframe将h5的页面展示引入到后台代码展示:iframe:<iframe id="iframe" ref="iframe" frameborder="0" class="iframe" :src="srcH5" //srcH5:预览页面的地址/>srcH5:'/iframeH5/preview',父页面给子