- 博客(33)
- 收藏
- 关注
RSS订阅
原创 Vue实现前端本地打包为一个zip文件
1、应用场景：打包下载的批量二维码图片2、实际后端返回数据格式：图片联机数组集合，每个图片链接打开都是一张二维码图片3、代码实现如下：元素代码<el-button type="primary" icon="el-icon-download" size="mini" @click="downloadCode"> 下载二维码</el-button>js代码第一步安装依赖包
2021-07-02 10:19:58
1003
原创 前端实现表单嵌套表格，el-form内部包着el-table并实现校验功能与动态添加表格的表单数据
一、待实现的场景图，如下：二、元素部分实现方式代码如下图 <el-form :model="editPigStatusForm" ref="editPigStatusRef" label-width="90px" label-position="right" class="edit-form" > <el-table :data="editPigStat
2021-06-24 12:10:40
2625
2
原创 前端根据不同的状态码使盒子展示不同的背景色、字体色、图标功能实现
一、前言/背景数据后端返回的详情对象内部有status四个状态1:待提交，2:待审核，3:已审核 4:已撤销二、场景根据不同的状态判断，页面展示不同的背景色、字体色、图标三、实现方案js实现代码： data() { return { // 顶部动态展示数据 headerData: { // 待提交 1: { bgc: "#EEF7FF", color: "#51A6FF",
2021-06-22 15:54:58
1856
原创 ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到，时、分、秒)
ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到，时、分、秒)
2022-06-15 20:05:41
1767
1
原创 el-tree-展示被选中树节点勾选顺序 +不同的节点类型展示不同的图标
el-tree-展示被选中树节点勾选顺序 +不同的节点类型展示不同的图标
2022-06-02 10:08:22
1088
原创 canvas在后端返回的图片上，根据点的集合绘制闭合的多边形
题场景：图片是后端返回的，同时返回集合点，需求：将图片显示出来，并将点连线行程闭合的多边形展示在图片上完整代码：getData(){ let ths = this; let canvas = this.$refs.canvasImg; let ctx = canvas.getContext("2d"); let img = new Image(); img.src = require("../../../assets/lufei.jpeg"); img.width
2022-05-09 12:12:07
585
原创 moment.js的使用大全
本月第一天 moment().startOf("month") .format("YYYY-MM-DD HH:mm:ss");本月最后一天moment().endOf("month") .format("YYYY-MM-DD HH:mm:ss"); 本季度第一天moment(moment().quarter(moment().quarter()).startOf("quarter").valueOf() ).format("YYYY-MM-DD HH:mm:ss"); 本季度最后一天
2022-05-07 15:37:41
564
原创 合并el-table第一列相同数据的单元格
el-table表格处理同列相同数据进行合并htmlel-table中使用 -->:span-method="objectSpanMethod"方法<el-table ref="tableRef" :data="tableData" tooltip-effect="dark" :span-method="objectSpanMethod" style="width: 10
2022-05-06 15:50:30
1029
2
原创 JS实现数组排序的多种方式
使用递归思想实现数组排序方法的定义：递归排序recursiveSort(array) { //递归结束条件 if (array.length <= 1) { return array; } //取中间元素的索引 var index = Math.floor(array.length / 2); //获取中间元素 var temp = array.splice(index, 1); var
2021-08-04 15:55:29
388
原创 fastmock数据编写小技巧
生成14个随机数组{ "retcode":"000000", "retinfo":"Succeeded", "data":{ "results|15":[{ "updateTime":"@date('yyyy-MM-dd hh:mm:ss')", "loginSystem|1":"[0,1]", "documentNo":"登录版本", "totalApplyNum":"
2021-07-30 17:47:45
700
原创 处理select选择器回显数据后dom元素无法操作问题
问题描述：使用element组件库中的el-select组件处理数据，在项目中有个编辑操作，已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。去掉原来的或者勾选新的都不可以。原因这里的下拉框我采用的是若依的数据字典循环取值，因为数据层次太多，render函数没有自动更新，需手动强制刷新。系统：vue的若依系统解决办法一：给select组件添加@change="$forceUpdate()"方法<el-select v-model="userForm.
2021-07-02 17:11:29
478
2
原创 百分比盒子字体垂直居中
父盒子（div）设置属性如下：height:100%;display:table;子盒子（span）设置属性如下：display:table-cell;vertical-align:middle;
2020-12-30 09:46:13
510
原创 VUE input输入框禁止输入表情控制+自定义校验的几种方式+常见的正则表达式
后台管理项目input输入框不可以输入表情代码实现如下 <el-input @input="prodDetail.prodName = prodDetail.prodName.replace(reg, '')" v-model.trim="prodDetail.prodName" clearable ></el-input> data(){ return { reg: /[\uD83C|\uD83D|\uD83E][\uDC00-
2020-12-18 09:14:39
2988
原创 更改数组对象内部属性名
[ {province: 35, city: 350, area: 850}]数据格式改成[prov: 35,city:350,area: 850]直接贴代码： this.wideAreas = [ {province: 35, city: 350, area: 850}];const wideAreas = this.wideAreas.map((item) => { return { prov: item.province - 0, city
2020-12-18 09:13:31
490
原创 JS实现点赞变亮与取消点赞变灰样式
html代码：<div :class="box change ? 'box-one' : 'box-two'" @click="toggleClick"></div>JS代码：data() { return { change: false, }; }, methods: { toggleClick() { this.change = !this.change; }, }, css代码：.bo
2020-11-19 15:54:36
774
原创 element table表格更改某一列的样式
第一步：使用table表格的cell-style属性定义 <el-table v-loading="loading" :data="tableData" ref="tableDataRef" size="small" border stripe width="100%" :cell-style="changeCellStyle">第二步：在methods方法中定义changeCe
2020-11-13 14:46:15
4484
3
原创 正则表达式与Vue+elementUI校验规则定义的几种方式以及自定义校验规则
正则表达式1、身份证号：/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/2、只允许输入中文和英文/^[\u4e00-\u9fa5a-zA-Z]+$/3、手机号/^1[3|4|5|7|8][0-9]\d{8}$
2020-11-13 14:28:43
1193
原创 VUE实现对el-table-column数据内容格式化处理
VUE table column数据格式化更改数据格式；将后端返回的状态码更改成状态码对应的描述：文字描述// html部分 <el-table-column label="所属公司" prop="group" :formatter="groupFormate"></el-table-column>// js部分 groupFormate(row) { switch (row.group) {
2020-10-17 10:11:24
6070
原创 VUE-table表格操作列表适配屏幕缩小固定右侧fixed
VUE table表格操作列当屏幕缩小的时候fixedel-table-column添加属性// 除操作列，其他列添加:resizable="false"及min-width属性操作列添加的属性：:resizable="false";min-widthfixed="right";效果如下图：
2020-10-16 15:29:22
2481
原创 Mac创建vue项目出现zsh: command not found: xxx解决方法
第一步修改npm包所安装目录的权限打开电脑终端输入：sudo chown -R $USER /usr/local 然后输入密码第二步：查看node、npm的版本 which node which npm 第三步：查看目录是否已切换权限：ls -l /usr/local // 切换到local路径第四步：安装npmnpm install -g @vue/cli-service-global第五步：看vue文档根据步骤创建vue项目...
2020-07-09 11:52:24
4755
1
原创 使用vuelidate自定义必传项完成校验
接口参数需求//发票类型| invoice_type: | 1:普票 2:专票 |//纳税方身份类型 当 invoice_type =1 必填|tax_type: |01-企业 02-机关事业 03-个人 04-其他|//纳税方手机号 当 invoice_type =1 必填| tax_phone | 11位数字校验 |//场所| company_address:| invoice_type =2 必填 |//固定电话|company_tel: | invoic
2020-06-18 11:08:17
687
原创 将对象数组内部的key值转成value、name形式，共echarts饼图数据使用
对象数组类型对象key值替换原对象数组形式const total = [ { detype_name: "aaa", type_no: "3" }, { detype_name: "bbb", type_no: "13" }, { detype_name: "ccc", type_no: "23" }];更改为对象数组形式const total = [ { name: "aaa", value: "3" }, { name: "bbb"
2020-06-09 17:32:17
3343
3
原创 数据类型转换之对象转数组(简易)
对象类型 const total = { wait_status: "1", process_status: "2", already_status: "5", comment_status: "8", hold_status: "9", invalid_status: "3" };数组类型[120, 200, 150, 80, 70, 110, 130]函数封装第一步：遍历对象第二步
2020-06-08 17:41:19
1893
原创 对象数据类型转value、name形式的对象数组数据类型
对象数据类型转value、name形式的数组数据类型对象类型const total = { wait_status:"未接单工单数", process_status:"处理中工单数", already_status:"已处理完成工单数", comment_status:"已评价工单数", hold_status:"挂起工单数", invalid_status:"无效工单数", };
2020-06-08 16:22:37
1237
原创 解决A页传到B页数据，在B页刷新后数据丢失问题
解决列表页传到详情页数据，在详情页刷新后丢失问题列表页面数据传参handleOpt(index, row) { this.$router.push({ name: "WorkDetail", params: { wid: row.wid } }); }详情页面接受参数为了让created(){}生命周期函数内部数据整洁，我们将获取前一页传过来的数据定义到一个函数内部，并将这个函数在created函数
2020-05-18 16:25:25
522
原创 数据存储之localStorage与sessionStorage
1. 两者的区别1.1生命周期localStorage生命周期是永久，当用户将显示在浏览器上提供的UI清除localStorage信息，否则将永远存在。sessionStorage生命周期为当前窗口或者标签页，当窗口或者标签页被永久关闭了，那么sessionStorage存储的数据也会被清空。1.2存储方式localstorage（本地存储）则以文件的方式存储在本地,永久保存（不主动删除，则一直存在）；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessio
2020-05-14 10:52:36
529
原创 路由跳转的三种方式 +跳转至第三方网站+vue跳转新页面(新标签页打来)
H5实现跳转功能点击按钮跳转三方网站1.点击按钮跳转至第三方网站查询物流页面显示： <van-button plain @click="checkExpress(item.express_code, item.express_no)" >查看物流</van-button>js代码： checkExpress(express_code, express_no) { window.location.href = "ht
2020-05-13 11:38:22
28628
原创 Tag单选高亮、传递选中的checkbox数组到后端
点击切换Tag标签、传递选中的checkbox数组到后端点击切换Tag数组1.html代码片段js中data数据：js代码片段：传递选中的checkbox数组到后端html代码片段data全局变量js代码片段点击切换Tag数组功能：点击通过for循环渲染出来的Tag标签显示高亮1.html代码片段<div v-for="(item,index) in groupData" :key=...
2020-03-13 16:56:44
524
空空如也
echarts 中如何定制dataZoom显示的起始值和结束值
2023-03-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人