vue html模板递归,vue+elementUI 做的递归组件

废话少说，直接上最新鲜的干货

当然，你得提前安装好bootstrap，router，element-ui，vue-axios

1.上递归组件，此处参考了某位大神的代码，具体不知道是谁，因为到处都有人用

v-if='menu.children.length>0'

:index='menu.name'

:key="menu.id"

>

{{menu.name}}

v-else

:index='menu.url'

:key='menu.id'

>

{{menu.name}}

export default {

name: "MenuTree",

props: {

menuList: {

type: Array,

required: false

}

}

}

2.子组件菜单(Menus)

router

mode="vertical"

background-color="#551A8B"

text-color="#FFFFFF"

active-text-color="#409EFF"

v-if="menuList"

>

import MenuTree from "./MenuTree";

export default {

name:'Menus',

components: {

MenuTree,

},

props:{

menuList: {

type: Array,

required: false

}

}

}

a {

display: inline-block;

width: 100%;

overflow: hidden;

}

.el-menu {

border: none;

height: 100%;

width: 100% !important;

}

.is-active > .el-submenu__title{

color: #f4f4f5!important;

}

3.父组件(App.Vue)引用

XXXXXX

import Menus from "./views/Menus";

export default {

name: 'app',

components: {

Menus,

},

props: {

menuList: {

type: Array,

required: false

}

},

mounted(){

this.axios.get('/menu/list')

.then(resp => {

this.menuList = resp.data.menuList;

})

}

}

.el-header {

background-color: #0000AA;

color: #ffffff;

line-height: 60px;

font-size: 28px;

}

.el-aside {

background-color: #e3e3e3;

width: 200px !important;

}

body .el-table th.gutter{

display: table-cell!important;

}

body .el-table colgroup.gutter {

display: table-cell !important;

}

4.总结

递归组件得重中之重，父组件与子组件、递归组件中都有共同的props，传值的过程：父组件menuList --> 菜单组件menuList --> 递归组件使用menuList

vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。

vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

用HTML，Vue+element-UI做桌面UI

DSkin封装的WebUI开发模式开发桌面应用,使用Vue很方便.使用起来有点像WPF 下面用 element-UI 做个简单的例子. 运行效果:可以自己根据需求改布局效果. 主框架的element- ...

vue.js 树菜单 递归组件树来实现

树形视图 Example: https://vuefe.cn/v2/examples/tree-view.html 参照前辈方法实现的,觉得不错,记录一下: 父组件: