详解Vue2 无限级分类(添加,删除,修改)
更新时间：2017年03月07日 16:06:48 作者：木子炜培先生
本篇文章主要介绍了详解Vue2 无限级分类(添加,删除,修改) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考。希望此文章对各位有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 树</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
a{color: #333; text-decoration: none;}
ul{padding-left: 15px;}
</style>
</head>
<body>
<div id="app">
{{items}}
<treelist v-for="(val, index) in items" :item="val" @remove="delItem(index)"></treelist>
</div>
<template id="treelist-template">
<ul>
<div style="padding:5px 0;">
<a v-if="isFolder" @click="toggle()">[{{open ? '-' : '+'}}]</a>
<a v-else style="color:#FFF;">[+]</a>
<input type="number" style="width:80px;" v-model="item.sort">
<input type="text" size="30" v-model="item.name" placeholder="岗位名称">
<button type="button" @click="addChild()">添加</button>
<button type="button" @click="$emit('remove')" v-if="!isFolder">删除</button>
</div>
<ul v-show="open" v-if="isFolder">
<treelist v-for="(val, index) in item.children" :item="val" @remove="delItem(index)"></treelist>
</ul>
</ul>
</template>
<script>
window.onload = function(){
//treelist组件
Vue.component('treelist', {
template: '#treelist-template',
props: {
item: Object
},
data: function() {
return {
open: false
}
},
computed: {
isFolder: function() {
return this.item.children && this.item.children.length
}
},
methods: {
toggle: function() {
if (this.isFolder) {
this.open = !this.open
}
},
addChild: function() {
/*添加内容但不同步到服务器*/
if (!this.isFolder) {
Vue.set(this.item, 'children', [])
}
this.open = true
this.item.children.push({
sort: 0,
name: '',
status: 1,
parent_id: this.item['id']
})
},
delItem: function(index){
this.item['children'].splice(index, 1)
}
}
})
new Vue({
el: '#app',
data:{
mydata: {},
items: [
{"id":"10","parent_id":"0","sort":"0","name":"其它","status":"0"},
{"id":"12","parent_id":"0","sort":"0","name":"测试","status":"0"},
{"id":"1","parent_id":"0","sort":"0","name":"水果","status":"0",
"children":[
{"id":"4","parent_id":"1","sort":"0","name":"香蕉","status":"0"}
]
},
{"id":"2","parent_id":"0","sort":"0","name":"饮料","status":"0",
"children":[
{"id":"5","parent_id":"2","sort":"0","name":"可乐","status":"0"},
{"id":"6","parent_id":"2","sort":"0","name":"酒水","status":"0",
"children":[
{"id":"7","parent_id":"6","sort":"0","name":"啤酒","status":"0"}
]
}
]
},
{"id":"3","parent_id":"0","sort":"0","name":"美食","status":"0",
"children":[
{"id":"8","parent_id":"3","sort":"0","name":"红烧鱼","status":"0"}
]
}
]
},
methods: {
add:function(){
this.mydata['id'] = 100;//从服务器返回的ID号
this.mydata['status'] = 0;
this.mydata['parent_id'] = 0;
this.items.push(this.mydata);
this.mydata = {};
},
delItem: function(index){
this.items.splice(index, 1)
}
}
});
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在实际项目开发中,我们经常会遇到选项卡切换,对于一个前端工程师来说,组件化/模块化开发是一种必备的行为规范,下面这篇文章主要给大家介绍了关于vue使用动态组件实现TAB切换效果的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue3.0搭配.net core实现文件上传组件，帮助大家开发Web应用程序，完成需求，感兴趣的朋友可以了解下2020-10-10
这篇文章主要为大家介绍了公共Hooks封装useTableData表格数据实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
vue3+ts+elementui-plus二次封装弹框实战教程
这篇文章主要介绍了vue3+ts+elementui-plus二次封装弹框实战教程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
这篇文章主要介绍了vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
在本篇文章里小编给大家整理的是一篇关于Vue3.0的优化总结内容，有需要的朋友们可以学习下。2020-10-10
这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了vue中v-html妙用及空白行消除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要给大家介绍了关于Vue数字相加、相减精度丢失处理3种方法的相关资料,前端在操作加减乘除计算时,经常会出现精度缺失问题,有时会显示为科学计数的样式,需要的朋友可以参考下2023-08-08
nextTick是Vue提供的一个全局API，由于Vue的异步更新策略导致我们对数据的修改不会立刻体现，在DOM变化上，此时如果想要立即获取更新后的DOM状态，就需要使用这个方法，这篇文章主要介绍了解析VUE中nextTick,需要的朋友可以参考下2022-11-11
最新评论