前端学习(2690):重读vue电商网站11之使用树形控件 el-tree

 

对于分配权限一栏,我们需要如下效果:

相关配置属性:


其中 data 为我们的数据源,props 为我们在 tree组件显示的文本内容。通过设置 node-key可以让每个树节点作为唯一标识的属性,整棵树是唯一的;通过设置 default-expand-all 来默认展开我们的所有节点,不需要每次都让用户去打开,体验感好;通过设置 default-checked-keys勾选我们已有的权限。

最后,我们通过递归的方式,判断当前 node 节点是否存在 children属性,如果不存在的话,就包含了三级权限,然后添加到我们的数组中,然后通过 :default-checked-keys="defKeys" 来渲染选中当前已有的权限。

此外,当我们关闭对话框时还需要监听一下关闭事件,不然每次数组都会保存原来的权限数据,导致一些问题。因此,监听 close 事件后,每次对话框关闭时,都将数组进行清空。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414921.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 播放raw文件夹下音频文件,本地MP3文件播放,播放云端MP3文件,获取MP3文件播放时长

1、复制音频文件到raw文件夹下 2、实例化音频文件 private final MediaPlayer.OnCompletionListener beepListener new MediaPlayer.OnCompletionListener() { // 声音public void onCompletion(MediaPlayer mediaPlayer) {mediaPlayer.seekTo(0);} }; private static final …

前端学习(2691):重读vue电商网站12之获取选中节点的keys:

首先,给我们对话框的确定按钮绑定一个事件。 主要使用 tree 组件提供的两个方法 getCheckedKeys 和 getHalfCheckedKeys来分别返回目前被选中的节点的 key 所组成的数组和目前半选中的节点的 key 所组成的数组

cmd 【已解决】windows连接手机,运行adb devices提示“unauthorized”

报错截图如下: 问题原因:电脑连接手机。手机未授权 解决方式: 设置----开发者选项-----打开USB调试,出现如下弹框,点击“确定”即可解决问题。 转载于:https://www.cnblogs.com/syw20170419/p/8280291.html

Android 可开关式顶部下拉view

效果&#xff1a; 实现方法 1、layout文件结构 最外部使用相对布局 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.c…

前端学习(2692):重读vue电商网站13之使用动态编辑标签

实现效果如下&#xff1a; 通过 v-if 的 boolean值来动态变化是否显示文本框还是 button 按钮。通过 v-model 双向绑定来实现文本框内容的监听。 由于每一行需要设置文本框的显示与隐藏&#xff0c;而且数据是共享的。我们需要通过 scope来获取每一行的值来进行绑定&#xff0…

宝塔面板解决跨域

1、找到宝塔面板配置nginx文件的地方 2、增加如下代码 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods POST,PUT,GET,DELETE; add_header Access-Control-Allow-Headers version, access-token, user-token, Accept, apiAuth, User-Agent…

Android 底部上拉抽屉view

module链接&#xff1a;https://download.csdn.net/download/meixi_android/10839835 接入module方法&#xff1a;https://blog.csdn.net/meixi_android/article/details/84655666 1、activity实现步骤 layout文件布局——DrawerLayoutContent_ID是抽屉内容id&#xff0c;dra…

前端学习(2693):重读vue电商网站14之步骤条的使用与美化

以下就是步骤条使用的核心代码&#xff0c;其中 active 绑定的是每一个 step 的下标&#xff0c;默认从 0 开始。其次&#xff0c;我们可以设置 aligin-center 属性来让我们的步骤条进行居中。el-step就是每一个步骤进度。 Javascript <!-- 步骤条区域 --> <el-steps…

BOM--window对象

BOM 的核心对象是window&#xff0c;它表示浏览器的一个实例。在浏览器中&#xff0c;window 对象有双重角色&#xff0c;它既是通过JavaScript 访问浏览器窗口的一个接口&#xff0c;又是ECMAScript 规定的Global 对象。这意味着在网页中定义的任何一个对象、变量和函数&#…

前端学习(2694):重读vue电商网站15之阻止页签tabs切换

主要函数如下&#xff1a; 在我们的 tabs 标签页添加一个 before-leave 函数 然后在 methods 中定义&#xff0c;根据第一个标签页的逻辑来阻止标签页的切换。

Android 侧滑多层view显示

侧滑module链接&#xff1a;https://download.csdn.net/download/meixi_android/10840271 引用方法 只需layout布局文件引用即可——第一个LinearLayout是底层view&#xff0c;第二个LinearLayout是上层view&#xff0c;侧滑即可显示底层view <com.daimajia.swipe.SwipeL…

Android QQ登录集成

1、首先到腾讯开放平台创建应用&#xff0c;并上线——使用有效APP ID才可以进行qq登录 腾讯开放平台&#xff1a;https://open.tencent.com/ 上线后APP ID 2、下载腾讯sdk&#xff1a;https://download.csdn.net/download/meixi_android/10842092 3、activity代码详情&#…

前端学习(2695):重读vue电商网站16之Upload 上传组件

通过点击或者拖拽上传文件 Js <!-- action表示图片上传后台api地址 --> <el-upload:action"uploadURL":on-preview"handlePreview":on-remove"handleRemove"list-type"picture" ><el-button size"small" typ…

ajax 跨域

ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考 浏览器同源政策及其规避方法 CORS请求原理 CORS是一个W3C标准&#xff0c;全称是"跨域资源共享"&#xff08;Cross-origin resource sharing&#xff09;。它允许浏览器向跨…

左右滑动实现activity之间的跳转

首先来看一下实现效果 1. BaseActivity extends Activity 首先&#xff0c;由于activity类之间存在很多共性 &#xff0c;比如跳以及滑动等事件&#xff0c;所以需要抽象出一个父类来&#xff0c;简化代码量。 附代码&#xff1a; /*** 按照1、2、3的步骤走* / public abstr…

3 View - 状态保持 session

1.状态保持 http协议是无状态的&#xff1a;每次请求都是一次新的请求&#xff0c;不会记得之前通信的状态客户端与服务器端的一次通信&#xff0c;就是一次会话实现状态保持的方式&#xff1a;在客户端或服务器端存储与会话有关的数据存储方式包括cookie、session&#xff0c;…

拖拽升空的Android小火箭

先上演示效果 1、MainActivity 主布局就两个Button按钮 &#xff1a;一开启、二关闭 就不贴主布局xml了 因为小火箭是游离在activity之外的&#xff0c;所以不能依赖activity的生命周期 需要注意的一点是不要忘记在清单文件里配置 service 贴一下代码&#xff1a; public class…

yii验证系统学习记录,基于yiicms(一)写的太长了,再写一篇(二)

项目地址&#xff1a;https://gitee.com/templi/yiicms 感谢七觞酒大神的付出&#xff0c;和免费分享。当然也感谢yii2的开发团队们。 项目已经安全完毕&#xff0c;不知道后台密码&#xff0c;这种背景下&#xff0c;后台无法进去。绕不开的话题就是&#xff1a; 1.后台密码账…

前端学习(2697):重读vue电商网站18之监听图片删除事件

Js // 处理图片移除的操作 handleRemove(file) {// 1.获取将要删除的图片的临时路径const filePath file.response.data.tmp_path// 2.从pics数组中&#xff0c;找到这个图片对应的索引值const idx this.addForm.pics.findIndex(x > x.pic filePath)// 3.调用数组的 spli…