脚本宝典收集整理的这篇文章主要介绍了

一个vue树形插件vue-simple-tree

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p>在实际项目中经常用到tree视图,发现了几个vue的tree插件,但都不是太适合自己项目,花了一些心思写了一个插件,简单灵活,适合大部分项目。</p> <p><a href="https://github.com/jiaxincui/vue-tree" rel="nofollow noreferrer" target="_blank">Github</a> 望不吝Star!</p> <h2 id="articleHeader0">介绍</h2> <p>一个简单灵活的vue.js树形组件,可作为插件使用,也可直接作为<code>component</code>使用</p> <p>使用时只需传入一个树形数据绑定。</p> <p>组件还提供了<code>增删改查</code>事件,你可以很方便的在组件上监听。</p> <p>不止这些,</p> <ul> <li>可定制的<code>增删改查</code>事件</li> <li>复选框显示可选</li> <li>初始化展开层级</li> <li>初始化勾选</li> <li>可选的按钮图标</li> <li>父节点半选状态支持</li> <li>显示字段自定义</li> <li>...</li> </ul> <h2 id="articleHeader1">演示</h2> <p>A <a href="https://jiaxincui.github.io/vue-tree/dist/" rel="nofollow noreferrer" target="_blank">Demo</a></p> <h2 id="articleHeader2">安装</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="# install npm install vue-simple-tree --sve-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"><span class="hljs-comment"># install</span> npm install vue-simple-tree --sve-dev</code></pre> <h2 id="articleHeader3">数据格式</h2> <p><code>treeData</code></p> <blockquote> <p><code>id</code>必要属性,<code>Number</code></p> <p><code>name</code>必要属性,<code>String</code>,可自定义,默认<code>name</code>,如<code>options.itemName:'display_name'</code></p> <p><code>children</code>非必要,<code><a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a></code></p> </blockquote> <p>treeData示例</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;data&quot;: [{ &quot;id&quot;: &quot;1&quot;, &quot;name&quot;: &quot;Root&quot;, &quot;children&quot;: [ { &quot;id&quot;: &quot;2&quot;, &quot;name&quot;: &quot;Node2&quot; }, { &quot;id&quot;: &quot;3&quot;, &quot;name&quot;: &quot;Node3&quot; }, { &quot;id&quot;: &quot;4&quot;, &quot;name&quot;: &quot;Node4&quot;, &quot;children&quot;: [ { &quot;id&quot;: &quot;5&quot;, &quot;name&quot;: &quot;Node5&quot; } ] } ] }] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json">{ <span class="hljs-attr">"data"</span>: [{ <span class="hljs-attr">"id"</span>: <span class="hljs-string">"1"</span>, <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Root"</span>, <span class="hljs-attr">"children"</span>: [ { <span class="hljs-attr">"id"</span>: <span class="hljs-string">"2"</span>, <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Node2"</span> }, { <span class="hljs-attr">"id"</span>: <span class="hljs-string">"3"</span>, <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Node3"</span> }, { <span class="hljs-attr">"id"</span>: <span class="hljs-string">"4"</span>, <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Node4"</span>, <span class="hljs-attr">"children"</span>: [ { <span class="hljs-attr">"id"</span>: <span class="hljs-string">"5"</span>, <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Node5"</span> } ] } ] }] }</code></pre> <h2 id="articleHeader4">使用示例</h2> <p>有两种使用方法:</p> <ol> <li> <p>局部注册component(推荐)</p> <p><code>App.vue</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <vue-tree v-model=&quot;checkedIds&quot; :tree-data=&quot;treeData&quot; :options=&quot;options&quot;></vue-tree> </div> <p></template></p> <p><script> import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>Tree from 'vue-simple-tree/src/components/<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>Tree.vue' import Tree from 'tree.json'; <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', components: { <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>Tree }, data () { return { // 复选ids,可传入id<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>作为初始选中状态,如[3,4,8] checkedIds: [], // tree数据 treeData: Tree.data, // 设置项 options: {} } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">vue-tree</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checkedIds"</span> <span class="hljs-attr">:tree-data</span>=<span class="hljs-string">"treeData"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">vue-tree</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> VueTree <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-simple-tree/src/components/VueTree.vue'</span> <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'tree.json'</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, <span class="hljs-attr">components</span>: { VueTree }, data () { <span class="hljs-keyword">return</span> { <span class="hljs-comment">// 复选ids,可传入id<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>作为初始选中状态,如[3,4,8]</span> checkedIds: [], <span class="hljs-comment">// tree数据</span> treeData: Tree.data, <span class="hljs-comment">// 设置项</span> options: {} } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> </li> <li> <p>全局注册,通过插件形式注册全局component</p> <p><code>main.js</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import App from './App' import Vuetree from 'vue-simple-tree' Vue.use(Vuetree); new Vue({ el: '#app', template: '<App></span>',<br /> components: { App }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> Vuetree <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-simple-tree'</span> Vue.use(Vuetree); <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, <span class="hljs-attr">components</span>: { App } })</code></pre> <p><code>App.vue</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <vue-tree v-model=&quot;checkedIds&quot; :tree-data=&quot;treeData&quot; :options=&quot;options&quot;></vue-tree> </div> <p></template></p> <p><script> import Tree from 'tree.json'; <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', data () { return { checkedIds: [], treeData: Tree.data, options: {} } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">vue-tree</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checkedIds"</span> <span class="hljs-attr">:tree-data</span>=<span class="hljs-string">"treeData"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">vue-tree</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'tree.json'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">checkedIds</span>: [], <span class="hljs-attr">treeData</span>: Tree.data, <span class="hljs-attr">options</span>: {} } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> </li> </ol> <h2 id="articleHeader5">设置选项</h2> <p>以下是默认设置.</p> <p>你可以在<code>options</code>里覆盖默认设置,或仅设置若干项<code>options: {someOption: true}</code></p> <p>你也可以绑定一个空的对象<code>:options="{}"</code>或直接忽略<code>options</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="options: { // String,节点显示字段 itemName: 'name', // Boolean,是否显示添加子节点按钮 addItem: true, // Boolean,是否显示选择框 checkbox: true, // Array,初始化时选中id (v2.1以后不推荐使用,v3.0将废弃),替代方法见'#使用示例'章节 checkedIds: [], // Boolean,选中时是否展开节点 checkedOpen: true, // Boolean,目录是否加粗显示 folderBold: true, // String,展开按钮(默认依赖font-awesome) openClass: 'fa fa-plus-square text-info', // String,收缩按钮(默认依赖font-awesome) closeClass: 'fa fa-minus-square text-danger', // String,添加节点按钮(默认依赖font-awesome) addClass: 'fa fa-plus text-danger', // Boolean,是否显示编辑按钮 showEdit: true, // Boolean,是否显示删除按钮 showDelete: true, // String,编辑按钮(默认依赖font-awesome) editClass: 'fa fa-edit', // String,删除按钮(默认依赖font-awesome) deleteClass: 'fa fa-trash-o' // (v2.1新增) Boolean,获取复选项目是否包含目录,默认`true`,如果只获取叶子节点设置为`false` idsWithParent: true // (v2.1新增) Number,初始化时展开层级,根节点为0,默认0 depthOpen: 0 }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">options:</span> { <span class="hljs-comment">// String,节点显示字段</span> <span class="hljs-symbol"> itemName:</span> <span class="hljs-string">'name'</span>, <span class="hljs-comment">// Boolean,是否显示添加子节点按钮</span> <span class="hljs-symbol"> addItem:</span> <span class="hljs-literal">true</span>, <span class="hljs-comment">// Boolean,是否显示选择框</span> <span class="hljs-symbol"> checkbox:</span> <span class="hljs-literal">true</span>, <span class="hljs-comment">// <a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a>,初始化时选中id (v2.1以后不推荐使用,v3.0将废弃),替代方法见'#使用示例'章节</span> <span class="hljs-symbol"> checkedIds:</span> [], <span class="hljs-comment">// Boolean,选中时是否展开节点</span> <span class="hljs-symbol"> checkedOpen:</span> <span class="hljs-literal">true</span>, <span class="hljs-comment">// Boolean,目录是否加粗显示</span> <span class="hljs-symbol"> folderBold:</span> <span class="hljs-literal">true</span>, <span class="hljs-comment">// String,展开按钮(默认依赖font-awesome)</span> <span class="hljs-symbol"> open<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>:</span> <span class="hljs-string">'fa fa-plus-square text-info'</span>, <span class="hljs-comment">// String,收缩按钮(默认依赖font-awesome)</span> <span class="hljs-symbol"> closeClass:</span> <span class="hljs-string">'fa fa-minus-square text-danger'</span>, <span class="hljs-comment">// String,添加节点按钮(默认依赖font-awesome)</span> <span class="hljs-symbol"> addClass:</span> <span class="hljs-string">'fa fa-plus text-danger'</span>, <span class="hljs-comment">// Boolean,是否显示编辑按钮</span> <span class="hljs-symbol"> showEdit:</span> <span class="hljs-literal">true</span>, <span class="hljs-comment">// Boolean,是否显示删除按钮</span> <span class="hljs-symbol"> showDe<a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a>e:</span> <span class="hljs-literal">true</span>, <span class="hljs-comment">// String,编辑按钮(默认依赖font-awesome)</span> <span class="hljs-symbol"> editClass:</span> <span class="hljs-string">'fa fa-edit'</span>, <span class="hljs-comment">// String,删除按钮(默认依赖font-awesome)</span> <span class="hljs-symbol"> deleteClass:</span> <span class="hljs-string">'fa fa-trash-o'</span> <span class="hljs-comment">// (v2.1新增) Boolean,获取复选项目是否包含目录,默认`true`,如果只获取叶子节点设置为`false`</span> <span class="hljs-symbol"> idsWithParent:</span> <span class="hljs-literal">true</span> <span class="hljs-comment">// (v2.1新增) Number,初始化时展开层级,根节点为0,默认0</span> <span class="hljs-symbol"> depthOpen:</span> <span class="hljs-number">0</span> }</code></pre> <blockquote> <p>注意:默认设置使用了<code>font-awesome</code>的图标,<br />如果你继续使用默认设置,请引入这个<code>css</code>库</p> </blockquote> <h2 id="articleHeader6">如何获取复选数据?</h2> <p>自v2.1起,不再从options.checkedIds获取复选数据,<br />而是使用<code>v-model="checkedIds"</code>获取复选id.</p> <blockquote> <p>默认情况下获取的ids是包含所有上级目录的,如果你想获取只包含叶子节点的ids,设置<code>options.idsWithParent</code>为<code>false</code></p> </blockquote> <h2 id="articleHeader7">事件</h2> <p><code>item-click</code>、<code>add-a-child</code>、 <code>item-edit</code> 、<code>item-de<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e</code> 分别为点击节点、添加子节点、编辑节点、删除节点事件。</p> <p>这些事件绑定了操作id到监听器</p> <h2 id="articleHeader8">监听器</h2> <p>如果需要,你可以选择绑定这些事件的其中一个或多个。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<vue-tree v-model=&quot;ids&quot; :tree-data=&quot;treeData&quot; :options=&quot;options&quot; @add-a-child=&quot;addAChild&quot; @item-click=&quot;itemClick&quot; @item-edit=&quot;itemEdit&quot; @item-delete=&quot;itemDelete&quot;><br /> </vue-tree>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">vue-tree</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"ids"</span> <span class="hljs-attr">:tree-data</span>=<span class="hljs-string">"treeData"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span> @<span class="hljs-attr">add-a-child</span>=<span class="hljs-string">"addAChild"</span> @<span class="hljs-attr">item-click</span>=<span class="hljs-string">"itemClick"</span> @<span class="hljs-attr">item-edit</span>=<span class="hljs-string">"itemEdit"</span> @<span class="hljs-attr">item-delete</span>=<span class="hljs-string">"itemDelete"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">vue-tree</span>&gt;</span></code></pre> <p>为绑定的事件定义监听方法,这些方法都接收一个当前操作id作为参数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="methods: { addAChild(id) { console.log('点击了添加子节点按钮,父节点ID[' + id + ']') }, itemClick(id) { console.log('点击了节点,节点ID[' + id + ']') }, itemEdit(id) { console.log('点击了编辑按钮,节点ID[' + id + ']') }, itemDelete(id) { console.log('点击了删除按钮,节点ID[' + id + ']') } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>methods: { addAChild(id) { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'点击了添加子节点按钮,父节点ID['</span> + id + <span class="hljs-string">']'</span>) }, itemClick(id) { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'点击了节点,节点ID['</span> + id + <span class="hljs-string">']'</span>) }, itemEdit(id) { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'点击了编辑按钮,节点ID['</span> + id + <span class="hljs-string">']'</span>) }, itemDelete(id) { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'点击了删除按钮,节点ID['</span> + id + <span class="hljs-string">']'</span>) } }</code></pre> <h2 id="articleHeader9">样式</h2> <p>如果你想修改默认样式,一切都为你准备好了,只需要重新定义以下css类</p> <p><code>.vue-tree</code></p> <p><code>.vue-tree .vue-tree-item</code></p> <p><code>.vue-tree .item-wrapper</code></p> <p><code>.vue-tree .item-wrapper .item-toggle</code></p> <p><code>.vue-tree .item-wrapper .item-btn</code></p> <p><code>.vue-tree .item-wrapper .item-btn .add-btn</code></p> <p><code>.vue-tree .item-wrapper .item-btn .edit-btn</code></p> <p><code>.vue-tree .item-wrapper .item-btn .de<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e-btn</code></p> <p><code>.vue-tree-list</code></p>

总结

以上是脚本宝典为你收集整理的

一个vue树形插件vue-simple-tree

全部内容,希望文章能够帮你解决

一个vue树形插件vue-simple-tree

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过