iview treeコンポーネントchecked,expand,indeterminate値がレンダリングされない問題の修正

6730 ワード

最初のtree型データを構築する際にcheckなど3つの値を付与していませんでしたが、tree型データを取得したときに付与しようと思ったので、最初のツリー構造の場合↓
 let obj = {
                title: '',
                MENU_ID: '',
                children: [{
                title: '',
                MENU_ID: '',
                children: []
                }]
            }
          

その後、データを取得してtreeを描画するときにcheckなどに値を付与するとクリックチェックが表示されますが、treeがレンダリングされないという問題があります.親のexpandをクリックして、オフにしてからレンダリングに成功します↓以下はtree付与です
 tree.forEach((el, index) => {
                tree[index].checked = false
                tree[index].indeterminate = false
                tree[index].expand = false
                if (el.children) {
                    this.checkTree(el.children, data)
                } else {
                    data.forEach(item => {
                        if (el.MENU_ID === item.MENU_ID) {
                            tree[index].checked = true
                        }
                    })
                }
            });

解決策は、treeを最初に描画したときにcheckなどの属性を追加するか(↓コード参照)、データを取得してcheck属性を付与するときにオブジェクトのsetメソッドを使用して付与するか、原理はあまり言わないが、興味のあるオブジェクトのsetメソッドを参照することができる
let obj = {
                title: '',
                checked:false,
                indeterminate:false,
                expand: false,
                MENU_ID: '',
                children: [ {
                title: '',
                checked:false,
                indeterminate:false,
                expand: false,
                MENU_ID: '',
                children: []
            }]
            }