vue element 树形图回显

<div class="roleList">

        <el-tree

          ref="tree"

          :data="accessList"

          show-checkbox

          node-key="menuKey"

          highlight-current

          :props="defaultProps"

          :default-expanded-keys="checkedOpen"  //回显展开数组

          :default-checked-keys="checkedId"    //回显数组

          @check-change="handleCheckChange"

        >

          <!-- :default-expand-all="true" -->

        </el-tree>

 

data里面

 checkedId: [],

      checkedOpen: [],

accessList ：[]

 methods: {

递归树

    funTree(listTree) {

      listTree.forEach(item => {

        if (item.isChecked) {

          this.checkedId.push(item.menuKey)

          this.checkedOpen.push(item.menuKey)

        }

        if (item.children && item.children.length) {

          this.funTree(item.children)

        }

      })

    },

初始化调用

    query() {

      this.$http.get(`${api.GetRoleMenus}?roleId=${this.id}`).then(res => {

        if (res.code === 200) {

          this.accessList = res.data

          this.funTree(this.accessList)

        }

      })

    },

}