1. 程式人生 > >element el-tree循環遍歷樹形結構,並動態賦值disabled屬性

element el-tree循環遍歷樹形結構,並動態賦值disabled屬性

lse form 遍歷樹 alt fin img all uid 2-2

淩晨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屬性