1. 程式人生 > 實用技巧 >a-tree傳送父id及回顯後父id的子節點會全選中,預設展開等問題的解決辦法

a-tree傳送父id及回顯後父id的子節點會全選中,預設展開等問題的解決辦法



        <a-tree
v-model="checkedKeys"
:replaceFields="replaceFields"
checkable
:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
:selected-keys="selectedKeys"
:tree-data="menuTreeData"
@expand="onExpand"
@select="onSelect"
@check="onCheck"
ref="tree"
methods: {



    onExpand(expandedKeys) {
      
this.expandedKeys = expandedKeys this.autoExpandParent = false }, onCheck(checkedKeys, info) { this.parentNode = info.halfCheckedKeys this.menuids = checkedKeys this.checkedKeys = checkedKeys }, onSelect(selectedKeys, info) { this.selectedKeys = selectedKeys }
//地獄回撥
    getTreeChildren(data) {
      data &&
        data.map((item) => {
          if (item.children && item.children.length > 0) {
            this.getTreeChildren(item.children)
            // console.log("這些是父")
          } else {
            // console.log("這些是子")
            this
.newArr.push(item.menuId) } return null }) return this.newArr }, edit(record) { getRole(pick(record, ['roleId'])).then((res) => { this.subsystemId = res.rows[0].subsystemId this.checkedKeys = res.rows[0].menuIds // this.checkedKeys = res的減去parent的 得出[子id] let params = {} params.subsystemId = this.subsystemId getListsubsystom(params.subsystemId).then((res) => { this.menuTreeData = res.data var str = this.getTreeChildren(this.menuTreeData) var arr=[] for (var i = 0; i < this.checkedKeys.length; i++) { var found = str.indexOf(this.checkedKeys[i]) console.log(found) if(found!=-1){ arr.push(this.checkedKeys[i]) } } this.expandedKeys=arr this.autoExpandParent = true this.checkedKeys=arr }) }) }

第一段第二段相信大家可以看懂,第三段程式碼是我根據

params.subsystemId

請求的資料,然後對資料進行了地獄回撥,把id全拿出來,判斷它的children,沒有的話全拿出來,這些就是子節點,然後用這些子節點去查詢請求過來的那幾個id,找到了就push到陣列中,這個陣列賦值給checkedKeys這個就好了,

this.expandedKeys=arr這是用來控制初始預設展開的資料
this.autoExpandParent = true使用開解決預設展開的資料不能關閉的問題