iview tree组件 vue版下拉树，菜单权限树

 <FormItem label="菜单权限" label-position="top" prop="menuIds">
     <div style="display:inline-block;width:100%;">
       <Tree :data="menuItems" ref="tree" show-checkbox multiple></Tree>
     </div>
 </FormItem>

 import { treeDataTranslate } from '@/utils'

  data:    menuChecked: [], menuItems: [], allMenu: [] // 所有数组
  

  initMenu() {
      var _this = this
      this.allMenu = []
      this.menuItems = []
      initMenuList(this.searchParams).then(({ data }) => {
        var value = data.data
        if (value.length !== undefined) {
          for (var i = 0; i < value.length; i++) {
            if(this.isSee){  //  查看详情的时候展开下拉树
               _this.allMenu.push({
                menuId: value[i].menuId,
                title: value[i].name,
                parentId: value[i].parentId,
                checked: false,
                disabled: this.isSee === true,
                expand: this.isSee === true
              })
            }else{
               _this.allMenu.push({
                menuId: value[i].menuId,
                title: value[i].name,
                parentId: value[i].parentId,
                checked: false
              })
            }
          }
          if (this.isOperate) {
            // 获取本角色选中的值
            initMenuTreeByRoleId({ id: this.detailsId }).then(res => {
              if (res.data.data.length > 0) {
                this.menuChecked = res.data.data
                if (this.allMenu.length > 0) {
                  if (_this.menuChecked.length > 0) {
                    for (var i = 0; i < this.allMenu.length; i++) {
                      for (var k = 0; k < this.menuChecked.length; k++) {
                        if (this.allMenu[i].menuId === _this.menuChecked[k].menuId && _this.menuChecked[k].type !== 0) {
                          this.allMenu[i].checked = true
                        }
                      }
                    }
                  }
                }
              }
            })
          } else {
            this.formData = FormDataInfo()
          }
          this.menuItems = treeDataTranslate(this.allMenu, 'menuId')
          this.$forceUpdate()
        }
      }).catch(() => {
        this.loading = false
      })
    },

utils树形转换



/**
 * 树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */

export function treeDataTranslate(data, id = 'id', pid = 'parentId') {
  var res = []
  var temp = {}
  for (var i = 0; i < data.length; i++) {
    data[i].id = data[i][id]
    temp[data[i][id]] = data[i]
  }
  for (var k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]]['children']) {
        temp[data[k][pid]]['children'] = []
        temp[data[k][pid]]['list'] = []
      }
      if (!temp[data[k][pid]]['_level']) {
        temp[data[k][pid]]['_level'] = 1
      }
      data[k]['_level'] = temp[data[k][pid]]._level + 1
      temp[data[k][pid]]['children'].push(data[k])
      // 判断三级菜单子级，根据数据里的type值做显隐判断
      if (temp[data[k][pid]].type !== 1) {
        temp[data[k][pid]]['list'].push(data[k])
      }
    } else {
      res.push(data[k])
    }
  }
  return res
}