vue通过component组件实现无限嵌套菜单编辑新增删除功能代码-html代码-BFW代码库

vue通过component组件实现无限嵌套菜单编辑新增删除功能代码

代码语言：html

所属分类：其他

代码描述：vue通过component组件实现无限嵌套菜单编辑新增删除功能代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div id="app" v-cloak>
        <!-- 树状菜单 -->
        <div>
            <div class="l_tree_container">
                <ew-tree :model="testdata"></ew-tree>
            </div>
        </div>

        <div @click="getdata">提交</div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
    <script type="text/javascript">
        //树组件
        	Vue.component('ew-tree', {
        		template: `
        		<ul class="l_tree">
        			<li class="l_tree_branch" v-for="item in model" :key="item.id">
        				<div class="l_tree_click">
        					<button type="button" class="l_tree_children_btn" v-if="item.children"  @click="toggle(item)">{{ !item.show ? '-' : '+' }}</button>
        					<span class="l_folder">{{ item.name }}</span>
        					<button type="button" class="fa  fa-edit" @click="edit(item)"></button>
        					<button type="button" class="fa fa-trash" @click="remove(item)"></button>
        					
        						<button type="button" class="fa fa-plus-circle" @click="add(item)"></button>
        				</div>
        				<ew-tree v-show="!item.show" v-if="item.children" :model="item.children"></ew-tree>
        			</li>
        		</ul>`,
        		props: {
        			model: {}
        		},
        		methods: {
        			toggle: function (item) {
        				var idx = this.model.indexOf(item)
        				Vue.set(this.model[idx], 'show', !item.show)
        			},
        			edit: function (item) {
        				// 编辑功能代码
        				console.log('编辑 ' + item.name);
        					var idx = this.model.indexOf(item)
        					 var inp.........完整代码请登录后点击上方下载按钮下载查看