1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Antd vue 树形结构 tree组件的增删功能

Antd vue 树形结构 tree组件的增删功能

时间:2020-02-08 18:09:50

相关推荐

Antd vue 树形结构 tree组件的增删功能

效果展示:

思路:

右边的button用插槽的方式添加

<template><div class="m-page"><div class="content"><div class="menu-data"><div class="header"><span class="name">菜单配置</span></div><a-tree ref="tree1" checkable :tree-data="treeData" :defaultExpandAll="false" :selectedKeys.sync="selectedKeys" blockNode><template v-slot:title="nodeData"><span>{{nodeData.title}}</span><a-button-group style="float:right"><a-button size="small" @click="addNode(nodeData)">新增下级</a-button><a-button size="small" @click="deleteNode(nodeData)">删除</a-button></a-button-group></template></a-tree></div><div class="menu-config"></div></div></div></template><script>export default {data(){return{treeData:[{title: '管理',key: '1',children: [{title: '数据管理',key: '1-1',children: [{title: 'aaa', key: '1-1-1', disableCheckbox: true },{title: 'bbb', key: '1-1-2' },],},{title: '人员管理',key: '1-2',children: [{title: '第一个', key: '1-2-1' },],},],},{title: '展示',key: '2',children: [{title: '数据展示',key: '2-1',children: [{title: '内容', key: '2-1-1', disableCheckbox: true },],},],},],selectedKeys: ['1-1'],}},methods: {addNode(e){console.log(e)},deleteNode(e){let treeData = this.treeData;this.treeData = this.deleteParentNode(treeData,e.key);console.log(this.treeData)},has(obj,key){if(obj.key!==key){return obj}},deleteParentNode(data,key){const ret = [];data.forEach(ele=>{if(this.has(ele,key)){if(ele.children){ele.children = this.deleteParentNode(ele.children,key);}ret.push(ele);}})return ret;},},}</script><style class="scoped">.content{display: flex;}.menu-data{width: 55%;padding: 10px;border-radius: 6px;border: 1px solid #eee;}.menu-config{width: 45%;padding: 10px;border-radius: 6px;border: 1px solid #eee;}.header .name{font-weight: bold;color: #888;}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。