element el-tree循环遍历树形结构,并动态赋值disabled属性
凌晨3点,功夫不负有心人,已经累趴,效果终于出来:

看到树形结果,我们首先想到的是肯定需要用到递归了。
贴上代码:
<style scoped>
.form {
width: 50%;
}
</style> <template> <div class="form"> <el-tree
:data="data2"
show-checkbox
node-key="id"
default-expand-all
:props="defaultProps">
</el-tree>
</div> </template> <script>
export default {
data() {
return {
data2: [
{
fs: 0,
id: 1,
label: "一级 1",
children: [
{
fs: 0,
id: 4,
// disabled:true,
label: "二级 1-1",
children: [
{
fs: 1,
id: 9,
label: "三级 1-1-1"
},
{
fs: 1,
id: 10,
label: "三级 1-1-2"
}
]
}
]
},
{
fs: 0,
id: 2,
label: "一级 2",
children: [
{
fs: 0,
id: 5,
label: "二级 2-1"
},
{
fs: 1,
id: 6,
label: "二级 2-2"
}
]
},
{
fs: 0,
id: 3,
label: "一级 3",
children: [
{
fs: 0,
id: 7,
label: "二级 3-1"
},
{
fs: 0,
id: 8,
label: "二级 3-2"
}
]
}
],
defaultProps: {
children: "children",
label: "label"
}
};
},
methods: {
tickMenuIdFilter: function() {
var resultArr = new Array();
var getTickMenuId = function(obj) {
if (undefined == obj || null == obj || !obj instanceof Object) {
return;
}
if (obj.fs > 0) {
// console.log('obj',obj)
obj.disabled = true;
resultArr.push(obj.id);
}
if (null != obj.children && obj.children instanceof Array) {
for (let child of obj.children) {
getTickMenuId(child);
}
}
}; return {
filter: function(arr) {
if (!arr instanceof Array) {
return false;
}
resultArr = new Array();
for (let rootMenu of arr) {
getTickMenuId(rootMenu);
}
return resultArr;
}
};
}
},
created() {
this.tickMenuIdFilter().filter(this.data2);
console.log("data2", this.data2[0].children[0]);
}
};
</script>
备注:也许代码冗余,但是效果亲测出来啦
element el-tree循环遍历树形结构,并动态赋值disabled属性的更多相关文章
- tree:以树形结构显示目录下的内容
tree命令 1.命令详解 [功能说明] tree命令的中文意思为“树”,功能是以树形结构列出指定目录下的所有内容包括所有文件.子目录及子目录里的目录和文件. [语法格式] tree [option] ...
- Linux/Ubuntu tree 命令以树形结构显示文件夹目录结构
1.安装命令工具 sudo apt-get -y install tree 2.可以查看关于tree命令的帮助信息 $ tree --help usage: tree [-adfghilnpqrstu ...
- 【转】linux tree命令以树形结构显示文件目录结构 ---- 不错
原文网址:http://jingyan.baidu.com/article/acf728fd19c7eff8e510a3eb.html 今天小编来给分享Linux 系统下一个非常有用的命令的使用:tr ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- SAP Tree editor(树形结构)
SAP List Tree 效果 源代码 *&---------------------------------------------------------------------* *& ...
- linux下怎么用tree命令以树形结构显示文件目录结构?
tree命令以树状图列出文件目录结构.不过某些Linux上(Centos 6.4)没有tree命令,本文将介绍安装方法. 常用参数: ? 1 2 3 4 5 6 tree -d 只显示目录. tr ...
- EasyUI使用tree方法生成树形结构加载两次的问题
html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...
- sql循环查询树形结构
pid:父类别id ' connect by prior pid = id --查询父祖类别 union ' connect by prior id = pid;--查询子孙类别 这样查询出选中id ...
- linux tree命令以树形结构显示文件目录结构
http://jingyan.baidu.com/article/acf728fd19c7eff8e510a3eb.html winscp 传递文件到ubuntu上用winscp
随机推荐
- spring的配置文件在web.xml中加载的方式
web.xml加载spring配置文件的方式主要依据该配置文件的名称和存放的位置不同来区别,目前主要有两种方式. 1.如果spring配置文件的名称为applicationContext.xml,并且 ...
- 使用LaTeX按IEEE模板写论文时的参考文献管理方法(BibTeX使用小结)
之前用LaTeX写论文时,参考文献都是手动添加管理的,真是让人很抓狂.所以这次趁着假期,简单看了一下怎么使用BibTeX对参考文献进行管理,这里以IEEE的最新模板为例. 首先说明,我之前用的是MiK ...
- sql server导入excel等数据
1.首先打开并登陆sql server数据库 2.选择要将表导入的数据库,右击选择任务-->导入数据 3.在弹出的窗口中选择下一步 4.在弹出的窗口中选择数据源,也就是从哪种文件导入,sql s ...
- JavaPersistenceWithMyBatis3笔记-第3章SQL Mappers Using XMLs-001
一. 1.Mapper 2.Service 3.Domain package com.mybatis3.domain; import java.io.Serializable; import java ...
- NDIS中间层驱动实现截获数据包、包过滤功能
1.包截获功能 http://wenku.baidu.com/view/43960751f01dc281e53af055.html 2.包过滤功能 http://wenku.baidu.com/lin ...
- Luogu 2151 [SDOI2009]HH去散步
BZOJ 1875 矩阵乘法加速递推. 如果不要求不能走同一条边,那么直接构造出矩阵快速幂即可,但是不走相同的道路,怎么办? 发现边数$m$也很小,我们直接把$2 * m$开成一个矩阵,相当于记录上一 ...
- CF438D The Child and Sequence
外国人的数据结构题真耿直 唯一有难度的操作就是区间取模,然而这个东西可以暴力弄一下,因为一个数$x$被取模不会超过$logn$次. 证明如下(假设$x Mod y$): 如果$y \leq \fr ...
- 4.传统的MVC
通过document view设计,我们把应用程序的状态(clicktimes)从一个简单的类设计中抽取出来.下一个目标是抽取转化主要的事件(这个例子里面是鼠标点击之后释放)为应用程序逻辑从而改变应用 ...
- boost库thread.hpp编译警告honored已修复
请浏览:https://svn.boost.org/trac/boost/ticket/7874 #7874: compile warning: thread.hpp:342: warning: ty ...
- Android的性能优化
ArrayList和Vector ArrayList和Vector都是内部以数组实现的List,它们两唯一的区别就是对多线程的支持,ArrayList是线程不安全的,而Vector内部对大多数方法都做 ...