详解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 相关文章推荐
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
JavaScript实现拖拽功能
Feb 11 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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python 内置函数汇总详解
2019/09/16 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
文明学生事迹材料
2014/01/29 职场文书
环保小标语
2014/06/13 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
2019求职信大礼包
2019/05/15 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android