一、树形控件(el-tree) + Icon 图标实现带图标的菜单栏1. 页面布局 <template>
<!-- 菜单信息 -->
<nav>
<el-tree
class="filter-tree"
:data="items"
node-ke
转载
2024-04-13 13:29:10
524阅读
根据角色不同类别改变树的选择和禁用，下面我将所有代码复制过来，如果有变量确实自行补充html <template>
<div class="manageRole">
<div class="manageRole-header">
<el-input
v-model="searchValue"
转载
2024-10-13 15:03:44
86阅读
写在开头首先，如果你是从系列开头第一篇文章一篇一篇顺序看到这一篇文章，那么小编恭喜你，也感谢你，因为你足足读完了共一万字的文章，当然，也再次谢谢你对小编文章的喜爱，希望这系列文章对你能有一点微不足道的帮助，那我也心满意足了。O(∩_∩)O其次，前面写完了五篇文章，这是第六篇文章，而这一篇文章是一篇总结文，主要是总结一下前五篇文章学到的所有知识点，顺便也理理文章的思路，希望能对你有更进一步的帮助。最
element-plus popover组件嵌套tree组件需求是通过点击dialog弹出框中的输入框弹出tree组件进行多项父子嵌套的数据的选择。需求很简单，上代码：<template>
<el-dialog title="提示" v-model="dialogVisible">
<el-popover
placement="right"
:w
转载
2024-06-24 04:51:15
143阅读
vue的数据是单向数据流动，在子组件中是不可以修改父组件的数据的，但是还是可以通过其他方式间接修改父组件的数据。核心思想：数据在哪个组件，就在哪个组件修改。1，方式一：通过向子组件传递方法这个方式主要是在父组件内定义一个改变父组件数据的方法，然后将方法转入大子组件内。由于vue数据是单向流动的，父组件的数据只能通过父组件直接修改，而子组件只能间接修改，子组件间接修改的方式就是获取到父组件传递过来的
，然后打开第一个节点就是我们渲染后的，大家可以看到，渲染后的节点里有我们添加的“is-current”这个样式，法二以上方法在elementUI的2.13.0并不适用 在请求完栏目树的时候，调用函数app.$nextTick(function () {
app.$refs.treeDataRef.setCurrentKey(app.cata
想学习 element 源码，网上搜索了一圈之后发现大多还是让直接访问 eplay 文件，但是我下载下来之后访问 play 文件，发现有个 ga 报错。这个报错去 element issue 上查看发现有人提出，但是也还没有解决。于是就将 app.vue 中的代码删了直接写的。根据 element-ui 的官网顺序，先学习的是 el-row 组件的使用。首先在官网上看到el-row 的属性，有 g
转载
2024-05-26 15:03:31
382阅读
简介本来不打算写输入框的分析，心想一个输入框能有多复杂，还能怎么封装，后来浏览了下源码，发现还是有很多自己不知道的知识点，于是打算还是写，下图就是一个Element的最基本的输入框 结果一看源码，我的鬼鬼，源码竟然300多行！咋会这么复杂，看过官网的文档后，发现确实应该这么复杂，因为这个输入框不仅仅是只有一个input这么简单，还附带了很多的其他内容，上图仅是一个最基本的形式而已，下面我们依次
转载
2024-03-20 09:18:24
853阅读
在vue项目中，经常会遇到需要刷新当前页面的需求。因为vue-router判断如果路由没有变化，是不会刷新页面获取数据的。方式1：go(0)和reload()通过location.reload()或是this.$router.go(0)两种强制刷新方式，相当于按F5，会出现瞬间白屏，体验差，不推荐。方式2：定义一个空白路由页面，路由跳转到该空白页后立马跳回当前页，实现路由刷新。在router路由表
转载
2024-08-28 21:34:19
299阅读
element ui的el-tree多选树(复选框)父子节点关联不关联的问题，选中当前节点，他的子节点和父节点是否被选中，非常详细属性check-strictly官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。 而此属性的意思是： **默认false，父子关联。**有如下现象及问题： 1、当你通过函数设置勾选节点的时候，只
转载
2024-04-24 22:12:53
1438阅读
最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。首先说说需求，就是点击出现弹窗+蒙板，弹窗内容是一个树组件当然，什么弹窗大小啊，是否显示多选框，默认选中，通过关键字过滤节点（element都自带好了）几个常用功能都封进来，等以后用到别的的时候再往里加。都解决了）今天先记录处理数据的问题与后台交流后得
转载
2024-04-03 21:11:20
498阅读
1.渲染树形控件树形控件的结构是一层层嵌套的，官网上定义好的结构中属性名我们无法更改，实际开发中后台返回的字段名与属性名也会不一致，这里我们用到了“递归”的方法将结构中的属性赋予实际开发中的值。（1）树形结构如下：<el-tree
v-model="form.treeData"
:data="treeData"
show-checkbox
node-key="id"
ref="tr
转载
2024-02-25 19:43:31
399阅读
1、temple中的代码<el-tree
ref="tree"
node-key="id"
:data="data2"
show-checkbox
:props="defaultProps"
@check-change="checkChange"
>
</el-
转载
2024-09-03 12:26:31
489阅读
文章目录webpack高级（优化）提高开发体验SourceMap源代码映射提高打包构建速度HMR（热模块替换）OneOfInclude/ExcludeCacheThead多进程减少代码体积Tree ShakingBabelImage Minimizer优化代码运行性能Code Split多入口提取重复代码多入口按需加载单入口给动态导入文件取名Preload / PrefetchNetwork C
之前写过一个优化部分代码的el-checkbox 这次项目要求el-tree写一个shift选项，基本很多依赖的都是element-ui本身的方法，但是踩了一个坑，就是很简单的坑，以为是别的错误，发现后简直哭笑不得，这个坑来给大家填一下。写一下前期的我的数据结构之类的，供参考！我的数据结构是三层，项目只有三层的，所以更深层次的大家可以去找一下，或者在我的基础上加以优化，有更优化的可以私信
转载
2024-09-12 10:42:00
1491阅读
一、内置对象（一）Response对象1、简介：response 对象在ASP中负责将信息传递给用户.Response对象用于动态响应客户端请求,并将动态生成的响应结果返回到客户端浏览器中,使用Response对象可以直接发送信息给浏览器,重定向浏览器到另一个URL或设置cookie的值等.2、方法：①、write方法：response.write ** &n
源码地址https://github.com/PanJiaChen/vue-element-admin用户登录页面https://panjiachen.github.io/vue-element-admin/#/login?redirect=/dashboard 源码： 当用户打开https://panjiachen.github.io/vue-element-admin 这个项目的地址时，程序自
转载
2024-04-21 19:24:00
236阅读
有时候我问自己，为什么我干的前端的跟别人干的不一样，人家都是写写h5页面啥的就好了，为什么我非得那么苦逼的魔改各种组件，产品就不能按照现有的组件库设计产品吗？唉，说多了都是泪。不过这个也能让我有一定提升，只是这个提升是时间的极度浪费来达到的，毕竟在已有组件上就行修改还是很难的，总归是受限的。不说了，直接进入正题 吧。先看个截图，一图胜千言！！！左边是一个棵完整的树，右边是选中的节点组成的树。我做过
转载
2024-10-28 12:17:36
123阅读
这一章的目的是让我们认识一下react源码架构和各个模块。在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。react的核心可以用ui=fn(state)来表示，更详细可以用const state = reconcile(update);
const UI = commit(state);上面
相关（1） 相关博文地址：SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.html
SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示：https://www
