- 博客(122)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 微信小程序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
641
原创 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
1500
原创 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
4080
原创 git常用指令
git add *.html -- 将所有的html文件提交到队列git add . ---------- 将所有的文件提交到队列git commit ------- 提交到本地仓库git branch login -- 创建分支 logingit merge logiin -- 切换到分支 logingit merge login --- 主线合并分支命令git remote add origin 仓库路径 --- 查看本项目有没有对应的仓库【git clone】# 默认在当前
2022-05-05 16:20:03
257
原创 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
11549
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
7834
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
2418
原创 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
2055
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
1404
原创 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
3618
原创 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
5986
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
6809
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
4048
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
3662
原创 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
5626
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
4598
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
2914
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
3586
原创 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
3341
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
3312
3
原创 VUE-element-admin菜单栏图标选中状态跟随文字颜色状态变化
问题：ui给的svg图标引入侧边栏后不跟随文字颜色状态变化分析svg图标代码后，找出问题所在：svg图标自带样式导致解决方法：简单粗暴！！！直接删掉fill看效果：完美解决。
2022-01-14 11:18:11
1071
原创 VUE-element-admin之一二级菜单选中状态保持
项目需求：一级二级菜单选中后始终保持选中状态，部分二级菜单隐藏情况下也保持一级二级菜单选中步骤：分析了el-admin源码，只需判断当前页面菜单是否要保持其他菜单选中即可先找到修改文件：js处判断：...
2022-01-14 10:05:12
1298
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
4050
1
原创 VUE element-ui 之清除form表单验证
步骤：<el-form ref="form1">this.$refs['form1'].resetFields()在需要清除验证的方法中定义即可
2022-01-10 17:55:17
829
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
1752
原创 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
4241
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
2281
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
2774
3
原创 VUE element-ui 之table表格导出Excel功能封装（纯前端实现）
需求：导出当前页面所有数据步骤：下载所需依赖：npm install --save xlsx file-saver引入依赖：这里我进行了封装，由于很多页面都需要导出excel功能js文件中引入依赖,进行导出方法封装：import FileSaver from 'file-saver'import XLSX from 'xlsx'const utilWay = { // 导出excel exportExcel(id, excelName) { //方法接收两个参数：table表格的
2021-12-31 15:17:39
1277
原创 VUE element-ui之table表格横向展示（表尾汇总）
产品需求：在正常表格下方进行一系列汇总（如：合计等），分析之后发现需要拼接一个或多个横向排列的表格。实现步骤：模板部分： <el-table :data="DataBefore"> <!--此处为正常纵向表格,直接将横向表格拼接在下方--> </el-table><!-- 合计 --> <section> <el-table :show-header=
2021-12-31 13:27:04
10451
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
2240
原创 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
1663
原创 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
5347
原创 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
2246
原创 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
1687
原创 VUE element-ui之table表格勾选功能（只能勾选某列值相同的行）
产品要求：表格可多选，且只能勾选客户名称相同的行。实现步骤：表格内配置：<el-table border :data="Data" @selection-change="selectionChangeHandlerOrder"> <el-table-column :selectable="checkboxT" type="selection" width="55"
2021-11-09 16:03:24
2910
1
原创 VUE element-ui之使用外部图标---iconfont篇
步骤：1、进入iconfont官网传送门并使用任意方式登录。2、按如下步骤进行：3.图标库建好后直接搜索自己需要的图标按如下步骤：4、将文件解压后，在项目assets下新建文件，将解压文件放入5、在main.js中引入：import './assets/icon/iconfont.css'6、在标签中使用类名引入图标：<el-button style="margin-left: 4px" class="filter-item iconfont icon-zhuan
2021-10-28 10:47:55
2485
3
原创 VUE 之 Jspreadsheet CE电子表格数据处理
需求：将表格内容作为list集合，向后端传递注意：需求默认展示表格为30行空表格，后端接口会拦截空值，所以需将未输入的行去掉默认的Jspreadsheet ：实现步骤：获取Jspreadsheet 数据并处理成后端所需参数格式：var tabdata = this.spreadsheet.options.data //打印表格原始数据如下图1-1 var Data = [] var newArr = [] tabdata.map((v, i) =&g
2021-10-14 18:27:26
2026
1
原创 VUE 之 Jspreadsheet CE电子表格的使用步骤
步骤：下载 npm install jexcel组件引入import jexcel from 'jexcel'import 'jexcel/dist/jexcel.css'定义容器<div> <div class="deploy"> <span>配置列：</span> <el-checkbox v-model="checked" @change="checkedChange">宽上下</el-check
2021-10-12 16:30:12
5387
16
Vue面试题总结.pdf
2022-04-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人