# DgMenu 左侧菜单

> 基于 elementUi 封装集成度更高的菜单组件，实现 ApiCode 对接后台数据，并能将数据循环成父子结构。

::: demo 组件 Menu 使用示例

```vue
<template>
  <dg-menu
    ref="dgMenu"
    apiCode="sysDictTree"
    root="PROC_TOPICAL"
    @select="changeTab"
    titleStyle="padding: 14px;margin: 0px;font: 12px PingFangSC-Medium,PingFangSC bold;color:rgba(192,196,204,1);"
    keyField="ROWCODE"
    pkeyField="PARENTCODE"
    titleField="ROWNAME"
    routeField="ROWCODE"
  >
  </dg-menu>
</template>
<script>
export default {
  name: 'MenuDemo',
  data() {
    return {}
  },
  methods: {
    changeTab(treeNode) {
      this.treeNode = treeNode
      console.log(this.treeNode)
    },
  },
}
</script>
```

:::
`

## API

| 属性            | 说明                                         |   类型    |   默认值   | 可选值 |
| --------------- | -------------------------------------------- | :-------: | :--------: | :----: |
| apiCode         | 数据库对应 apiCode                           | `String`  |     -      |
| menuListData    | 父子结构的数据,传入就不需要传 apiCode 取数据 |  `Array`  |     -      |
| resRootData     | 根级节点数据                                 |  `Array`  |     -      |
| collapse        | 是否水平折叠收起菜单                         | `Boolean` |  `false`   |
| backgroundColor | 菜单的背景色（仅支持 hex 格式）              | `String`  | ` #ffffff` |
| textColor       | 菜单的文字颜色（仅支持 hex 格式）            | `String`  | `#303133`  |
| root            | 取数据时的过滤条件                           | `String`  |     -      |
| rootVal         | 是否显示根节点                               | `Boolean` |  `false`   |
| titleStyle      | 菜单顶部标题的内联样式                       | `String`  |     -      |
| keyField        | 节点对应的 code 值在数据库中的字段名         | `String`  |     -      |
| pkeyField       | 节点对应的父级 code 值在数据库中的字段名字   | `String`  |     -      |
| titleField      | 节点对应的标题在数据库中对应的字段名         | `String`  |     -      |
| routeField      | 节点需要跳转的 url 在数据库中对应的字段名    | `String`  |     -      |

## Events

| 事件名称 | 说明             |    回调参数    |
| -------- | ---------------- | :------------: |
| select   | 选择节点触发事件 | node：节点对象 |

## 更新日志

#### v1.0.0（2019-09-17）

- 初始版本

#### v1.0.8（2019-09-19）

- [优化] 增删改查的封装

#### v1.0.8（2019-03-07）

- 完善文档