前言
最近公司项目(
Vue
+Element
)需求有用到tree
,所以呢我去网上找了很多插件,都不是很符合我的要求。最后在GitHub上面找到了一款插件是iview
的组织结构树vue-org-tree
,但是由于文档不是特别易懂,自己踩了很多坑。不过定制性特别高,基本上会用到的方法都有了。所以今天来给大家讲解下。
安装
NPM
# use npm
npm i vue2-org-tree
# use yarn
yarn add vue2-org-tree
安装 loader
温馨提示:不安装less-loader基本上都会报错
npm install --save-dev less less-loader
Import Plugins
import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'
Vue.use(Vue2OrgTree)
CDN
# css
<link href="https://unpkg.com/vue2-org-tree@1.1.0/dist/style.css">
# js
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-org-tree@1.1.0/dist/index.js"></script>
简单起步
严老湿这边呢,就直接使用Vue-cli
起步了,vue-org-tree
安装成功之后,我们就直接使用了,在Vue
页面或者组件中使用vue2-org-tree
标签,动态绑定data
基本创建
<vue2-org-tree :data="data"/>
data数据放入页面中
id 每个元素不同的ID ,label为name, children为自己的子集数据
data: {
id: 0,
label: "XXX科技有限公司",
children: [
{
id: 2,
label: "产品研发部",
children: [
{
id: 5,
label: "研发-前端"
},
{
id: 6,
label: "研发-后端"
},
{
id: 9,
label: "UI设计"
},
{
id: 10,
label: "产品经理"
}
]
},
{
id: 3,
label: "销售部",
children: [
{
id: 7,
label: "销售一部"
},