<template>
<div class="flow-layer-tag-wrapper">
<div class="left">
<p class="title">可选标签</p >
<!-- 搜索区 -->
<div class="search">
转载
2024-09-03 12:55:13
68阅读
作者：sky124380729Vue路由权限控制当我们在做后台管理系统的时候，都会涉及到系统左侧的菜单树如何动态显示的问题。目前基本上都是RBAC的解决方案，即Role-Based Access Control，权限与角色相关联，用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。vue有很多优秀的后台管理系统模板，这些开源项目都提供了RBAC权限控制的思路，但是在实际项目
转载
2024-09-03 11:51:52
75阅读
我们知道常规后台管理项目都需要设置路由权限用于针对不同的用户展示不同的路由，也可以理解以此来展示和操作不同的菜单栏。然后关于vue-element-admin的路由权限官方也有说明，我这里是单独针对官方的说明的基础上，做进一步的个人做法案列，官网地址: 介绍 | vue-element-admin一、大体步骤 1、配置动态路由，在sr
转载
2024-10-12 00:27:06
85阅读
什么是虚拟dom虚拟dom这个词大家都不陌生，对于习惯使用框架的我们来说，Vue和React当中都有对于虚拟dom的使用和说明。经常会有面试官问你，虚拟dom是什么，有什么优势，为什么会存在虚拟dom虚拟dom实际是真实dom的映射，真实的dom就是平时存在于浏览器当中的dom节点。虚拟dom本质来说是一个js对象，包含了type（组件还是元素）style，class，children，data等
本文只给出子组件的源代码，可以来我的主页看我封装的其他组件。 封装树组件，父子级不关联，并为树组件添加右键功能。<template>
<div>
<el-tree
:data="data"
:props='props'
:highlight-current='highlight_current'
:expand-on-click
文章目录前言一、ElementUI如何在原有页面添加另外一个页面并实现关联增删查改？二、实现步骤1.ElementUI代码2.思路：很简单1.1 首先通过el-row、el-col、el-card等将两个页面组合在一起。1.2 其次在首页el-table 栏内设置 @row-click="companyClick"点击事件，并且设置点击时高亮，highlight-current-row1.3 第
一、效果图二、说明 1、需要的数据表 模块表：t_module、 权限表：t_permission、 用户表：t_user、 角色表：t_role、 用户角色表：t_role_permission 2、需要的json数据，注意：由于数据过长，做了删选，具体数据按自己系统数据为准，这里提供数...
原创
2021-07-12 15:34:11
2563阅读
本文是阅读源码之后，学习到一些新写法，平常业务开发也可以用起来。在我看来，阅读源码，不但能知道该框架的底层原理，出现bug时，可以快速排查和修复，更重要的是，阅读源码就像向优秀的人学习，掌握我们不曾了解的新知识点，看看别人是如何编写出漂亮的，可复用的代码。操作符!.onMounted(() => {
// 组合在一起,!. 就是“强制执行方法,然后再访问它的返回值”。
const i
转载
2024-08-07 20:18:57
63阅读
根据角色不同类别改变树的选择和禁用，下面我将所有代码复制过来，如果有变量确实自行补充html <template>
<div class="manageRole">
<div class="manageRole-header">
<el-input
v-model="searchValue"
转载
2024-10-13 15:03:44
88阅读
这里写目录标题一、安装方法一：使用vue ui命令方式二：打开命令行，进入项目目录中，执行命令第一步：打开命令行 输入vue ui 进入可视化的界面管理工具第二步：点击依赖安装，搜索 element-plus，选中安装第三步：项目中配置element-plus和icons-vue（开发项目直接copy就可以）二、使用1、按钮组件的使用2、图标组件的使用单独使用图标组件按钮中使用图标组件3、分割线
转载
2024-03-23 10:12:21
172阅读
1. 导语本文是主要记录的是我在使用Vue 3.x+ Element-plus开发时遇到的各种问题，会持续更新。2. 导入Axios2.1. 下载插件按下图中的顺序安装Axios。2.2. 在main.js进行如下操作import axios from 'axios'
// 创建 Axios 实例
const http = axios.create({
baseURL: 'http://l
转载
2024-08-07 21:29:36
77阅读
问题： 1.懒加载时，当前展示的节点的子节点是未知的，假如之前编辑过，那前端需要字段来判断某个节点当前应该是什么状态：未选 半选 全选。2.如果前端需要当前已获取的treeData,应该如何手动组装treeData。一.懒加载必要性 当tree数据量过大时，服务端一次性返回全量的数据，服务端查表时间过长，http传输可能会时间过长，前端浏览器渲染时间也会过长。以我的项目为例，大集团作为一级，二级是
主要是记录一些在使用Element-ui 组件时，耗费时间去解决的一些问题。1. 表格渲染出现列项数据重叠，错位的现象偶尔出现，没有报错，搞了好久，然后问了朋友说你设置一下row-key<el-table
:row-key="id"
></el-table>确实是解决了，没有再出现，但是有的表格我也没设置也没出现过。不知道是什么诱发导致的。2. 实现el-sele
转载
2024-03-20 16:46:41
310阅读
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数据是单向流动的，父组件的数据只能通过父组件直接修改，而子组件只能间接修改，子组件间接修改的方式就是获取到父组件传递过来的
前言在一些消费的app，eg京东，淘宝。我们经常在pc端上面会出现点击电视 ，就会有小米、海尔、等各种品牌的电视。这也就是咱们说的树形组件 --也就是一级标签，二级标签，三级标签。（以上是小编举的例子，如有不对请多指教包容）这个篇文章主要的效果图既然说了是Django+vue3+el-tree就了一列大纲他的步骤分那些1.分析django 中所需要的表2.django 中主要实现的业务逻辑2.1d
转载
2024-10-17 16:23:09
119阅读
，然后打开第一个节点就是我们渲染后的，大家可以看到，渲染后的节点里有我们添加的“is-current”这个样式，法二以上方法在elementUI的2.13.0并不适用 在请求完栏目树的时候，调用函数app.$nextTick(function () {
app.$refs.treeDataRef.setCurrentKey(app.cata
vue-element-admin 根据不同的角色权限展示不用的左侧菜单栏前言本人最近在完成一个小项目，项目要求根据不同的角色能够在首页中的菜单栏中显示这个角色权限能够访问的菜单。查了好多资料讲的都差不多，可能是我太菜，没有看懂。所以我就开始结合这源码搞清楚这个权限验证的一个流程。需要用到的几个文件src/permission.jssrc/store/modules/permission.jssr
之前写过一个优化部分代码的el-checkbox 这次项目要求el-tree写一个shift选项，基本很多依赖的都是element-ui本身的方法，但是踩了一个坑，就是很简单的坑，以为是别的错误，发现后简直哭笑不得，这个坑来给大家填一下。写一下前期的我的数据结构之类的，供参考！我的数据结构是三层，项目只有三层的，所以更深层次的大家可以去找一下，或者在我的基础上加以优化，有更优化的可以私信
转载
2024-09-12 10:42:00
1495阅读
文章目录webpack高级（优化）提高开发体验SourceMap源代码映射提高打包构建速度HMR（热模块替换）OneOfInclude/ExcludeCacheThead多进程减少代码体积Tree ShakingBabelImage Minimizer优化代码运行性能Code Split多入口提取重复代码多入口按需加载单入口给动态导入文件取名Preload / PrefetchNetwork C
