element el-tree循環遍歷樹形結構,並動態賦值disabled屬性
阿新 • • 發佈:2018-11-24
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屬性