在vue中使用vue2-org-tree
安装
npm i vue2-org-tree
vue中使用
-
引入
vue2-org-tree# 第一种全局安装 import Vue from "vue"; import Vue2OrgTree from "vue2-org-tree"; Vue.use(Vue2OrgTree) # 第二种局部安装见如下使用 -
并需要单独引用
vue2-org-tree样式的见地址 -
使用
# template <vue2-org-tree :data="data" @on-node-click="onNodeClick" :render-content="renderContent" /> # script import Vue2OrgTree from "vue2-org-tree"; import './tree.less'; export default { components: { Vue2OrgTree }, data(){ return { data:[] //见数据格式第一点 } }, methods:{ //点击事件 onNodeClick(e, data) { // do something this.$emit("onNodeClick", data); }, // 渲染方法，可以自己组装标签，类似vue的render方法 renderContent(h, node) { return h('div', {}, [ h('p', {}, node.id), //表示账号'000001'的字段 h('p', {}, node.ledgerName),//表示名称'测试1'的字段 ]); } } }
数据格式
- 树传入的展示的格式
data大致结构如下id和fatherId都是可以自己定义，但是的对应，有子集的必须使用children字段
let data=[
{
id:1,
fatherId:null,
ledgerName:'000001',
children:[
{
id:1,
fatherId:null,
ledgerName:'000001',
}
]
},
{
id:1,
fatherId:null,
ledgerName:'000002',
children:[
{
id:1,
father:null,
ledgerName:'100002',
children:[
]
}
]
}
]
- 数据格式转换
/** * 数据树结构转换 */ export function treeStructure({ data, fatherId, id }) { //如果列表中不存在id 手动添加一个id字段 方便展示多叉树组件展示使用 data = JSON.parse(JSON.stringify(data)); data = data.map(item => { if (!item.hasOwnProperty(id)) item['id'] = item[id]; return item; }) //第一层数据 let parents = data.filter(item => item[fatherId] === item[id]); //有父节点的数据 let childrens = data.filter(item => item[fatherId] !== item[id]); function translator(parents, childrens) { parents.forEach(parent => { childrens.forEach((children, index) => { //找到子层的父层 if (children[fatherId] === parent[id]) { //temp 这步不是必须 //对子节点数据进行深复制 let temp = JSON.parse(JSON.stringify(childrens)); //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利 temp.splice(index, 1); //判断是否有children属性 有就直接push 没有就增加children属性 parent.children ? parent.children.push(children) : parent.children = [children]; //不用temp 传childrens也可 translator([children], temp); } }) }) } translator(parents, childrens); //返回最终结果 return parents; } // 使用 let data = treeStructure({ data: infoList || [], fatherId: "superLedgerNo", id: "id", })
