首页 前端知识 【vue】el-tree的新增/编辑/删除节点

【vue】el-tree的新增/编辑/删除节点

2024-05-10 22:05:24 前端知识 前端哥 872 425 我要收藏

1、概述

关于树形结构的新增同级节点新增子级节点修改节点名称删除节点等四种操作,各种参数配置完全继承el-tree,本篇使用vue2 + element-ui

2、效果图展示

3、调用方式

<template>
    <Tree
        :data="treeData"
        :props="defaultProps"
        :default-expanded-keys="expandedKeys"
        node-key="id"
        highlight-current
        :highligh-color="highlighColor"
        :show-btn-group="showBtnGroup"
        :draggable="true"
        @node-click="nodeClick"
        @editNodeSubmit="addNode"
        @deleteNodeSubmit="deleteNode"
        @node-drag-end="handleDragEnd"
      />
</template>      

<script>
export default {
    name: 'Tree',
    data() {
        return {
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          expandedKeys: [], // 展开节点
          highlighColor: {
            color: '#FFAE0D',
            bgColor: 'rgba(255, 174, 13, .1)'
          },
          showBtnGroup: true,
          treeData: []
        }
    }
}
</script>

4、源码解析

<template>
  <el-tree
    ref="tree"
    :class="[
      'menu-el-tree',
      iconStyle.src && 'menu-expand-icon',
      highlighColor && 'menu-node-highligh'
    ]"
    :style="{
      '--bgUrl': 'url(' + iconStyle.src + ')',
      '--iconWidth': iconStyle.width,
      '--iconHeight': iconStyle.height,
      '--iconTransform': iconStyle.transform,
      '--hoverColor': hoverStyle.color,
      '--hoverBgColor': hoverStyle.bgColor,
      '--highlighColor': highlighColor.color,
      '--highlighBgColor': highlighColor.bgColor
    }"
    node-key="id"
    :draggable="draggable"
    :allow-drag="allowDrag"
    :expand-on-click-node="expandOnClickNode"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-slot="{ node, data }">
      <div v-if="!data.isEdit" class="custom-tree-node-root" @mouseenter="nodeMouseEnter(node)" @mouseleave="nodeMouseLeve(node)">
        <span class="custom-tree-node">{{ node.label }}</span>
        <section v-show="node.showBtn" class="tree-btn-group">
          <el-tooltip
            v-for="item in btnGroup"
            :key="item"
            effect="light"
            placement="top"
            popper-class="common-tooltip-primary"
            :content="{
              'addChild': '新增子级',
              'delete': '删除',
              'edit': '修改',
              'addSibling': '新增同级'
            }[item]"
          >
            <i
              :class="{
                'addChild': 'el-icon-circle-plus-outline',
                'delete': 'el-icon-circle-close',
                'edit': 'el-icon-edit',
                'addSibling': 'el-icon-plus'
              }[item]"
              @click.stop="() => handleOperaion(item, node, data)"
            />
          </el-tooltip>
        </section>
      </div>
      <div v-else class="custom-tree-node-root-edit">
        <el-input v-model="inputValue" :size="editInputStyle.size" :style="{ width: editInputStyle.width }" />
        <section :id="data.id">
          <el-tooltip
            content="确定"
            popper-class="common-tooltip-primary"
            effect="light"
            placement="top"
          >
            <i class="el-icon-success" @click.stop="() => editMenuSubmit(node, data)" />
          </el-tooltip>
          <el-tooltip
            content="取消"
            popper-class="common-tooltip-primary"
            effect="light"
            placement="top"
          >
            <i class="el-icon-error" @click.stop="() => addSiblingCancel(node, data)" />
          </el-tooltip>
        </section>
      </div>
    </template>
  </el-tree>
