最近在重构后台管理系统,做到角色管理这边需要给角色分配菜单权限,发现一个小点,场景是这样的:前端用的是antdv框架,里面有一个树状结构a-tree组件,它需要的v-model是子节点的数组,但是不能直接这样传给后端,因为后端需要的是子节点和父节点的数组。所以前端需要将选中的子节点和父节点一起传给后端,赋值的时侯拿到后端的子节点和父节点的数组需要过滤掉父节点将子节点的数组赋值给a-tree的v-m
转载
2024-10-28 17:54:32
23阅读
最近使用了Jeecg自带的antdVue弹出式部门选择组件,相对于整个页面来说,感觉弹出式不太协调,于是动手编写了下拉框式部门选择组件。 下面给小伙伴儿们演示一下具体编写过程。采用Select选择器要实现下拉框,肯定是用到select选择器。我看到select有个dropdownRender的方法,允许用户自定义下拉框的内容,这就好办。开始1、先写上select组件的基本语法<a-selec
转载
2024-10-20 07:41:42
267阅读
最近使用了Jeecg自带的antdVue弹出式部门选择组件,相对于整个页面来说,感觉弹出式不太协调,于是动手编写了下拉框式部门选择组件。 下面给小伙伴儿们演示一下具体编写过程。采用Select选择器要实现下拉框,肯定是用到select选择器。我看到select有个dropdownRender的方法,允许用户自定义下拉框的内容,这就好办。开始1、先写上select组件的基本语法<a-selec
转载
2024-10-23 20:07:41
78阅读
instanceof 操作符可以检测对象的具体类型,如下: if (value instanceof Array){
//对数组执行某些操作
} 但问题是 instanceof 判断的依据是基于原型链去查找Array()构造函数。若只有一个全局执行环境,instanceof 确实可以判断。若网页包含多个框架,实际上存在多个全局执行环境,不同框架之间传入数组,判断的结果是不准确
转载
2024-07-22 10:39:04
47阅读
前提在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出,后期不断补充更新。1、是否合法IP地址export function validateIP(rule, value,callback) {
if(value==''||value==undefined||value==null){
callback();
}else {
转载
2024-04-19 10:47:10
458阅读
在 Form 中使用子组件的过程中发现,每次 resetFields 都会导致子组件销毁重建,而子组件由于要请求接口加载数据,所以会导致重复请求。本文记录相关 Issues 的查找过程和和相关源码分析 文章目录一、现象说明二、官方解释2.1 官方文档2.2 GitHub Issue三、源码分析四、总结 一、现象说明如下代码所示,每次子组件 FormChild 都会打 2 次 log,分析发现是 f
转载
2024-05-23 10:15:08
130阅读
用过 Vue 的各位,对于 Prop 一定不会陌生,相信大家都能够信手拈来。但就是这么一个大家都熟悉的 Prop,有时候也会把我们坑了。在介绍这个坑之前,我们先再来温习一下 Prop 的基础用法。
第一部分“Prop 的基础用法”部分,比较熟悉的朋友,可以直接跳过,从第二部分开始即可。
一、Prop 的基础用法1.1 Prop 的大小写Vue 官方文档的Prop 章节第一段
转载
2024-07-20 17:47:45
381阅读
Vue 框架怎么实现对象和数组的监听?Proxy 与 Object.defineProperty 优劣对比Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ?如果被问到 Vue 怎么实现数据双向绑定,大家肯定都会回答 通过 Object.defineProperty() 对数据进行劫持,但是 Object.defineProperty() 只能对属性进行数据劫持,不能对整个对象进
目录一,vue2中的数组响应式原理vue2中数组和对象操作方式的不同二,重写数组方法源码分析1,定义拦截器2,将拦截器挂载到数组上面3,收集依赖三,其他一,vue2中的数组响应式原理vue2中数组和对象操作方式的不同在对象中增加或者删除属性的时候,数据的响应式原理是不奏效的,因为vue2是用的Object.definedProperty方法进行数据劫持。 因此在进行添加元素的时候,应该用$set来
最近在项目中遇到了一个问题,不知道为什么,所以最后通过动手做demo实践、查文档的方式解决了,这里做一个总结。 例1 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script
一、说明对于直接在数据库插入数据,会存在:用户输入的数据可能存在错误或者特殊符号等异常问题。这就需要对数据验证,从而避免对后续的工作造成影响。前端插入数据交互机制一般为:点击新增按钮,弹出输入框,输入相应内容,点击保存插入到数据库中。二、el-form :rules 简介 Form 组件提供了表单验证的功能,只需要通过 rules 属性将数据传入约定的验证规则,并将 Form-Item的 prop
vue中数组变动更新检测 Vue 包含两种观察数组的方法分别如下 1.变异方法 顾名思义,变异方法会改变被这些方法调用的原始数组,它们也将会触发视图更新,这些方法如下 push()pop()shift()unshift()splice()sort()reverse() 使用举例:example1.items.push({ message: 'Baz' }) 2.非
设计思路-如何追踪变化我们需要知道什么时候数组发生了变化,Array原型中可以改变数组自身内容的方法有7个,分别是push、pop、shift、unshift、splice、sort和reverse。 那么我们是不是就可以认为,当要触发上述方法是就代表的数组要发生变化了,但是由于ES6 之前js没有提供元编程的能力,也没有去拦截原始方法的函数,所以我们可以用自定义的方法去覆盖原生的原型方法。用一个
总结:函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;Tips:其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。理解和学习它们的理念
数组共包含33个标准API方法和一个非标准的API方法,使用场景和使用方案纷繁复杂。未来便于学习,将数组分为三类:改变自身值不改变自身值遍历方法改变自身值的数组方法会改变自身值的数组方法有9个:pop、push、shift、unshift、splice、sort、reverse、copyWithin、fill。熟悉Vue2.x源码的同学会觉得眼熟,没错,前7个方法正是Vue2.x版本中通过拦截数组
通过Struts 1.2提供的validwhen 验证器可以轻松的创建更加复杂灵活的表单验证。 比如说,我们要验证用户两次输入的密码是否相同,或是只有当用户填写表单项“姓氏”时,表单项“名字”才是必须的。 validwhen 需要声明一个叫test的var字段,这个变量的值是一个布尔型的表达式,比如: <var-name>test</var-
在Struts中对用户输入信息的校验一般在FromBean中进行(除非需要访问数据库进行诸如登录信息的校验,因为这是Action的工作),本文将阐述如何在Struts中实现可配置的信息校验。一、在FormBean中手工实现最简单的方法是直接在FormBean中重写ActionForm类的validate方法,validate方法签名如下: public
ActionErrors vali
数组常用的一些方法:1、push()向数组的末尾添加新内容参数:要添加的项。传递多个用逗号隔开,任何数据类型都可以返回值:新增后数组的长度是否改变原数组:改变let ary1 = [12,34,26];
ary1.push(50); //返回一个新的长度
length = 4
console.log(ary1) //结果为 [12,34,26,50] 2、pop()删除数组的最后一
转载
2024-10-20 17:43:20
47阅读
策略模式 (Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法。关键是策略的实现和使用分离。注意:1. 你曾见过的策略模式现在电子产品种类繁多,尺寸多种多样,有时候你会忍不住想拆开看看里面啥样(想想小时候拆的玩具车还有遥控器),但是螺丝规格很多,螺丝刀尺寸也不
1、双向绑定原理就是绑定value值,监听input事件
即,父组件通过props传递value值,子组件通过监听Input事件来
实时将value值通过$emit传递给父组件。
<div>
<input :type="type" :value="value" @input="onInput">
</div>
export default {
转载
2024-09-29 22:24:12
314阅读