凌晨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属性的更多相关文章

  1. tree:以树形结构显示目录下的内容

    tree命令 1.命令详解 [功能说明] tree命令的中文意思为“树”,功能是以树形结构列出指定目录下的所有内容包括所有文件.子目录及子目录里的目录和文件. [语法格式] tree [option] ...

  2. Linux/Ubuntu tree 命令以树形结构显示文件夹目录结构

    1.安装命令工具 sudo apt-get -y install tree 2.可以查看关于tree命令的帮助信息 $ tree --help usage: tree [-adfghilnpqrstu ...

  3. 【转】linux tree命令以树形结构显示文件目录结构 ---- 不错

    原文网址:http://jingyan.baidu.com/article/acf728fd19c7eff8e510a3eb.html 今天小编来给分享Linux 系统下一个非常有用的命令的使用:tr ...

  4. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  5. SAP Tree editor(树形结构)

    SAP List Tree 效果 源代码 *&---------------------------------------------------------------------* *& ...

  6. linux下怎么用tree命令以树形结构显示文件目录结构?

    tree命令以树状图列出文件目录结构.不过某些Linux上(Centos 6.4)没有tree命令,本文将介绍安装方法. 常用参数: ? 1 2 3 4 5 6 tree -d 只显示目录.   tr ...

  7. EasyUI使用tree方法生成树形结构加载两次的问题

    html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...

  8. sql循环查询树形结构

    pid:父类别id ' connect by prior pid = id --查询父祖类别 union ' connect by prior id = pid;--查询子孙类别 这样查询出选中id ...

  9. linux tree命令以树形结构显示文件目录结构

    http://jingyan.baidu.com/article/acf728fd19c7eff8e510a3eb.html  winscp  传递文件到ubuntu上用winscp

随机推荐

  1. 问题:oracle long 与 clob;结果:long类型比clob到底差在什么地方?

    long类型比clob到底差在什经常看到9i以上的文档,说以后 clob会逐步取代long,一直想不出, 而我在8.1.7上也测试2个字段好像 在存储上也看不出什么区别?么地方? 差别还是很大的, 比 ...

  2. struts1-mapping.getInputForward()与mapping.getInput

    转自:https://www.cnblogs.com/azai/archive/2010/06/05/1752416.html 奇怪为什么登陆失败的时候 没有错误提示.这个问题困扰了N久 仔细看了下, ...

  3. Navicat断网时连不上数据库

    最近安装了破解的Navicat,在有网的条件下可以连接本地安装的MySQL数据库,但断网之后就不可以,如下: 于是上网查资料,发现原因为: localhost可以看成是一个域名,在一大部分情况下,它能 ...

  4. 学习计划Python-转载

    作者:闲谈后链接:https://www.zhihu.com/question/29775447/answer/145395619来源:知乎著作权归作者所有,转载请联系作者获得授权. 不过需要说明的是 ...

  5. 【271】IDL-ENVI二次开发

    参考:String Processing Routines —— 字符串处理函数 01   STRING 返回字符串. 02   STRCMP 比较字符串,一样返回1,不一样返回0,默认大小写敏感. ...

  6. Python之list的创建以及使用

    list是一种有序的集合,可以随意添加和删除里面的元素. 空的list的定义:L = [] list当中的元素用[]概括起来. 在list当中可以使用索引来进行访问: 在这里我们要注意我们在进行索引的 ...

  7. js原型及原型链

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  8. LPNMITEMACTIVATE pNMItemActivate = reinterpret_cast<LPNMITEMACTIVATE>(pNMHDR);

    reinterpret_cast代表强制转化,即把pNMHDR强制转化成LPNMITEMACTIVATE类型的. reinterpret_cast<type-id> (expression ...

  9. 1.Basic Layouts

    使用过mfc编程,就知道控件需要自己拖放.当一个界面有很多小控件时,摆放这些控件特别麻烦. 但是qt编程中有布局(Layout),让系统来摆放控件.使整个控件有一致的外观和感觉,特别方便. 1.水平方 ...

  10. Python字典内置方法

    Python字典包含了以下内置方法: 序号 函数及描述 1 radiansdict.clear()删除字典内所有元素 2 radiansdict.copy()返回一个字典的浅复制 3 radiansd ...