菜单树

基于element el-tree树级层级结构的二次封装，该组件一般使用于管理系统的用户分配权限

安装

npm i @uone/u-menu-tree -S

基本使用

• UMenuTree已注册为vue插件

import UTree from '@uone/u-tree'
Vue.use(UTree)

<template>
  <div id="app">
    <u-tree 
      :data="sourceData"
      :optionsProps="defaultProps"
      :btnSource="true"
      :autoPid="false"
      nodeKey="code"
      :unExpand="true"
      @change="handleGetVal"/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
          defaultProps: {
            id: 'id',
            label: 'label',
            children: 'children',
            selected: 'selected'
          },
          sourceData: [{
            id: 1,
            label: '系统管理',
            selected: true,
            children: [{
              pid: 1,
              id: 3,
              label: '用户管理',
              selected: true,
              children: [{
                pid: 3,
                id: 5,
                label: '查询',
                children: [],
                selected: true,
              }, {
                pid: 3,
                id: 6,
                label: '新增',
                children: [],
                selected: false,
              }]
            }]
          }, {
            id: 2,
            label: '配置管理',
            selected: true,
            children: [{
              pid: 2,
              id: 4,
              label: '配置1',
              selected: false,
              children: [{
                pid: 4,
                id: 7,
                label: '查询',
                children: [],
                selected: true,
              }, {
                pid: 4,
                id: 8,
                label: '新增',
                children: [],
                selected: false,
              }],
            }]
          }],
      }
    },
    methods: {
        handleGetVal (val) {
          console.log(val, '点击节点获取到的节点编码数组')
        }
    }
  }
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | data | 初始数据 | Array | [] | -- | | optionsProps | 配置项，根据业务字段设置| Object| id: 'id',label: 'label',children: 'children',selected: 'selected'|--| | btnSource | 是否需要按钮权限，点击非查询按钮默认勾选上查询按钮| Boolean | false | true | | autoPid | 点击节点时 是否需要自动带出父级节点 | Boolean | false | true | | nodeKey | 树节点唯一标识 |String | id | ----- | | unExpand | 是否默认展开所有节点 | Boolean | false | true |

Event

|事件名|说明|回调参数| |:-------|:------|:-------| |change|点击节点菜单出发|val：当前选择的节点code|