在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue element el-tree defaultExpandedKeys

vue element el-tree defaultExpandedKeys 如何動態(tài)修改?

請問element-ui中的<el-tree>組件,default-checked-keys可通過setCheckedKeys來動態(tài)修改,但是屬性defaultExpandedKeys 沒有相應(yīng)函數(shù),請問如何動態(tài)修改?

回答
編輯回答
選擇

看源碼,以element-ui@1.4.10為例。

// '/packages/tree/src/tree.vue:103'
    watch: {
      // ...
      defaultExpandedKeys(newVal) {
        this.store.defaultExpandedKeys = newVal;
        this.store.setDefaultExpandedKeys(newVal);
      },
      // ...
    },

// '/packages/tree/src/tree.vue:255'
  setDefaultExpandedKeys(keys) {
    keys = keys || [];
    this.defaultExpandedKeys = keys;

    keys.forEach((key) => {
      const node = this.getNode(key);
      if (node) node.expand(null, this.autoExpandParent);
    });
  }

從這里可以看出,default-expanded-keys有監(jiān)聽,也就是說可以直接修改其值,如下:

tree.defaultExpandedKeys = [Math.round(Math.random() * 7)];

但這么做會有如下警告,意思是不應(yīng)該這樣做,應(yīng)該采用雙向綁定即:v-bind的方式(即為用data或computed綁定變量到屬性,不贅述)

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "defaultExpandedKeys"

如果使用函數(shù)的方式,則如下:

tree.store.setDefaultExpandedKeys([Math.round(Math.random() * 7)]); // 隨機數(shù)僅用于示例

成功展開節(jié)點,但這里還有個問題,該方法沒有處理需要收起的節(jié)點。

繼續(xù)查看源碼:

// '/packages/tree/src/model/node.js:280'
  collapse() {
    this.expanded = false;
  }

發(fā)現(xiàn)tree和tree-store都沒有提供收起節(jié)點的方法,node的收起方法也就是修改了這個屬性……

那么這就有點尷尬了,在調(diào)用setDefaultExpandedKeys方法之前,你可能需要自己去遍歷子節(jié)點先收起所有的子節(jié)點……

或者,你也可以fork一下然后完善了提個pr,為開源社區(qū)做貢獻啊~

這里是我測試用的示例

2017年9月11日 18:18