项目中会遇到需要树来展示数据的,要求每个节点需要增删改的,具体需要的根据自己实际项目需求可进行代码修改
如图:

el-tree组件封装:

<template>
<div class="white-body-view">
<el-tree id="my-tree"
ref="tree"
class="tree-view structure-tree scroll-bar"
:data="treeData"
highlight-current
:default-expand-all="treeExpandAll"
:props="defaultProps"
check-strictly
:default-expanded-keys="[1,2]"
:node-key="treeNodeKey"
@node-click="handleNodeClick"
:auto-expand-parent="false"
:expand-on-click-node="false">
<span slot-scope="{ node, data }"
class="custom-tree-node">
<span class="tooltip">
<span class="add-f-s-14">{
{ data.name }}</span>
</span>
<div v-if="node.isCurrent === true&&itemShow===true"
class="operation-view">
<i style="color:#ffffff"
class="small-operation-btn el-icon-plus"
@click.stop="handleAdd(data)" />
<i style="color:#ffffff"
class="small-operation-btn el-icon-edit"
@click.stop="handleEdit(data)" />
<i style="color:#ffffff"
class="small-operation-btn el-icon-delete"
@click.stop="handleDelete(data)" />
</div>
</span>
</el-tree>
</div>
</template>
<script>
export default {
props: {
// 列表数据
treeData: {
type: Array,
default: function () {
return []
}
},
// 树节点是否默认展开
treeExpandAll: {
type: Boolean,
default: true
},
// 树节点唯一标识
treeNodeKey: {
type: String,
default: ''
},
// 子节点展示新增删除编辑图标
itemShow: {
type: Boolean,
default: true
}
},
data () {
return {
defaultProps: {
children: 'children',
label: 'name'
},
selectItem: {}
}
},
watch: {
treeExpandAll (e) {
this.treeExpandAll = e
console.log(e)
}
},
mounted () {
},
methods: {
// 添加新增按钮
handleAdd (data) {
this.$emit('addItem', data)
},
// 点击删除按钮
handleDelete (data) {
this.$emit('deleteItem', data)
},
// 点击编辑按钮
handleEdit (data) {
this.selectItem = data
this.$emit('editItem', JSON.parse(JSON.stringify(data)))
},
// ============== 组件内事件 结束=============
// ============== -----------------------------------父组件回调事件 开始=============
// 添加新记录,树形列表回显
treeAddItem (data) {
this.$refs.tree.append(data, data.parentUid)
},
// 选中事件
handleNodeClick (data) {
this.$emit('handleNodeClick', data)
},
// 删除节点
treeDeleteItem (val) {
this.$refs.tree.remove(val)
},
// 修改记录,树形列表回显
treeEditItem (val) {
Object.assign(this.selectItem, val)
this.selectItem = {}
}
// ============== 父组件回调事件 结束=============
}
}
</script>
<style lang="scss" scoped>
.white-body-view {
width: 100%;

最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



