基于Vuex的树形控件

用vue也有一小段时间了,最近刚好写到一个树形控件,脑补了下怎么设计数据结构,结果vuex的双向绑定让我瞬间痴汉了

代码在这里http://jsfiddle.net/osyo/2cm2bLdf/

思路也挺简单的,就是把当前元素所在的对象作为参数传入方法中直接修改

emmm,这里要注意一点,如下

state: {
    all: {
        name: ‘0‘,
        list: [
            { name: ‘0-0‘, content: ‘some text‘ }
        ]
    },
    formData: {
        group: {
            name: ‘‘,
            list: []
        },
        item: {
            name: ‘‘,
            content: ‘‘
        }
    }
}

根据新增的内容时组还是单个对象来往list中push元素,如果直接使用或者只是简单的浅拷贝,会导致新增的item使用同一个content,当某个item值有修改时,所有item值都会被修改...

大概就这些...

时间: 2024-10-07 06:50:21

基于Vuex的树形控件的相关文章

Web应用程序开发,基于Ajax技术的JavaScript树形控件

感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项. 目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件,例如jQuery.Dojo.YUI.Ext JS等,还有一些独立的树形控件,例如dhtmlxTree等,这些树形控件完美的解决了层次数据的展示问题. 展示离不开数据,树形控件主要

基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)

BZ第一次自己写博客,心情好激动!!BZ也是小菜,本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. BZ最近看了很多博友的有关TreeView的博客,发现很多都是WebForm.JQuery的.因为BZ使用的是MVC的原因,所以决定写一写关于MVC和Bootstrap的TreeView. PS:基于Bootstrap的JQuery TreeView树形控件,JQuery版本为2.1.1(下载网上的基于Bootstrap的JQuery TreeVie

基于jQuery 常用WEB控件收集

Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). AutoComplete-JQuery Facebook

共有21款 jQuery 树形控件开源软件,第1页

JQuery Tree 插件 zTree zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree...更多zTree信息 最近更新: [每日一博]Ztree+PHP 无限极节点递归查找节点 发布于 1年前 jQuery的Tree控件 jstree j

树形控件简单样例

此实例实现的功能:在一个树形控件中显示鸡啄米站点的简单结构分层,共同拥有三层.分别为鸡啄米站点.各个分类和文章.用鼠标左键单击改变选中节点后.将选中节点的文本显示到编辑框中.以下是详细实现步骤: 1. 创建一个基于对话框的MFCproject,名称设置为"Example31". 2. 在自己主动生成的对话框模板IDD_EXAMPLE31_DIALOG中,删除"TODO: Place dialog controls here."静态文本框."OK"

Android 打造任意层级树形控件 考验你的数据结构和设计

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40212367,本文出自:[张鸿洋的博客] 1.概述 大家在项目中或多或少的可能会见到,偶尔有的项目需要在APP上显示个树形控件,比如展示一个机构组织,最上面是boss,然后各种部门,各种小boss,最后各种小罗罗:整体是一个树形结构:遇到这样的情况,大家可能回去百度,因为层次多嘛,可能更容易想到ExpandableListView , 因为这玩意层级比Listview多,但是E

为树形控件添加弹出式菜单,并跟踪所选择的项

[cpp] view plaincopy <span style="font-size:24px;color:#ff0000;">为树形控件添加弹出式菜单,并跟踪所选择的项</span> [cpp] view plaincopy 动态弹出式菜单 [cpp] view plaincopy //获取当前右键的位置 CPoint pt; GetCursorPos(&pt); m_tree.ScreenToClient(&pt); //判断右键的位置处是

js树形控件—zTree使用总结(转载)

0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点 最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.ztree.e

Android 打造随意层级树形控件 考验你的数据结构和设计

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40212367,本文出自:[张鸿洋的博客] 1.概述 大家在项目中或多或少的可能会见到,偶尔有的项目须要在APP上显示个树形控件,比方展示一个机构组织,最上面是boss.然后各种部门.各种小boss,最后各种小罗罗.总体是一个树形结构.遇到这种情况,大家可能回去百度.由于层次多嘛,可能更easy想到ExpandableListView , 由于这玩意层级比Listview多.可是