diff --git a/web-react/src/assets/style/lib/table.less b/web-react/src/assets/style/lib/table.less
index 6d9e08d..2094f66 100644
--- a/web-react/src/assets/style/lib/table.less
+++ b/web-react/src/assets/style/lib/table.less
@@ -1,190 +1,214 @@
 @import (reference) '../extend.less';
 
 .yo-query-bar {
-  margin-bottom: @padding-md;
+    margin-bottom: @padding-md;
 }
 
 .yo-action-bar {
-  display: flex;
-  justify-content: space-between;
+    display: flex;
+    justify-content: space-between;
 
-  margin-bottom: @padding-md;
+    margin-bottom: @padding-md;
 
-  &--actions {
-
-    >.ant-btn,
-    >.ant-btn-group {
-
-      +.ant-btn,
-      +.ant-btn-group {
-        margin-left: @padding-xs;
-      }
+    &--actions {
+        > .ant-btn,
+        > .ant-btn-group {
+            + .ant-btn,
+            + .ant-btn-group {
+                margin-left: @padding-xs;
+            }
+        }
     }
-  }
 }
 
 .ant-table-thead {
-  th.ant-table-column-has-sorters {
-    &:hover {
-      background-color: darken(@background-color-base, 5%);
+    th.ant-table-column-has-sorters {
+        &:hover {
+            background-color: darken(@background-color-base, 5%);
+        }
     }
-  }
 }
 
 .ant-table-tbody {
-  >tr {
-    >td {
-      transition-property: background, border-bottom-color;
+    > tr {
+        > td {
+            transition-property: background, border-bottom-color;
+        }
     }
-  }
 
-  >tr.ant-table-row:hover {
-    >td {
-      border-bottom-color: lighten(@primary-color, 30%);
+    > tr.ant-table-row:hover {
+        > td {
+            border-bottom-color: lighten(@primary-color, 30%);
+        }
     }
-  }
 }
 
 .ant-table-small {
-  >.ant-table-content {
-    >.ant-table-body {
-      margin: 0;
+    > .ant-table-content {
+        > .ant-table-body {
+            margin: 0;
 
-      >table {
-        >.ant-table-thead {
-          >tr {
-            >th {
-              background-color: @table-selected-row-bg;
+            > table {
+                > .ant-table-thead {
+                    > tr {
+                        > th {
+                            background-color: @table-selected-row-bg;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 
 .ant-table-thead {
-  >tr {
-    >th {
-      font-weight: bold;
+    > tr {
+        > th {
+            font-weight: bold;
+        }
     }
-  }
 }
 
 .yo-table {
-  .ant-table {
-    margin: 0 !important;
-  }
-
-  .border-right-none() {
-    border-right-width: 0 !important;
-
-    &:last-child {
-      border-right-width: 1px !important;
+    .ant-table {
+        margin: 0 !important;
     }
-  }
 
-  .ant-table-content {
-    .ant-table-body {
-      overflow-x: auto !important;
+    .border-right-none() {
+        border-right-width: 0 !important;
 
-      >table {
-        >.ant-table-thead {
-          >tr {
-            >th {
-              .border-right-none();
+        &:last-child {
+            border-right-width: 1px !important;
+        }
+    }
+
+    .ant-table-content {
+        .ant-table-body {
+            overflow-x: auto !important;
+
+            > table {
+                > .ant-table-thead {
+                    > tr {
+                        > th {
+                            .border-right-none();
+                        }
+                    }
+                }
+
+                > .ant-table-tbody {
+                    > tr {
+                        > td {
+                            .border-right-none();
+                        }
+                    }
+                }
             }
-          }
         }
 
-        >.ant-table-tbody {
-          >tr {
-            >td {
-              .border-right-none();
+        .ant-table-fixed-left {
+            .ant-table-thead {
+                > tr {
+                    > th {
+                        border-right-width: 0 !important;
+                    }
+                }
+            }
+
+            .ant-table-tbody {
+                > tr {
+                    > td {
+                        border-right-width: 0 !important;
+                    }
+                }
+            }
+        }
+
+        .ant-table-fixed-right {
+            .ant-table-fixed {
+                border-left-width: 0 !important;
+            }
+
+            .ant-table-thead {
+                > tr {
+                    > th {
+                        .border-right-none();
+                    }
+                }
+            }
+
+            .ant-table-tbody {
+                > tr {
+                    > td {
+                        .border-right-none();
+                    }
+                }
             }
-          }
         }
-      }
     }
 
-    .ant-table-fixed-left {
-      .ant-table-thead {
-        >tr {
-          >th {
-            border-right-width: 0 !important;
-          }
+    .ant-table-bordered {
+        > .ant-table-container {
+            border-top: @border-width-base @border-style-base @table-border-color;
         }
-      }
-
-      .ant-table-tbody {
-        >tr {
-          >td {
-            border-right-width: 0 !important;
-          }
-        }
-      }
     }
-
-    .ant-table-fixed-right {
-      .ant-table-fixed {
-        border-left-width: 0 !important;
-      }
-
-      .ant-table-thead {
-        >tr {
-          >th {
-            .border-right-none();
-          }
-        }
-      }
-
-      .ant-table-tbody {
-        >tr {
-          >td {
-            .border-right-none();
-          }
-        }
-      }
-    }
-  }
-
-  .ant-table-bordered {
-    >.ant-table-container {
-      border-top: @border-width-base @border-style-base @table-border-color;
-    }
-  }
 }
 
 .yo-table-actions {
-  display: inline-block;
+    display: inline-block;
 
-  vertical-align: middle;
+    vertical-align: middle;
 
-  &--inner {
-    display: flex;
-    align-items: center;
+    &--inner {
+        display: flex;
+        align-items: center;
 
-    height: 18px;
-
-  }
+        height: 18px;
+    }
 }
 
 .yo-table--column-setting {
-  width: 240px;
+    width: 240px;
 
-  .ant-dropdown-menu-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+    .ant-dropdown-menu-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 
-  .anticon-pushpin {
-    color: darken(@white, 40%);
-    transition: @animation-duration-slow;
-    transform: rotate(45deg);
-  }
+    .anticon-pushpin {
+        color: darken(@white, 40%);
+        transition: @animation-duration-slow;
+        transform: rotate(45deg);
+    }
 
-  .yo-table--fixed {
-    transform: rotate(-45deg);
-  }
-}
\ No newline at end of file
+    .yo-table--fixed {
+        transform: rotate(-45deg);
+    }
+}
+
+.yo-inner-table {
+    .ant-table {
+        .ant-table-tbody {
+            > .ant-table-expanded-row-level-1 > td {
+                padding: 0;
+                border-right: none !important;
+                .ant-table-wrapper {
+                    border: none;
+                    .ant-table {
+                        margin: 0 !important;
+                    }
+                    .ant-table-container {
+                        border: none;
+                        .ant-table-cell:first-child {
+                            padding-left: 25px;
+                        }
+                        .ant-table-expanded-row-level-1 > td {
+                            border-right: @border-width-base @border-style-base @table-border-color !important;
+                            padding: @padding-sm @padding-xs @padding-sm @padding-xl;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/web-react/src/pages/system/menu/index.jsx b/web-react/src/pages/system/menu/index.jsx
index bcde83a..c4f44d8 100644
--- a/web-react/src/pages/system/menu/index.jsx
+++ b/web-react/src/pages/system/menu/index.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Card, Form, Input, Popconfirm, message as Message } from 'antd'
+import { Button, Table, Card, Form, Input, Popconfirm, message as Message, Tag } from 'antd'
 import { isEqual } from 'lodash'
 import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
 import { api } from 'common/api'
@@ -13,19 +13,18 @@ const apiAction = {
     page: api.getMenuList,
     add: api.sysMenuAdd,
     edit: api.sysMenuEdit,
-    delete: api.sysMenuDelete
+    delete: api.sysMenuDelete,
 }
 
 // 用于弹窗标题
 const name = '菜单'
 
 export default class index extends Component {
-
     state = {
         codes: {
             menuType: [],
-            menuWeight: []
-        }
+            menuWeight: [],
+        },
     }
 
     // 表格实例
@@ -53,7 +52,7 @@ export default class index extends Component {
             title: '图标',
             width: 100,
             dataIndex: 'icon',
-            render: text => text && <AntIcon type={text} />
+            render: text => text && <AntIcon type={text} />,
         },
         {
             title: '前端组件',
@@ -71,12 +70,12 @@ export default class index extends Component {
             title: '排序',
             width: 100,
             dataIndex: 'sort',
-        }
+        },
     ]
 
     /**
      * 构造函数,在渲染前动态添加操作字段等
-     * @param {*} props 
+     * @param {*} props
      */
     constructor(props) {
         super(props)
@@ -88,26 +87,29 @@ export default class index extends Component {
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
-                    {
-                        record.type < 2 &&
-                        <Auth auth="sysMenu:add">
-                            <a onClick={() => this.onOpen(this.addForm, record, true)}>新增子菜单</a>
+                render: (text, record) => (
+                    <QueryTableActions>
+                        {record.type < 2 && (
+                            <Auth auth="sysMenu:add">
+                                <a onClick={() => this.onOpen(this.addForm, record, true)}>
+                                    新增子菜单
+                                </a>
+                            </Auth>
+                        )}
+                        <Auth auth="sysMenu:edit">
+                            <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
                         </Auth>
-                    }
-                    <Auth auth="sysMenu:edit">
-                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
-                    </Auth>
-                    <Auth auth="sysMenu:delete">
-                        <Popconfirm
-                            placement="topRight"
-                            title="是否确认删除"
-                            onConfirm={() => this.onDelete(record)}
-                        >
-                            <a>删除</a>
-                        </Popconfirm>
-                    </Auth>
-                </QueryTableActions>)
+                        <Auth auth="sysMenu:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -116,9 +118,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -131,40 +133,62 @@ export default class index extends Component {
     componentDidMount() {
         this.table.current.onLoading()
         getDictData('menu_type', 'menu_weight').then(res => {
-            this.setState({
-                codes: res
-            }, () => {
-                this.table.current.onLoadData()
-            })
+            this.setState(
+                {
+                    codes: res,
+                },
+                () => {
+                    this.table.current.onLoadData()
+                }
+            )
         })
     }
 
     /**
      * 调用加载数据接口,可在调用前对query进行处理
      * [异步,必要]
-     * @param {*} params 
-     * @param {*} query 
-     * @returns 
+     * @param {*} params
+     * @param {*} query
+     * @returns
      */
     loadData = async (params, query) => {
         const { data } = await apiAction.page({
             ...params,
             ...query,
         })
+        return this.onfilterdata(data)
+        //return data
+    }
+
+    onfilterdata(data) {
+        this.findlastChildren(data)
         return data
     }
+    findlastChildren(data) {
+        data.forEach(s => {
+            if (s.children && s.children.length > 0) {
+                s.rowExpandable = true
+                s.children.forEach(p => {
+                    if (p.children && p.children.length === 0) {
+                        p.rowExpandable = false
+                    }
+                })
+                this.findlastChildren(s.children)
+            }
+        })
+    }
 
     /**
      * 绑定字典数据
-     * @param {*} code 
-     * @param {*} name 
-     * @returns 
+     * @param {*} code
+     * @param {*} name
+     * @returns
      */
     bindCodeValue(code, name) {
         name = toCamelCase(name)
         const codes = this.state.codes[name]
         if (codes) {
-            const c = codes.find((p) => p.code === code)
+            const c = codes.find(p => p.code === code)
             if (c) {
                 return c.value
             }
@@ -174,17 +198,19 @@ export default class index extends Component {
 
     /**
      * 打开新增/编辑弹窗
-     * @param {*} modal 
-     * @param {*} record 
+     * @param {*} modal
+     * @param {*} record
      */
     onOpen(modal, record, isParent = false) {
-        const params = isParent ? {
-            parent: record,
-            isParent
-        } : {
-            record,
-            isParent
-        }
+        const params = isParent
+            ? {
+                  parent: record,
+                  isParent,
+              }
+            : {
+                  record,
+                  isParent,
+              }
 
         modal.current.open(params)
     }
@@ -192,8 +218,8 @@ export default class index extends Component {
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         this.table.current.onLoading()
@@ -208,21 +234,69 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(apiAction.delete(record), '删除成功')
+    }
+
+    /**
+     * 绘制新的扩展行
+     * @param {*} record
+     */
+    onRowRender(record) {
+        var arr = []
+        var istag = false
+        record.children.map(s => {
+            if (!s.rowExpandable && s.type == 2) {
+                istag = true
+                var temp = (
+                    <Tag color="#87d068" key={s.id}>
+                        {s.name} |{' '}
+                        <Auth auth="sysMenu:edit">
+                            <a onClick={() => this.onOpen(this.editForm, s)}>编辑</a>
+                        </Auth>{' '}
+                        |{' '}
+                        <Auth auth="sysMenu:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(s)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </Tag>
+                )
+                arr.push(temp)
+            } else if (s.rowExpandable || (!s.rowExpandable && s.type == 1)) {
+                arr.push(s)
+            }
+        })
+        if (istag) {
+            return arr
+        } else {
+            return (
+                <Table
+                    columns={this.columns}
+                    showHeader={false}
+                    dataSource={arr}
+                    rowKey={record => record.id}
+                    expandable={{
+                        expandedRowRender: record => this.onRowRender(record),
+                        rowExpandable: record => record.rowExpandable === true,
+                    }}
+                    childrenColumnName="11"
+                    bordered={true}
+                    pagination={false}
+                />
+            )
+        }
     }
 
     //#region 自定义方法
     async onSetDefault(record) {
-        this.onAction(
-            apiAction.setDefault(record),
-            '设置成功'
-        )
+        this.onAction(apiAction.setDefault(record), '设置成功')
     }
     //#endregion
 
@@ -232,16 +306,24 @@ export default class index extends Component {
                 <br />
                 <Card bordered={false}>
                     <QueryTable
+                        className="yo-inner-table"
+                        childrenColumnName="111"
                         ref={this.table}
                         autoLoad={false}
                         loadData={this.loadData}
                         columns={this.columns}
+                        expandable={{
+                            expandedRowRender: record => this.onRowRender(record),
+                            rowExpandable: record => record.rowExpandable === true,
+                        }}
                         operator={
                             <Auth auth="sysMenu:add">
                                 <Button
                                     icon={<AntIcon type="plus" />}
                                     onClick={() => this.onOpen(this.addForm)}
-                                >新增{name}</Button>
+                                >
+                                    新增{name}
+                                </Button>
                             </Auth>
                         }
                     />