详解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 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
JavaScript callback回调函数用法实例分析
May 08 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
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的FTP学习(一)
2006/10/09 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
重定向实现代码
2006/11/20 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
详解python中的Turtle函数库
2018/11/19 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
python生成特定分布数的实例
2019/12/05 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
校园之声广播稿
2014/01/31 职场文书
质量月活动策划方案
2014/03/10 职场文书
档案信息化建设方案
2014/05/16 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2016新年年会主持词
2015/07/06 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
python解析照片拍摄时间进行图片整理
2022/07/23 Python