</template>
<script>
export default {
  name: 'MenuTree',
  inheritAttrs: true,
  props: {
    hoverStyle: {
      type: Object,
      default: () => ({
        color: '#606266',
        bgColor: '#F5F7FA'
      })
    },
    /**
     * @description 当前行选中高亮颜色配置
     */
    highlighColor: {
      type: Object,
      default: () => ({
        color: '#606266',
        bgColor: '#fff9ec'
      })
    },
    /**
     * @description 动态左侧图标配置(图片格式)
     */
    iconStyle: {
      type: Object,
      default: () => ({
        src: '',
        width: '20px',
        height: '17px',
        transform: 'rotate(270deg)'
      })
    },
    /**
     * @description 操作按钮组
     * addChild => 新增子级,delete => 删除, edit => 修改, addSibling => 新增同级
     */
    btnGroup: {
      type: Array,
      default: () => ['edit', 'addSibling', 'addChild', 'delete']
    },
    /**
     * @description 是否展示操作按钮
     */
    showBtnGroup: {
      type: Boolean,
      default: false
    },
    /**
     * @description 编辑模式输入框样式
     */
    editInputStyle: {
      type: Object,
      default: () => ({
        size: 'mini',
        width: '200px'
      })
    },
    /**
     * 是否可拖拽
     */
    draggable: {
      type: Boolean,
      default: false
    },
    /**
     * 是否在点击节点的时候展开或者收缩节点
     * 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。
     */
    expandOnClickNode: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    /**
     * @description 鼠标移入目录层级
     */
    nodeMouseEnter(data) {
      if (!this.showBtnGroup) return;
      this.$set(data, 'showBtn', true)
    },
    /**
     * @description 鼠标移除目录层级
     */
    nodeMouseLeve(data) {
      if (!this.showBtnGroup) return;
      this.$set(data, 'showBtn', false)
    },
    /**
     * 当前目录操作分发
     * @param {string} eventKey 事件名称
     * @param {object} currentNode 当前Node节点内容
     * @param {object} data 当前节点数据
     */
    handleOperaion(eventKey, currentNode, data) {
      console.log(currentNode, data, 'menuRoot');
      switch (eventKey) {
        case 'addSibling':
          this.addSibling(currentNode, data);
          break;
        case 'edit':
          this.editTreeItem(data);
          break;
        case 'addChild':
          this.addChild(currentNode, data);
          break;
        case 'delete':
          this.deleteTreeItem(currentNode, data);
          break;
      }
    },
    /**
     * @description 编辑当前节点
     */
    editTreeItem(data) {
      this.$set(data, 'isEdit', true);
      this.inputValue = data.label; // 当前正在编辑内容赋值
      this.$nextTick(() => {
        document.getElementById(data.id).previousElementSibling.firstElementChild.focus();
      })
    },
    /**
     * @description 添加同级节点
     */
    addSibling(currentNode, data) {
      const treeDOM = this.$refs.tree;
      const id = Math.ceil(Math.random() * 100)
      const newData = { id: id, pId: data.pId, label: '', isEdit: true, isNew: true, children: [] };
      treeDOM.insertAfter(newData, currentNode);
      // 聚焦当前新增目录
      this.$nextTick(() => {
        document.getElementById(newData.id).previousElementSibling.firstElementChild.focus();
      })
    },
    /**
     * @description 添加子级节点
     */
    addChild(currentNode, data) {
      const treeDOM = this.$refs.tree;
      const id = Math.ceil(Math.random() * 100)
      const newData = { id: id, pId: data.id, label: '', isEdit: true, isNew: true, children: [] };
      treeDOM.append(newData, currentNode);
      // 展开子节点后才能获取DOM聚焦
      treeDOM.store.nodesMap[data.id].expanded = true;
      setTimeout(() => {
        document.getElementById(newData.id).previousElementSibling.firstElementChild.focus();
      }, 500)
    },
    /**
     * @description 编辑模式修改确认
     */
    editMenuSubmit(node, data) {
      this.$emit('editNodeSubmit', {
        node,
        data,
        currentLabel: this.inputValue,
        // 新增同级/子级节点接口调用成功的话,即新增同级/子级节点
        callback: (status) => {
          if (status) {
            this.resetNode()
          }
        }
      });
    },
    /**
     * @description 删除当前节点
     */
    deleteTreeItem(node, data) {
      this.$emit('deleteNodeSubmit', {
        node,
        data,
        callback: (status) => {
          // 删除接口调用成功的话,即删除节点
          if (status) {
            const treeDOM = this.$refs.tree;
            treeDOM.remove(node);
          }
        }
      });
    },
    /**
     * @description 取消同级节点添加
     */
    addSiblingCancel(node, data) {
      // 如果是新增的节点,取消即是删除
      if (data.isNew) {
        const treeDOM = this.$refs.tree;
        treeDOM.remove(node);
      } else {
        // 重置修改内容
        this.inputValue = '';
        data.isEdit = false;
      }
    },
    /**
     * 寻找第一个叶子节点及叶子节点的父节点
     * @param {*} tree 平铺数组
     */
    findFirstChildAndParent(tree) {
      let firstChild = null;
      let parentOfFirstChild = null;
      const dfs = (node, parent) => {
        if (firstChild !== null) {
          return; // 如果已经找到了第一个子节点,则不再继续搜索
        }
        if (node.children && node.children.length > 0) {
          // eslint-disable-next-line
          for (const child of node.children) {
            dfs(child, node);
          }
        } else {
          firstChild = node;
          parentOfFirstChild = parent;
        }
      }
      // eslint-disable-next-line
      for (const node of tree) {
        dfs(node, null);
      }
      return {
        firstChild,
        parentOfFirstChild
      };
    },
    /**
     * 获取自身树结构实例
     */
    getTree() {
      return this.$refs.tree;
    },
    /**
     * 重置节点数据
     */
    resetNode() {
      this.inputValue = '';
    },
    /**
     * 寻找节点对应的父级节点
     * @param {*} tree
     * @param {*} nodeId
     */
    findParentByChildId(tree, nodeId) {
      let parentOfFirstChild = null;
      const dfs = (node, parent) => {
        if (parentOfFirstChild !== null) {
          return;
        }
        if (node.children && node.children.length > 0) {
          // eslint-disable-next-line
          for (const child of node.children) {
            dfs(child, node);
          }
        } else {
          // 找到对应节点后,返回其父节点
          if (node.id === nodeId) {
            parentOfFirstChild = parent;
          }
        }
      }
      // eslint-disable-next-line
      for (const node of tree) {
        dfs(node, null);
      }
      return parentOfFirstChild
    },
    /**
     * 允许拖动的节点
     * @param {*} draggingNode 拖动节点
     */
    allowDrag(draggingNode) {
      // 不处于编辑状态
      return !draggingNode.data.isEdit
    }
  }
}
</script>
<style scoped lang="scss">
// 动态配置右侧图标
.menu-expand-icon {
  ::v-deep .el-tree-node__expand-icon:not(.is-leaf) {
    &::before {
      background: var(--bgUrl);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      content: '';
      width: var(--iconWidth);
      height: var(--iconHeight);
      display: inline-block;
      transform: var(--iconTransform);
    }
  }
}
// 动态配置hover样式
.menu-el-tree {
  ::v-deep .el-tree-node__content {
    &:hover {
      background: var(--hoverBgColor);
      color: var(--hoverColor);
    }
  }
  .custom-tree-node-root {
    display: flex;
    align-items: center;
    flex: 1;
    .tree-btn-group {
      margin-left: 15px;
      display: flex;
      align-items: center;
      column-gap: 8px;
      i {
        font-size: 15px;
        &:hover {
          color: $primary
        }
      }
    }
  }
}
.menu-node-highligh.el-tree--highlight-current {
  ::v-deep .el-tree-node.is-current>.el-tree-node__content {
    background: var(--highlighBgColor);
    color: var(--highlighColor);
  }
}
.custom-tree-node-root-edit {
  display: flex;
  align-items: center;
  .el-input, ::v-deep .el-input .el-input__inner {
    height: 26px;
  }
  section {
    i {
      margin-left: 10px;
      font-size: 15px;
      color: $primary;
    }
  }
}
</style>

5、疑难解答

1、拖拽节点时,如何监听和区分拖拽事件?

使用的是el-tree内置的node-drag-end事件,当拖拽完成时触发,抛出四个参数

* @param {*} draggingNode 被拖拽的节点

 * @param {*} dropNode 最后进入的节点

 * @param {*} dropType 相对比的位置

 * @param {*} ev 事件

2、新增和删除节点,如何再触发后端接口后再执行节点的新增和删除?

节点新增和删除执行下列两个事件

@editNodeSubmit="addNode"

@deleteNodeSubmit="deleteNode"

他们回调的最后一个参数都是callback,当callback(true)传入为true时,则代表接口成功,则进行后续的树节点操作。

------有不懂的或建议欢迎直接评论噢~------

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7978.html
标签
评论
发布的文章

HTML5(H5)中的Web Workers

2024-05-19 09:05:52

HTML5

2024-02-27 11:02:15

HTML5 <option> 标签

2024-05-19 09:05:51

@JsonProperty 注解详解

2024-05-19 09:05:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!