- 博客(102)
- 收藏
- 关注
RSS订阅原创 element-plus elplus el-table 表格树多选,存在子级时,父子级选中状态不关联
当使用el-table且行存在children属性是,做菜单管理,选中父节点编辑,不希望选中子节点,则需要父子级不关联。
2023-06-05 10:25:27
1690
1
原创 vue3+element-plus+ts elplus table 实现表格动态列 表格列显示与隐藏的动态控制 支持传递插槽与多级表头
实现表格动态列 表格列显示与隐藏的动态控制 支持传递插槽与多级表头
2023-06-01 15:07:47
3153
原创 vue3+element-plus+ts elplus table 实现表格动态列 表格列显示与隐藏的动态控制
工作接了个需求，需要实现表格的动态列，但是后端又不参与，全权交给前端，百度搜了一下，大多都是的for循环，我觉得用起来不爽，还得改变的书写方式，用对象保存列的相关信息，所以搞了一个这玩应话不多讲，上代码哦，不对，先上效果动态图没做过，见谅吧简介：ProjectTable组件内容store仓库index.ts文件getters.ts文件table.ts文件Home页面总结这玩应在使用时除了引用ColumnControl和ProjectTable两个组件以外，与你普通书写el-
2023-05-26 17:14:51
7675
原创 element-plus elplus el-tree三种图标自定义 并且点击图标展开收起 点击文字获取数据
前言公司需求,需要实现如下样式的树形列表 (基于vue3 + element-plus)当节点展开时,显示展开的文件夹图标,当节点收起时显示收起的文件夹,最后一级显示文件样式废话没有了, 代码如下用到的JScompileTreeData.js还有一件事有的时候文字很短,不好点击,需要点击文字右侧空白也能触发数据回传事件那么你需要想办法 覆盖这个类 ---- .el-tree-node__label覆盖后即可
2022-12-07 18:15:25
3796
原创 react-严格模式
在React18中,React将不会抑制任何日志,如果你安装了devtools,第二次输入将会被淡化,在devtools工具中可以屏蔽第二次输出。还要注意一下,由于componentDidMount等函数会被放入执行队列,所以就算关闭了第二次输出,函数里面的打印在严格模式下还是会输出两次。),本质是一个组件,该组件不会进行UI渲染,它的作用是在渲染内部组件时,发现不合适的代码。在严格模式下(开发阶段),组件的生命周期会被调用两次,以此来明显化副作用代码。方法,在第二次调用生命周期函数时,将会静默输出。...
2022-08-05 15:01:42
1951
原创 react-节点更新与销毁
相同的节点类型: 节点本身类型相同(不管属性,虚拟DOM树更新前后节点都为div则相同,前为div后为p则不相同),如果是react元素则要求type值必须一致。key值的作用: 用于通过旧节点,寻找对应的新节点,如果某个旧节点由key值,则其更新时,会在相同层级中找相同的key值进行对比。将心产生的节点,对比之前虚拟DOM树中的节点,发现差异,完成更新。: 直接放弃该节点,如果节点有子节点,递归卸载节点。4. 运行render,得到新的节点对象,进行。: 重新调用函数,得到一个新的节点对象,进行。...
2022-08-05 10:52:50
1701
原创 react-PureComponent
PureComponent是一个组件,如果某个组件继承自它,则该组件的shouldComponentUpdate会进行优化,对属性和状态进行。优化: 如果一个组件的状态和属性都没有发生变化,那么就没有必要重新渲染。用于避免不必要的渲染(运行render函数),如果相等则不会重新渲染。...
2022-08-03 14:39:45
419
原创 react-context新版api
如果上下文提供者(Provider)的value属性发生变化(Object.is判断为否),会导致该上下文的所有后代全部重新渲染,就算使用了shouldComponentUpdate优化也不行,原因是强制渲染,不运行shouldComponentUpdate。上下文是一个独立于组件的对象,该对象通过React.createContext(默认值)创建,返回的是一个包含两个属性的对象,这俩对象是俩React组件。注意: 同一个Provider不要用到多个组件当中。...
2022-08-03 11:18:02
152
原创 react-ref与ref转发
场景希望直接使用dom元素中的某个方法(如focus),或者希望直接使用自定义组件中的某个方法。通过React.createRef创建。目前,ref推荐使用对象或者函数。未来可能会移除这种赋值方式。高阶组件withLog.js。...
2022-08-02 14:28:46
315
原创 react-表单
type为text,password,textarea,还有select选择器设置value属性即可转化为受控组件。非受控组件组件的内容元素等只受该组件控制,使用者不可控制。radio与checkbox则需要设置checked属性。
2022-08-01 13:55:36
210
原创 react-事件
react事件的本质其实就是一个属性下例中,模拟当倒计时结束时调用父组件的onOver事件index.js这里会有一个this指向问题,需要注意一下解决this指向问题还有别的办法,自行百度state={isOverfalse//倒计时是否完成}//当写成箭头函数时,将会绑定到对象上而不是原型上//传入子组件不会产生this问题handleOver=()=>{isOverTick.js//倒计时importReact,{...
2022-07-27 16:37:46
131
原创 react-jsx语法相关
null,undefined,false,true不会被渲染到页面上。当你在某种情况下不得不写两个元素且不想页面上多显示一个根节点。可以使用React.Fragment简写为
2022-07-26 15:18:36
80
原创 react-vscode相关配置
文件->首选项->设置—搜索emmet—找到EmmetIncludeLanguages。看个人习惯,推荐安装,早养成良好的代码风格。现在可以在js文件中快速生成html标签。react快速代码表编写,建议安装。点击添加项—输入如下内容。...
2022-07-26 14:03:21
200
原创 React-Hello World
参数1元素类型,如果是个字符串,则表示一个普通的html元素(React元素)*React.createElement(参数1,参数2,剩余参数...)*ReactDOM.render(挂载内容,挂载节点)*创建一个React元素,方式1。*参数2元素属性,一个对象。*剩余参数该元素子节点。*ReactDOM库。注意script的type。'这是一个span元素'...
2022-07-26 13:15:54
96
原创 node-文件IO
I： inputO: output外部设备： 非cpu与内存，均为外部设备IO的读写速度往往低于cpu与内存的交互速度同步的文件相关操作不建议使用
2022-06-15 15:53:03
166
原创 uniapp接口、生命周期
文章目录接口调用api接口文档uniapp生命周期应用生命周期页面生命周期组件生命周期接口调用uni.request uniapp的原生方法=> 官方介绍npm上大神封装的方法 @escook/request-miniprogram=> npm链接注意，npm介绍中所写的引用在uniapp中可自行封装，不必挂载到wx或者uni的全局，按自己的需求来api接口文档其余的暂时没想到哪里需要额外注意直接放个接口文档得了 文档地址uniapp生命周期应用生命周期onL
2022-04-26 11:03:17
965
原创 Vue3获取响应式数据、监听数据变化、判断和转换（reactiveApi）
文章目录获取响应式数据应用注意点监听数据变化watchEffectwatch应用判断转换unreftoReftoRefs应用获取响应式数据API传入返回备注reactiveplain-object对象代理深度代理对象中的所有成员readonlyplain-object or proxy对象代理只能读取代理对象中的成员，不可修改refany{ value: … }对value的访问是响应式的，如果传入的值是一个对象，则会通过reactive代理，如果已
2022-04-06 16:54:05
10956
原创 vue3的router与组件异步加载
router的小改动import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"const routes = createRouter({ // history: createWebHistory(base) // 相当于 vue2的 mode:"history",base: base history: createWebHashHistory() // mode: "hash" // 其他改动参
2022-04-02 11:09:24
2083
原创 Vue3对比Vue2的效率提升
Vue3效率的提升静态提升预字符串化缓存事件处理函数Block TreePatchFlag静态提升当节点为普通元素节点且没有绑定动态内容时，将会被提升// vue3const some = createVNode("h1", null, "123456")render() { some}静态属性也会被提升<div class="abc"></div>const some = { class: "abc" }render() { createVNode("d
2022-03-31 14:32:27
1043
原创 vite开发服务器原理
如图，vite创建的开发服务器不同于webpack，首先页面请求一个模块，开发服务器收到通知去编译对应模块，最后将编译好的结果返回。对比webpack少了启动开发服务器时打包所有模块的过程，因此开发效率要大于webpack，开发服务器的启动速度也跟模块的多少没有关系。值得注意的是：vite搭建项目，index页面中引入的main.js是入口文件，并且使用了type=“module”，因此开发的时候不要使用旧版本浏览器，所用浏览器必须支持esModule...
2022-03-31 13:52:32
993
原创 vue-cli环境配置以及router使用history时的小技巧
代码根目录.env文件打包时会被读取其中允许的值有三种// .envNODE_ENV=不推荐修改，vue-cli打包时会根据运行serve还是build修改这个值为development还是productionBASE_URL=/ 默认值是"/"，会根据vue.config.js中配置的publicPath中配置的值而改变VUE_APP_*="*"可以是任何字符，前缀VUE_APP_不能被改变，否则不会被读取在src目录下使用这些值process.env.NODE_ENVprocess.
2022-03-30 13:59:10
452
原创 vue过渡
vue过渡图解: 只拿了入场动画举例enter: 表示第一帧enter-to: 表示第二帧到结束enter-active:表示整个动画xxx-move: 在transition-group中使用,当元素位置发生变化时应用该类名 xxx为 namemode: 默认 入场动画与离场动画同时运行, 可选值out-in, in-out...
2022-03-22 10:26:24
94
原创 vue过滤器
弄个假的过滤器filters: { myFilter(index, other1, other2) { return something }, someFilter(something) { return 1 }}可使用的位置大胡子语法中 {{ index | myFilter(other1, other2) }}v-bind中 :index=“index | myFilter(other1, other2)”几种语法不附带额外参数 {{ index | myFil
2022-03-18 10:44:34
135
原创 Vue2计算属性computed
vue实例被创建,在触发beforeCreate之后,会做一些事情,其中就包括对computed的梳理处理vue会遍历computed配置的所有属性,为每一个属性创建一个watcher,并传入一个函数,传入的函数本质就是computed配置中的getter,这样一来,getter运行过程中就会收集依赖在收集依赖的时候,不光会收集这个watcher,还会收集组件的watcher为计算属性创建的watcher不会立即执行,是因为考虑到该属性是否被使用,如果没被使用,则不会执行,因此在创建watche.
2022-03-17 11:04:01
2371
原创 vue2生命周期详细过程
创建vue实例与创建组件的流程基本一致首先做一些初始化操作,主要是设置一些私有属性到实例中运行生命周期钩子函数beforeCreate,此阶段啥也干不了,数据响应式都没有进入注入流程, 处理属性,computed,methods,data, provide,inject, 最后使用代理模式将它们挂载到实例中运行生命周期钩子函数created 此时有数据响应式, 没有Dom生成render函数: 如果有配置,则直接使用配置的render, 如果没有,使用运行时编译,把模板编译成render函数
2022-03-17 10:11:35
841
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人