qq_41444226的博客

在表单设计和流程设计时，碰到多层数据响应式失效问题，当时也是一脸懵，找不到错在哪里，运行代码不报错，就是不能响应式更新视图了。特此记录一下填坑过程。

组件用到所有图标都来自阿里云iconfont效果图效果图1、页面<template> <div class="custom-map-for-approval"> <h2 class="map-title">审批进度</h2> <template v-if="nodeList && nodeList.length > 0"> <div class.

来由：项目用的是iview组件库进行开发的，但是它的时间轴组件无法满足项目复杂需求，所有特意自定义这个新的流程图组件注意：所有图标是阿里云iconfont图标库页面<!-- 自定义流程图 --><div class="new-approval-map"> <h2 class="map-title">审批进度</h2> <div class="map-node"> <div class="map-.

注意在使用原生transition时不要用v-if，用样式控制为佳，否则使用vue封装动画组件transition即可；1、页面<div :class="['depart_tree', {'active': expandFlag} ]" > <div :class="['tree_list']" > <Tree ref="company_tree" :data="deptList" @on-select-change="getDepart".

首先在uniapp官网已经内置了vuex，我们只要引用即可，uniapp-vuex说明1、分别创建根路径下store文件夹，里面放置index.js,并在store文件夹里在创建一个modules文件夹，内部放置moduleB.js和user.js文件index.js文件import Vue from 'vue'import Vuex from 'vuex'// 导入模块import user from '@/store/modules/user'import moduleB from.

**1、**登录npm官网，注册一个npm账号，然后注册完后，官网会给你发送相关的邮件，你去你的邮箱根据提示进行操作，验证通过即可，邮箱一定要通过验证，否则发布版本时会报错。2、制作一个npm的包2.1、创建一个文件夹，如：qnyutils2.2、进入文件夹qnyutils，执行命令：npm init，在此过程中你可以一路回车，那么此时你的包名跟你的文件夹名字一样，即：qnyutils，同时生成package.json 文件2.3、在文件夹 qnyutils 下创建一个 index.js 文件,

vscode 必装插件vscode必装插件：1、文件图标：Material Icon Theme2、html5模板：HTML Snippets、Mithril Emmet3、vue插件：Vetur、Vue 2 Snippets，vue-helper（支持CTRL+点击函数跳转 || 绑定对象跳转）4、{}括号优化插件：Bracket Pair Colorizer5、主题：Tokeyo Night (东京之夜)6、标签自动补齐：Auto Close Tag7、vue输入组件名自动导入

