element-- el-tree 组件封装使用( 新增、编辑、删除节点)

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

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%;
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

左手牵♪♡右手

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值