详解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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 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 date函数参数详解
2006/11/27 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
PHP递归的三种常用方式
2019/02/28 PHP
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
详解Python Socket网络编程
2016/01/05 Python
python实现百度语音识别api
2018/04/10 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
PyQt5实现简易计算器
2020/05/30 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
运动会开幕式邀请函
2014/02/03 职场文书
个人承诺书怎么写
2014/05/24 职场文书
宣传活动总结范文
2014/07/01 职场文书
工伤事故证明
2014/10/20 职场文书
英文商务邀请函范文
2015/01/31 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Redis Lua脚本实现ip限流示例
2022/07/15 Redis