详解Vue2 无限级分类(添加,删除,修改)


Posted in Javascript onMarch 07, 2017

本人对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>

详解Vue2 无限级分类(添加,删除,修改)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现每日自动换一张图片的方法
May 04 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
Jquery Fade用法详解
Nov 06 jQuery
js放到head中失效的原因与解决方法
Mar 07 #Javascript
Bootstrap媒体对象学习使用
Mar 07 #Javascript
angular十大常见问题
Mar 07 #Javascript
Bootstrap表单控件学习使用
Mar 07 #Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 #Javascript
Bootstrap进度条实现代码解析
Mar 07 #Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 #Javascript
You might like
php实现将数组转换为XML的方法
2015/03/09 PHP
php header函数的常用http头设置
2015/06/25 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
方正Java笔试题
2014/07/03 面试题
路政管理毕业自荐书范文
2014/02/10 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
失职检讨书大全
2015/01/26 职场文书
专家推荐信范文
2015/03/26 职场文书
大学生社会实践感想
2015/08/11 职场文书
深入理解python多线程编程
2021/04/18 Python
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python