注意事项：vue的mixins模块相当于组件属性和函数的扩展，可以被组件共用。使用mixins页面还可以有自己的方法和属性，当属性名同名时优先使用引用页面的属性，也可以在mixins进行扩展。提高多页面多组件属性和函数的复用性。mixins:被执行的顺序：优先执行引用它的页面同名方法，然后在执行引用页面的方法使用方法：1、创建mixin.js文件import { initQueryParams } from '~script/index';export default { data() {

效果图：1、页面代码<TabPane label="修改手机号" name="ph"> <Form class="form_phone" hide-required-mark :model="formItemPh" ref="phoneModify" :rules="ruleValidatePh" :label-width="120"> <FormItem label="原手机号" prop="oldPhone"> &lt

1、创建静态数据类型 data() { return { formDesign:{}, departmentId:'' } } 2、给子组件绑定数据<!-- 引入审批组件 --><launchs :template.sync="formDesign" :departmentId.sync="departmentId" @updateData="approvalMap"></launchs>3、父组件监听数据变化

<li v-for="(item, index) in list" :key="index" @click="getCurrentItem($event,item)"> <span>{{item.name}}</span> <i class="icon" :class="item.icon"></i> <i class="icon iconqiyong"></i></li>//节点操

在实际开发中，我们经常遇到的前端页面国际化问题，其实就是切换语言模式，说国际化，简直过于夸张了；在vue项目中，推荐使用vue-i18n插件进行语言切换模式处理。注意：*放在data里面的数据无法自动更新目标语言时，需要将循环的数据放到html中渲染，js中无法自动更新<Dropdown @on-click="handleClick"> <Avatar size="32" :src="userAvatar"/> <Icon :size="18" type=

1、安装nginx，如果没有yum命令的，需要自行安装其环境；yum install nginx2、查看nginx是否安装成功执行目录：/usr/sbin/nginx模块所在目录：/usr/lib64/nginx/modules配置所在目录：/etc/nginx/默认站点目录：/usr/share/nginx/html3、把构建好的vue静态文件放到 /usr/local/myproject/dist/文件夹下，没有文件夹，可以自行新建即可，不一定要和我的一样。然后给静态文件夹设置权限

1、在安装node.js目录下创建两个文件夹：node_cache , node_global2、打开电脑cmd命令，检查npm是否安装成功，否则无法设置node.js文件存储路径3、执行npm命令1、npm config set prefix "D:\js_soft\node_global"2、npm config set cache "D:\js_soft\node_cache"...

业务需求：需要对表格操作栏进行多状态控制时，我们就需要把操作模块单独提取出来；1、初始化操作列：{title:'其他列'}，{ title: '操作', key: 'action', width: 150, align: 'center', render: (h, params) => { let state = params.ro...

前言：在实际开发中，我们经常碰到需要滚动右边列表，左边步骤条节点对应显示，点击左边节点右边显示对应内容；今天小编就碰到了这样的需求，在公司大佬的指引下，顺利完成，特此记录一篇，哎，前端水好深，一不小心就被淹死了，，，无情，冷酷，但是还有加油！！！！思路：1、@scroll=“handleScroll”：监听父元素滚动事件，用来计算每个子盒子的距离顶部的高度；2、@click=“handleCl...

<input v-model="formData.mealStandard" type="text" @keyup="validateMealStandard($event)" placeholder="请输入"/>//金额validateMealStandard(e){ let mealStandard = e.target.value.replace(/[^\d....

<input v-model="item.documentsNumber" type="text" placeholder="请输入" @keyup="onlyKeepTwoNumberAfterPoint(index)"/><input v-model="item.documentsNumber" type="text" placeholder="请输入" @keyup="...

//计算时间差函数 difference() { if (this.formData.startTime!==''&&this.formData.endTime!==''){ let start = this.formData.startTime; ...

注意：git提交代码前，必须先拉取代码，防止合作开发时文件冲突1.前提条件，再GitHub上创建仓库和本地电脑安装好git，方法网上很多，不在赘述,接下来打开gitBash窗口2.克隆仓库项目到本地，xxx是仓库链接git clone xxx3.编辑项目后，检查文件是否添加到git，如果有更改或者新增会出现红色文件列表git status4.将红色文件添加到gitgit add ...

前提条件：电脑安装好node.js安装node.js的参考地址：https://www.jianshu.com/p/03a76b2e7e001.安装cnpm(国内镜像速度快)npm install -g cnpm --registry=https://registry.npm.taobao.org注意：可以利用cnpm -v命令查看 是否安装成功2.通过cnpm安装clicnpm i...

1.子组件<template name='my-input'> <view> <input v-model="age" type="text" value="" :placeholder="placeholder" class="my-input"/> <button type="primary" @click="submitForm">...

/** * 根据唯一标识name来对数组进行过滤，达到数据去重效果 * */ unique(arr) { const res = new Map(); return arr.filter((arr) => !res.has(arr.processName) && res.set(arr.processName, 1)) },/**...

例如： let time =‘2019-10-11 15:17:49’年月日：let ti = time.split(’ ');月日： var timearr = time.replace(" ", ":").replace(/\:/g, "-").split("-"); var timestr = ""+ Number(timearr[1])+ "月" + t...

// 批量删除 batchdel(){ let ids = []; if(this.checkArray.length >= 1) { this.checkArray.forEach((item1, index1) => { ...