![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
赫兹/Herzz
驯服野生bug中......
展开
-
VUE2与VUE3之间的主要区别
需要注意的是,由于 Vue 3 引入了一些新的语法和特性,迁移到 Vue 3 可能需要一些学习和代码重构的工作。如果你已经熟悉 Vue 2,学习 Vue 3 可以从官方文档开始,文档中包含了详细的指南和示例,可以帮助你快速上手。个人感受最深的是组合式api,真的太棒了。原创 2024-03-04 11:57:00 · 630 阅读 · 0 评论 -
VUE3+elementPlus 之 Form表单校验器 之 数字类型、小数位数校验
封装自定义验证器:组件内使用:页面效果:非数字:小数点后无内容:超过限制小数位数:超过最大值:原创 2024-02-01 14:15:00 · 1128 阅读 · 0 评论 -
VUE之jspreadsheet电子excel表格实时动态高度设置
2.组件中直接引入即可。原创 2023-08-25 10:57:54 · 615 阅读 · 0 评论 -
Flex弹性布局教程详解
如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。下面假设主轴为从左到右。转载 2023-02-23 11:42:14 · 346 阅读 · 1 评论 -
2023前端面试题——JS篇
Promise.all()方法将多个Promise实例包装成一个Promise对象(p),接受一个数组(p1,p2,p3)作为参数,数组中不一定需要都是Promise对象,但是一定具有Iterator接口,如果不是的话,就会调用Promise.resolve将其转化为Promise对象之后再进行处理。使用Promise.all()生成的Promise对象(p)的状态是由数组中的Promise对象(p1,p2,p3)决定的。原创 2023-02-13 10:08:34 · 1219 阅读 · 0 评论 -
VUE 之普通表格过滤器封装(前端实现表格实时搜索),无分页情况下
**需求:无分页表格不请求接口进行过滤筛选**封装过滤方法:原创 2023-02-07 12:04:43 · 494 阅读 · 0 评论 -
2023前端面试题——CSS篇
一般情况下 text-align:center,marin:0 auto;足矣④ flex⑤ 盒模型⑦ ⑧ 两种不同的绝对定位方法。原创 2023-02-06 10:42:00 · 3285 阅读 · 1 评论 -
前端利用jsencrypt.min.js进行RSA加密(常用在登录密码加密)全局方法封装
前端利用jsencrypt.min.js进行RSA加密(常用在登录密码加密)全局方法封装原创 2023-02-01 14:34:51 · 3263 阅读 · 0 评论 -
2023年你应该使用的10个有用的JavaScript单行代码
正如您在上面看到的,这些 JavaScript 单行代码简单但功能强大,可以在您从事 Web 开发项目时节省大量时间和精力。因此,只需一行代码,您就可以实现很多很酷的事情。因此,在本文中,我将与您分享一些有用的 JavaScript 单行代码列表,您可以作为 Web 开发人员在代码中使用它们。正如您所看到的,这是一种非常有用的技术,可以让您了解何时需要在不更改原始对象的情况下制作对象的副本。此外,如果你想添加一些平滑的滚动,你可以添加下面的对象作为方法 scrollTo() 的参数。原创 2023-02-01 08:22:04 · 366 阅读 · 0 评论 -
js语句简写大全
【代码】js语句简写大全。原创 2022-11-25 16:48:01 · 1051 阅读 · 0 评论 -
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
可以看到我们自定义name长度为120,当用户输入超过120会出现error提示,并实时显示用户输入的字符长度,可以无限输入但是无法通过校验。新建js文件写入下面的函数。原创 2022-09-21 16:53:06 · 3388 阅读 · 0 评论 -
如何在vscode编辑器中实时查看代码git记录(被谁修改、自己什么时候修改)
如何在vscode编辑器中实时查看代码git记录(被谁修改、自己什么时候修改)原创 2022-09-14 10:02:50 · 8166 阅读 · 3 评论 -
前端面试题之——小程序篇
前端面试题之——小程序篇原创 2022-08-04 15:43:46 · 4256 阅读 · 0 评论 -
前端面试题之——兼容篇
前端面试题之——兼容篇原创 2022-08-04 15:13:10 · 893 阅读 · 0 评论 -
VUE element-ui之el-form表单非必填内容格式校验
需求:手机号码非必填,校验其格式。可以看到非必填且校验了格式。原创 2022-08-03 09:43:13 · 1950 阅读 · 0 评论 -
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除原创 2022-07-01 16:25:51 · 10602 阅读 · 4 评论 -
正则校验匹配[0-100]、[0-1000]之间的正整数或小数点位数限制
[0-100]不含0和100[0-100]含0和100[0-1000]不含0和1000[0-1000]含0和1000匹配正数+小数点限制[0-1000]不含0和1000,保留小数点后一位[0-1000]含0和1000,保留小数点后1位[0-10000]不含0和10000,保留小数点后3位[0-10000]含0和10000,保留小数点后3位注:亲测有效,但含0的情况下01、02、03…会通过校验,有快捷方法的可提出来。...原创 2022-06-07 17:24:38 · 9324 阅读 · 5 评论 -
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
步骤:模板中定义:<el-table :data="showDetailrowtableDatas" border height="300px" :show-summary="true" :summary-method="getSummaries" > <el-table-column v-for="(list, listindex) in detailrowtabledataslist" :key="listindex" :pr原创 2022-05-25 15:11:11 · 4910 阅读 · 0 评论 -
微信小程序npm构建
步骤:一:初始化npm init -y自动生成生成package.json文件二:project.config.js配置项"packNpmManually": false, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./node_modules" } ]三:下载所需依赖npm ins原创 2022-05-17 17:16:37 · 603 阅读 · 0 评论 -
vue中手机号码+座机号码、邮箱正则校验规则封装
直接上代码:封装验证器:export function isvalidPhone(phone) { const isPhone = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/ //11位合法手机号码 const isMob1 = /0\d{2,3}\d{7,8}/ //不带-的座机:02985111752 const isMob2 = /^([0-9]{3,4}-)?[0-9]{7,8}$/ //带一个-:029-85原创 2022-05-12 10:43:10 · 1451 阅读 · 0 评论 -
js替换两个数组对象(json)中指定的key:value(键值对中的value)
需求:将旧数组对象中的{digitNum: 22}替换为新数组对象中的{digitNum: 2}…js方法比对:前提要求两个数组对象中每一条数据都有一个唯一标识如:id实现思路:将两个数组对象id进行比对,id相同则将旧值替换为新值mounted() { getDecimals().then(res => { //获取新json this.orderList = this.getArrDifSameValue(this.orderList, res.data) //传值给自原创 2022-05-07 09:22:19 · 3990 阅读 · 0 评论 -
VUE element-ui之table表格全选框(复选框)隐藏
步骤:简单粗暴,先为表格加类名:<el-table ref="table" v-loading="crud.loading" :data="crud.data" class="order" border style="width: 100%;" :header-cell-style="{padding: '',background:'#F6F7FC',color:'#333333', textAlign: 'cen原创 2022-03-15 08:14:35 · 3623 阅读 · 0 评论 -
VUE之高德地图轨迹绘制与轨迹回放
步骤:安装依赖npm install vue-amap -Smain.js中注册import AMap from 'vue-amap'Vue.use(AMap)AMap.initAMapApiLoader({ key: '你申请的key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyE原创 2022-02-23 16:41:49 · 4486 阅读 · 1 评论 -
VUE element-ui 之table表格全选框居中对齐
步骤:默认的全选框是左对齐,加了align=“cnter”之后发现table内容复选框居中,header错位<el-table-column type="selection" width="55" align="center" />全局样式中加入:.el-table--border .el-table__cell:first-child .cell { padding: 0原创 2022-02-16 11:13:05 · 2794 阅读 · 1 评论 -
VUE-element-admin之配置多级路由菜单
步骤:roters.js中添加如下代码:{ path: '/usermanagement', alwaysShow: true, //是否显示父级:如果为false则只显示最内层菜单(默认false) component: Layout, hidden: false, //是否显示 redirect: 'noredirect', name: '用户管理', meta: { title: '用户管理', icon: 'Steve-Jobs', a原创 2022-02-15 15:31:21 · 3554 阅读 · 0 评论 -
VUE iView之栅格布局&响应式布局
栅格布局:我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局,可以使页面排版美观、舒适。我们定义了两个概念,行row和列col,具体使用方法如下:使用row在水平方向创建一行将一组col插入在row中在每个col中,键入自己的内容通过设置col的span参数,指定跨越的范围,其范围是1到24每个row中的col总和应该为24注意:非 template/render 模式下,需使用 i-col。响应式布局:参照 Bootstrap 的原创 2022-02-07 11:03:18 · 3273 阅读 · 1 评论 -
VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)
需求:鼠标悬停浅色背景,勾选复选框选中行深色背景步骤:<el-table id="excel_table" ref="table" class="order" border height="80vh" :summary-method="getSummaries" :show-summary="true" :data="Data"原创 2022-01-18 08:44:39 · 3232 阅读 · 3 评论 -
VUE-element-admin之一二级菜单选中状态保持
项目需求:一级二级菜单选中后始终保持选中状态,部分二级菜单隐藏情况下也保持一级二级菜单选中步骤:分析了el-admin源码,只需判断当前页面菜单是否要保持其他菜单选中即可先找到修改文件:js处判断:...原创 2022-01-14 10:05:12 · 1262 阅读 · 3 评论 -
VUE element-ui 之table表格双表头、表头内插入输入框
步骤:模板部分:就是在表头中嵌套表头,slot="header"是重点,两个表头内label、prop需一致,否则表格内容不显示 <el-table-column type="selection" width="55" align="center" :selectable="checkboxT" > <el-table-column原创 2022-01-12 19:45:44 · 3957 阅读 · 1 评论 -
VUE element-ui 之清除form表单验证
步骤:<el-form ref="form1">this.$refs['form1'].resetFields()在需要清除验证的方法中定义即可原创 2022-01-10 17:55:17 · 797 阅读 · 1 评论 -
VUE element-ui 之时间格式转时区格式
步骤:模板:<el-date-picker v-model="createTime" type="daterange" :clearable="false" range-separator="-" style="width: 210px" start-placeholder="开始日期" end-placeholder="结束日期"原创 2022-01-10 12:46:59 · 1703 阅读 · 0 评论 -
VUE element-ui 之table表格第一行插入输入框
步骤:模板中配置列:<el-table-column label="序号" width="70" align="center"> <template slot-scope="scope"> <div v-if="scope.$index == 0" /> <div v-else>{{ (scope.$index) }}</div> </template> </el-table-column&g原创 2022-01-07 17:46:40 · 4141 阅读 · 2 评论 -
VUE element-ui 之table表格表头插入输入框
很简单:<el-table-column prop="create_time" label="时间" width="120" > <template slot="header" slot-scope="scope"> 重点是slot="header" <el-select v-model="value"原创 2022-01-07 15:08:45 · 2190 阅读 · 1 评论 -
VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据
需求:1. 发货数量默认为0,用户可自行输入;2. 点击复选框将未发货数动态赋值给发货数,取消复选发货数为0;3. 点击全选框将每行的未发货数赋值给对应发货数,取消全选发货数为0。实现步骤:画重点:1.模板定义<el-table v-show="order" ref="multipleTable" :v-loading="loading" border :data="tableDataOrder" height="69vh" style="width: 100原创 2022-01-06 11:58:33 · 2735 阅读 · 3 评论 -
VUE element-ui之table表格横向展示(表尾汇总)
产品需求:在正常表格下方进行一系列汇总(如:合计等),分析之后发现需要拼接一个或多个横向排列的表格。实现步骤:模板部分: <el-table :data="DataBefore"> <!--此处为正常纵向表格,直接将横向表格拼接在下方--> </el-table><!-- 合计 --> <section> <el-table :show-header=原创 2021-12-31 13:27:04 · 10331 阅读 · 2 评论 -
js处理json数据(合并键值对相同的数据,指定键值对相加或拼接)、前端实现
方法:// 将相同name的进行分组 for (let i = 0; i < newArr1.length; i++) {//newArr1为原始json数据 // 利用some函数来区分是否相同 if ( !obj.some(item => item.name === newArr1[i].name && item.width === newArr1原创 2021-12-16 19:53:18 · 2170 阅读 · 0 评论 -
VUE之常用复用方法封装
步骤:将方法封装之js文件const utilFiltra = { // 过滤合同名称为空(jexcel使用) filtraName: function(arr) { for (let i = 0; i < arr.length; i++) { if ((arr[i]['materialName']) === '') { arr.splice(i, 1) i-- } } return arr }, //原创 2021-12-14 20:17:14 · 1573 阅读 · 0 评论 -
VUE element-ui之table表格遍历渲染
步骤:定义模板:<el-table-column v-for="(item, index) in tableList" :key="index" :prop="item.prop" :label="item.label" :show-overflow-tooltip="true"//文字过多隐藏/>定义表头:data() { return{ tableList: [ { prop: 'unit_price', label: '单价'原创 2021-12-07 13:39:05 · 5300 阅读 · 0 评论 -
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
步骤:表格中直接插槽法:<el-table-column :show-overflow-tooltip="true" prop="number" label="发货数量"> <template slot-scope="scope"> <el-input v-model.number="scope.row.number" @focus="onfoucs(scope)" @blur="blurUsern原创 2021-11-25 14:23:13 · 2178 阅读 · 0 评论 -
VUE element-ui之table表格勾选复选框动态合计某列的值
实现步骤:自定义数组对象合计方法:countTotal(arr, keyName) { let $total = 0 $total = arr.reduce(function(total, currentValue, currentIndex, arr) { return currentValue[keyName] ? (total + currentValue[keyName]) : total }, 0) return $total原创 2021-11-14 15:25:55 · 1637 阅读 · 0 评论