| | |
| | | <h4>{{item.title}}</h4> |
| | | <!-- 子菜单 --> |
| | | <ul class="menu"> |
| | | <li class="menuItem" v-for="(son,sonIndex) in item.children" @click.stop="getContent(index,sonIndex)"> |
| | | <li class="menuItem" v-for="(son,sonIndex) in item.children" |
| | | @click.stop="getContent(index,sonIndex)"> |
| | | <span>{{son.title}}</span> |
| | | </li> |
| | | </ul> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | menuList:[], |
| | | article:[], |
| | | menuList: [], |
| | | article: [], |
| | | } |
| | | }, |
| | | created(){ |
| | | created() { |
| | | const { getMenuList } = this; |
| | | getMenuList(); |
| | | }, |
| | | methods:{ |
| | | methods: { |
| | | // 获取菜单列表 |
| | | getMenuList(){ |
| | | this.$axios.get('sccg/menu/treeList').then(res=>{ |
| | | console.log(res); |
| | | const {data} = res; |
| | | this.menuList = data; |
| | | this.getContent(0); |
| | | }) |
| | | getMenuList() { |
| | | // this.$axios({ |
| | | // method: 'get', |
| | | // url: 'sccg/system/portal/menu/search', |
| | | // data: { |
| | | // current: 1, |
| | | // size: 10, |
| | | // } |
| | | // }).then(res => { |
| | | // console.log(res); |
| | | // const { data } = res; |
| | | // this.menuList = data; |
| | | // this.getContent(0); |
| | | // }) |
| | | }, |
| | | // 切换菜单内容展示 |
| | | getContent(index,sonIndex=null){ |
| | | if(sonIndex===null){ |
| | | getContent(index, sonIndex = null) { |
| | | if (sonIndex === null) { |
| | | this.article = this.menuList[index]; |
| | | return; |
| | | } |
| | |
| | | border: 1px solid #fff; |
| | | padding: 20px; |
| | | height: calc(100vh - 120px); |
| | | |
| | | .asideItem { |
| | | h4 { |
| | | line-height: 40px; |
| | |
| | | .content { |
| | | flex: 1; |
| | | margin-left: 100px; |
| | | |
| | | h4 { |
| | | margin: 0; |
| | | line-height: 80px; |
| | |
| | | .editItem { |
| | | line-height: 40px; |
| | | display: flex; |
| | | span{ |
| | | |
| | | span { |
| | | margin-left: 10px; |
| | | } |
| | | } |