详解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里使用Dom操作Xml
Jan 22 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
详细分析vue响应式原理
Jun 22 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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
模仿OSO的论坛(五)
2006/10/09 PHP
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
Python实现的批量下载RFC文档
2015/03/10 Python
理解Python中函数的参数
2015/04/27 Python
Python 3.8 新功能全解
2019/07/25 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python读取实时数据流示例
2019/12/02 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python实现超级玛丽游戏
2020/03/18 Python
Python eval函数原理及用法解析
2020/11/14 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
学校学雷锋活动总结
2014/06/26 职场文书
群众路线专项整治方案
2014/10/27 职场文书
社区灵活就业证明
2014/11/03 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
Python中的程序流程控制语句
2022/02/24 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python