![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
赫兹/Herzz
驯服野生bug中......
展开
-
VUE2 与 VUE3 中监听器watch的区别
1.定义方式:Vue 2中的监听器是通过watch方法直接在组件内部创建的,而Vue 3中的监听器是在setup函数内使用watch函数创建的。2.侦听多个数据源:Vue 2中可以传递多个数据源进行监听,而Vue 3中则需要将多个数据源作为参数传递给watch函数。3.深度监听:在Vue 3中,深度监听可以通过在watch函数中设置deep: true来实现。原创 2024-03-13 08:27:40 · 581 阅读 · 0 评论 -
基于VUE3搭建项目步骤
【代码】基于VUE3搭建项目步骤。原创 2024-03-06 08:22:54 · 359 阅读 · 0 评论 -
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 评论 -
VUE3+elementPlus之 子组件直接修改父组件的值(父子组件props双向绑定)
需要注意的是,Vue 推荐使用组件之间的 props 和事件来进行父子组件之间的通信,而不是直接修改父组件的值。原创 2024-01-20 10:06:57 · 1118 阅读 · 0 评论 -
VUE之jspreadsheet电子excel表格实时动态高度设置
2.组件中直接引入即可。原创 2023-08-25 10:57:54 · 615 阅读 · 0 评论 -
VUE 之普通表格过滤器封装(前端实现表格实时搜索),无分页情况下
**需求:无分页表格不请求接口进行过滤筛选**封装过滤方法:原创 2023-02-07 12:04:43 · 494 阅读 · 0 评论 -
VUE之Vxe-table动态生成多级表头及后端返回数据的处理
需求:1.第一列为正常列;2.第二列开始为动态生成列(根据接口返回数据生成);3.最后一列为编辑列。原创 2022-11-16 14:01:28 · 4285 阅读 · 0 评论 -
VUE之Vxe-table动态生成多级表头
需求:1.第一列为正常列;2.第二列开始为动态生成列(根据接口返回数据生成);3.最后一列为编辑列。原创 2022-11-11 16:44:35 · 2602 阅读 · 1 评论 -
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
可以看到我们自定义name长度为120,当用户输入超过120会出现error提示,并实时显示用户输入的字符长度,可以无限输入但是无法通过校验。新建js文件写入下面的函数。原创 2022-09-21 16:53:06 · 3388 阅读 · 0 评论 -
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项);勾选列表之外的节点,列表节点自动勾选(如果取消列表勾选,其他同级节点全部自动取消勾选),单独操作列表节点可正常勾选反选,亲测有效。原创 2022-08-25 08:46:48 · 2362 阅读 · 4 评论 -
VUE element-ui之el-tree树形控件获取最后一级节点(无子节点的节点)
VUE element-ui之el-tree树形控件获取最后一级节点(无子节点的节点)原创 2022-08-22 08:40:33 · 5215 阅读 · 3 评论 -
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线原创 2022-08-11 15:19:12 · 6047 阅读 · 2 评论 -
VUE element-ui之el-form表单非必填内容格式校验
需求:手机号码非必填,校验其格式。可以看到非必填且校验了格式。原创 2022-08-03 09:43:13 · 1950 阅读 · 0 评论 -
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 评论 -
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 评论 -
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
步骤:1.安装全局依赖:npm install xe-utils vxe-table@next2.main.js中注册全局组件:import 'xe-utils'import VXETable from 'vxe-table'import 'vxe-table/lib/style.css'Vue.use(VXETable)3.组件中使用方法:这里举例为高级表格,自定义工具栏名称、图标。<template> <vxe-grid v-bind="gridOptio原创 2022-04-30 09:14:32 · 11352 阅读 · 11 评论 -
VUE element-ui下拉菜单el-select获取label值或value的值
步骤:举例:select数据格式为:options: [ { value: '1', label: '黄金糕' }, { value: '2', label: '双皮奶' } ]一:label的获取1.定义事件<el-select v-model="form.receivePaymentCustomerId" placeholder="请选择" size="small" filterable @change="custo原创 2022-04-27 20:32:00 · 7757 阅读 · 1 评论 -
VUE项目中vuex的使用步骤
1.store文件下modules中定义专属状态管理js文件const state = { boxCardIds: []}const mutations = { CHANGE_BOX_CARD_IDS: (state, action) => { state.boxCardIds = action } SHIPMENT_RESET: (state) => { state.boxCardIds = [] }}const actions = { c原创 2022-04-27 15:29:26 · 2397 阅读 · 0 评论 -
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
直接上封装的dialog组件代码<template> <div> <el-dialog title="原片采购详情" class="Deviceslist_eldialog" width="978px" height="534px" :visible.sync="dialogVisible" :before-close="detailsCancel" > <el-d原创 2022-04-01 08:39:09 · 1996 阅读 · 1 评论 -
VUE element-ui之jspreadsheet-ce在线表格数据json序列化(excel数据同步为相应key:value,并过滤掉为空的数据,未输入的行)
步骤:关于jexcel如何运行于vue中,前面的文章中有详细介绍封装序列化excel方法:getDetailsList(arr) { const arrKeys = ['key1', 'key2', 'key3', 'key4', 'key5', 'key6', 'key7', 'key8', 'key9']//序列后的key return arr.filter(el => el.filter(child => child).length > 0).map(i原创 2022-03-30 10:39:08 · 1359 阅读 · 0 评论 -
VUE element-ui之百度OCR证件识别,组件内证件照转码解码识别身份证照文字
步骤:接上一篇博文继续完善获取access_token封装Base64照片转码方法:const identification = { // 将图片转为base64格式 transformBase64(file) { return new Promise((resolve, reject) => { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = f原创 2022-03-23 12:21:50 · 3463 阅读 · 0 评论 -
VUE 之百度OCR证件识别获取access_token详细步骤
步骤:由于直接访问百度在线api会跨域,配置代理解决跨域:vue.config.js中配置devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, proxy: { '/baiduOCR': { target: 'https://aip.baidubce.com', // 百度在线请求地址https://ai原创 2022-03-23 10:39:07 · 5836 阅读 · 4 评论 -
VUE element-ui之上传身份证照片正反面详细代码
步骤:定义上传组件:<el-col :lg="6"> <el-upload class="avatar-uploader" action="#" :auto-upload="false" :show-file-list="false" :on-change="changePictureUploadIDFront"> <img v-if="imageUrlFront" :src="imageUrlFront" cla原创 2022-03-22 15:45:51 · 6629 阅读 · 9 评论 -
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
步骤:封装验证规则:export function isvalidPhone(phone) { const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/ return reg.test(phone)}表单中定义验证: <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small">原创 2022-03-17 11:21:26 · 3969 阅读 · 1 评论 -
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 element-ui之输入框限制只能输入数字number类型及表单校验
步骤:表单中:<el-form ref="ruleForm" :model="form" :rules="rules"> <el-form-item label="上级地区:" prop="region" :label-width="formLabelWidth"> <el-cascader v-model="selectedOptions" :options="option原创 2022-03-10 14:41:37 · 5571 阅读 · 1 评论 -
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菜单栏图标选中状态跟随文字颜色状态变化
问题:ui给的svg图标引入侧边栏后不跟随文字颜色状态变化分析svg图标代码后,找出问题所在:svg图标自带样式导致解决方法:简单粗暴!!!直接删掉fill看效果:完美解决。原创 2022-01-14 11:18:11 · 1018 阅读 · 0 评论 -
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 评论