详解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禁止回车提交表单的示例代码
Dec 23 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
React中上传图片到七牛的示例代码
Oct 10 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
vscode调试node.js的实现方法
Mar 22 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 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
php 常用的系统函数
2017/02/07 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Augularjs-起步详解
2016/07/08 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
js实现微信聊天界面
2020/08/09 Javascript
Python下载网络小说实例代码
2018/02/03 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
python实现udp聊天窗口
2020/03/31 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
小学开学典礼主持词
2014/03/19 职场文书
期末评语大全
2014/05/04 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
国富论读书笔记
2015/06/26 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
公司新员工欢迎词
2015/09/30 职场文书
教师个人教学反思
2016/02/23 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
Python开发五子棋小游戏
2022/05/02 Python