vue封装可实现选中、新增、修改、删除功能的树组件 |
您所在的位置：网站首页 › 中国的特长隧道 › vue封装可实现选中、新增、修改、删除功能的树组件 |
vue封装可实现选中、新增、修改、删除功能的树组件
|
我们在开发项目的时候经常会遇到一些树形结构的数据结构，比如部门、班级、关系等等层级结构的数据，通常常规的展示方式一般是通过树的结构来展示出来，现在我们自己就来实现一个可以新增、修改、删除的树。 实现的过程很简单，树一般都会采用递归思路，然后将数据展示出来。 + - {{v.name}} 新增 编辑 删除然后抛出对应的节点，通过递归的方式获取到对应的数据结构的节点，然后就可以对节点进行增加，修改，查询了。 // 递归操作根据id获取节点操作 getNode (data, id, type) { let that = this; data.map((item, index) => { if (item.id == id) { that.currentNode = item; // 结果赋值 // 删除操作 if (type === 'del') { if (window.confirm('确定要删除节点？')) { data.splice(index, 1); alert('删除成功！'); } } // 展开收缩 if (type === 'expend') { item.isExpend = !item.isExpend; } // 编辑操作 if (type === 'edit') { } // 新增操作 if (type === 'add') { if (!item.children) { that.$set(item, 'children', []); } item.children.push({ id: new Date().getTime(), // 用时间戳标识唯一id，具体情况可以根据自己定一个唯一标识 name: '新增节点' + new Date().getTime(), isExpend: false }); // 当没有子节点的时候新增一个节点后展开节点 if (item.children.length > 0) { item.isExpend = true; } } } else { if (item.children) { this.getNode(item.children, id, type); } } }); }整个过程主要的思路就是递归遍历输出树，然后通过点击节点递归获取树中对应的节点。 整个代码如下： Tree组件部分: + - {{v.name}} 新增 编辑 删除 import Tree from './tree.vue'; export default { name: 'Tree', data () { return { currentId: 1 // 高亮当前节点标识 }; }, computed: { }, props: ['treeData', 'isEdit'], components: { Tree }, created () { }, mounted () { }, methods: { // 删除节点 delNode (v) { this.$emit('delNode', v); }, // 新增节点 addNode (v) { this.$emit('addNode', v); }, // 修改节点 editNode (v) { this.$emit('editNode', v); }, // dom方法设置当前节点高亮显示 setCurrentNode (node) { document.querySelector('#Tree span.active').classList.remove('active'); node.classList.add('active'); }, // 点击当前节点 nodeClick (v, $event) { this.setCurrentNode($event.target); this.$emit('nodeClick', v, $event); }, // 收缩展开节点 expendNode (v) { this.$emit('expendNode', v); } } }; .tree { user-select: none; ul li { padding:15px 0 0 15px; span { &.active { color:red; font-weight: bolder; } &:hover { cursor: pointer; } display:block; font-size: 20px; padding: 15px 0; color: #fff; strong { margin-right: 20px; display:inline-block; width: 20px; height: 20px; background:#909090; color:#333; font-size: 20px; text-align:center; line-height:20px; border-radius:10px; } em { margin-left: 15px; font-style:normal; color:#1a63de; } .add-btn { color: green; } em.del { color: red; } } } }外层引入： 
import Tree from '@/pages/tree/Tree.vue';
export default {
name: 'App',
data () {
return {
isEdit: true,
currentNode: null, // 当前点击的节点
treeData: [
{
id: 1,
name: '一级标题 1',
isExpend: true,
children: [
{
id: 2,
name: '二级标题 2-1',
isExpend: true,
children: [
{
id: 5,
name: '三级标题 3-1',
isExpend: true,
children: [
{
id: 7,
name: '四级标题 4-1',
isExpend: false
},
{
id: 8,
name: '四级标题 4-2',
isExpend: false
}
]
},
{
id: 6,
name: '三级标题 3-1',
isExpend: false
}
]
},
{
id: 3,
name: '一级标题 2-1',
isExpend: false
},
{
id: 4,
name: '一级标题 2-1',
isExpend: false
}
]
}
]
};
},
components: { Tree },
methods: {
// 递归操作根据id获取节点操作
getNode (data, id, type) {
let that = this;
data.map((item, index) => {
if (item.id == id) {
that.currentNode = item; // 结果赋值
// 删除操作
if (type === 'del') {
if (window.confirm('确定要删除节点？')) {
data.splice(index, 1);
alert('删除成功！');
}
}
// 展开收缩
if (type === 'expend') {
item.isExpend = !item.isExpend;
}
// 编辑操作
if (type === 'edit') {
}
// 新增操作
if (type === 'add') {
if (!item.children) {
that.$set(item, 'children', []);
}
item.children.push({
id: new Date().getTime(), // 用时间戳标识唯一id，具体情况可以根据自己定一个唯一标识
name: '新增节点' + new Date().getTime(),
isExpend: false
});
// 当没有子节点的时候新增一个节点后展开节点
if (item.children.length > 0) {
item.isExpend = true;
}
}
} else {
if (item.children) {
this.getNode(item.children, id, type);
}
}
});
},
expendNode (v) {
this.getNode(this.treeData, v.id, 'expend');
},
nodeClick (v) {
console.log(v);
},
delNode (v) {
this.getNode(this.treeData, v.id, 'del');
},
addNode (v) {
this.getNode(this.treeData, v.id, 'add');
alert('新增成功！');
},
editNode (v) {
console.log(v);
}
},
created () {
},
watch: {
$route (to) {
console.log(to);
if (to.path.includes('login')) {
this.hidden = false;
} else {
this.hidden = true;
}
}
}
};
@import "style/common/reset";
@import "style/common/base";
#app {
position: absolute;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
padding-bottom: 120px;
overflow-y: auto;
background: url("static/images/back.png");
background-size: 100%;
background-image: linear-gradient(#030303, #170403);
.loading {
position: fixed;
z-index: 999999;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.75);
img {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 150px;
}
}
}
结果如下：
编辑部分我没有具体去一一实现，原理都是一样的传参进行修改，还有一天就要上班了，最近冠状病毒太厉害了，回去的时候200多个确诊，现在已经达到35000多个了，搞得人心慌慌，真有点像生化危机的感觉，希望病毒尽快消失，生活尽快回复正常。 结束语： 努力，努力，再努力！ (￣_￣ ) |
【本文地址】