封装了一个树形组件 实现添加自定义节点、上移、下移

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量838 收藏 8
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43482627/article/details/109463087
版权

效果展示

在这里插入图片描述

实例代码

<template>
  <div id="organizingStaff" class="flex-box">
    <div class="remark">
      <span>
        tips: <i class="el-icon-remove"></i>删除节点，
        <i class="el-icon-circle-plus"></i>添加节点，
        <i class="el-icon-top"></i>上移， <i class="el-icon-bottom"></i>下移，
        <i class="el-icon-user-solid"></i>用户
      </span>
    </div>
    <div style="width: 100%" class="flex-column">
      <el-tree
        ref="menutree"
        class="tree"
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="remove(node, data)">
              <i class="el-icon-remove"></i>
            </el-button>
            <el-button
              v-if="data.type == 'BM'"
              type="text"
              size="mini"
              @click="editNode(data)"
            >
              <i class="el-icon-circle-plus"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="menuMoveF(node, data, 'up')"
            >
              <i class="el-icon-top"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="menuMoveF(node, data, 'down')"
            >
              <i class="el-icon-bottom"></i>
            </el-button>
            <el-button
              v-if="data.type == 'BM'"
              type="text"
              size="mini"
              @click="choseUser(data)"
            >
              <i class="el-icon-user-solid"></i>
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <el-dialog
      title="新建节点"
      :visible.sync="nodeDialog"
      width="50%"
      append-to-body
    >
      <el-form ref="form" label-width="80px" size="mini">
        <el-form-item label="节点名称：" label-width="100px">
          <el-input placeholder="请输入节点名称" v-model="nodeName"></el-input>
        </el-form-item>
        <el-form-item
          label-width="40px"
          style="float: right; margin-top: -10px"
        >
          <el-button
            type="primary"
            round
            icon="el-icon-circle-check"
            @click="append(nodeData)"
            >确定</el-button
          >
          <el-button
            type="primary"
            round
            icon="el-icon-delete"
            @click="nodeDialog = false"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="选择用户"
      :visible.sync="userDialog"
      width="60%"
      append-to-body
    >
      <el-form
        ref="form"
        inline
        :model="userForm"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="姓名：" label-width="100px">
          <el-input
            style="width: 150%"
            placeholder="请输入姓名"
            v-model="userForm.userName"
          ></el-input>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" round icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="userTable"
        :data="userTable"
        border
        style="width: 100%"
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="dept" label="部门"></el-table-column>
      </el-table>
      <el-form size="mini" style="float: right">
        <el-form-item label-width="40px">
          <el-button
            type="primary"
            round
            icon="el-icon-circle-check"
            @click="editUser(userNodeData)"
            >确定</el-button
          >
          <el-button
            type="primary"
            round
            icon="el-icon-delete"
            @click="userDialog = false"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import CircularJSON from "circular-json";
let id = 1000;
export default {
  name: "organizingStaff",
  data() {
    return {
      userSelection: [],
      userTable: [
        {
          userName: "张三",
          dept: "综合管理部",
        },
        {
          userName: "李四",
          dept: "综合管理部",
        },
        {
          userName: "王五",
          dept: "综合管理部",
        },
      ],
      userForm: {},
      userDialog: false,
      nodeDialog: false,
      nodeName: "",
      nodeData: undefined,
      userNodeData: undefined,
      treeData: [
        {
          id: 1,
          label: "公司领导",
          type: "BM",
          children: [
            {
              id: 2,
              label: "二级 1-1",
              type: "BM",
              children: [
                {
                  id: 3,
                  label: "三级 1-1-1",
                  type: "RY",
                },
              ],
            },
          ],
        },
        {
          id: 4,
          label: "公司中层",
          type: "BM",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              type: "RY",
            },
          ],
        },
      ],
    };
  },
  watch: {},
  created() {},
  methods: {
    //添加节点
    append(data) {
      if (
        this.nodeName == undefined ||
        this.nodeName == "" ||
        this.nodeName == null
      ) {
        this.$message.warning("请输入节点名称");
        return;
      }
      const newChild = {
        id: id++,
        label: this.nodeName,
        type: "BM",
        children: [],
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
      this.nodeDialog = false;
    },
    //移除节点
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    editNode(data) {
      this.nodeName = "";
      this.nodeDialog = true;
      this.nodeData = data;
    },
    // 移动点击函数(node：当前节点，data：当前节点的data，type：区分上下移动)
    menuMoveF(node, data, type) {
      // 将变动之前的node备份
      let copyNode = { ...node };
      copyNode.previousSibling = { ...node.previousSibling };
      copyNode.nextSibling = { ...node.nextSibling };
      window.sessionStorage.setItem(
        "menuNode",
        CircularJSON.stringify(copyNode)
      );
      let nodeData = {};
      if (type === "up") {
        // 上移
        if (node.previousSibling) {
          // 删除原先的node
          this.$refs.menutree.remove(node.data);
          // 拿到copy的node
          nodeData = CircularJSON.parse(
            window.sessionStorage.getItem("menuNode")
          );
          // 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)
          this.$refs.menutree.insertBefore(
            nodeData.data,
            nodeData.previousSibling.data
          );
          window.sessionStorage.removeItem("menuNode");
        } else {
          this.$message.warning("该菜单已经是当前层最上级");
        }
      } else {
        // 下移
        if (node.nextSibling) {
          this.$refs.menutree.remove(node.data);
          nodeData = CircularJSON.parse(
            window.sessionStorage.getItem("menuNode")
          );
          // 参数：1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node
          this.$refs.menutree.insertAfter(
            nodeData.data,
            nodeData.nextSibling.data
          );
          window.sessionStorage.removeItem("menuNode");
        } else {
          this.$message.warning("该菜单已经是当前层最下级");
        }
      }
    },
    choseUser(data) {
      this.userNodeData = data;
      this.userDialog = true;
      this.userSelection = [];
      this.$refs.userTable.clearSelection();
    },
    //选择的用户
    handleSelectionChange(val) {
      this.userSelection = val;
    },
    editUser(data) {
      this.userSelection.forEach((item) => {
        const newChild = {
          id: id++,
          label: item.userName,
          type: "RY",
        };
        data.children.push(newChild);
      });
      this.userDialog = false;
    },
  },
};
</script>

<style scoped>
.flex-box {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100%;
}
.flex-column {
  height: 100%;
}
.tree {
  position: relative;
  width: 500px;
  margin: 0.5rem 0 0 5rem;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  padding-right: 8px;
}
.remark {
  margin: 1rem 0 0 6rem;
}
.remark >>> i {
  color: #40a0ff;
}
</style>

注意

实现上移、下移功能使用了circular-json，所以需要安装一下。执行以下命令

npm i circular-json

代码都很基础，仔细看应该能看明白。

----------------------------------------❤----------------------------------------
点个赞，证明你来过~~
在这里插入图片描述

一个喜欢弹吉他的程序猿
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
JS做的树形菜单,自定义添加节点
12-11
用纯JS写的树形菜单，界面美观，操作方便。可自定义添加节点，节点图标&hellip;&hellip;
element tree 上移下移排序
WMW_wmw的博客
07-03 4584
对选中的tree做上下移动操作 需要下标判断当前的位置，用以判断上移下移的显示，和获取上下位置的tree的id 难点：目前不知道当前tree的下标 解决方法：tree有个node，可以获取当前tree所有内容，其中parent.childNodes 可以获取到当前tree的列表，对这个列表循环判断得出下标。 效果： 代码片段： <el-tree :data="data" :props="defaultProps" node-
elementui树实现拖拽，且只能同级之间上下拖拽，不允许拖拽到里面
zhengyun1568的博客
03-10 4672
<el-tree class="filter-tree" :data="dataChecked" :empty-text="emptyText" :props="defaultProps" default-expand-all draggable :allow-drop="collapse" :filter-node-method="filterNode" > </el-tree> data和methods中数据 dataChecked: [], d
原生html vue3使用element plus 的树tree上移下移案例源码
LlanyW的专栏
03-19 567
【代码】原生html vue3使用element plus 的树tree上移下移案例源码。
选中树，进行上下移动
ingenuou_的博客
03-30 129
【代码】选中树，进行上下移动。
elementUI Tree树节点上移下移操作
qq_26471641的博客
07-23 6256
基于VUE+elementUI Tree树节点上移下移操作 1.使用方法 首先，获取当前节点数据 this.$refs.tree.getCurrentNode(); 其次，a>获取该节点的父节点的所有子节点数组this.$refs.tree.parent.childNodes； b>遍历所有子节点，得到当前节点的在子节点数组中的索引， 上移：当前节点的上一个节点索引（index-1）；...
el-tree树形实现鼠标拖拽，以及通过点击上下移按钮实现tree节点上下移动
cabinx的博客
07-17 4664
el-tree树形实现鼠标拖拽，以及通过点击上下移按钮实现tree节点上下移动 1.业务需求： vue项目开发需求是：使用el-tree组件实现树形鼠标拖拽功能，并且在每一个树形节点的后面增加上移和下移的按钮，通过点击按钮实现节点上下移动。 2.解决方案： el-tree组件使用HTML如下（我使用的这种是可以自定义树形节点内容的写法）： <el-tree ref="menutree" :data="treeD
vue+element tree ----增加修改删除上下移动
我是我家小女孩
10-27 9221
用vue+element制作的树形 可以增加修改删除上下移动  &lt;template&gt; &lt;div&gt; &lt;div class="exam_structure"&gt; &lt;el-input placeholder="输入关键字进行过滤" v-model="filterText"&gt;
vue+element实现树形上下拖拽，快速提升你的前端技能
Shids_的博客
08-23 4494
vue+element实现树形上下拖拽，快速提升你的前端技能
vue+el-tree ----增加修改删除上下移动
qq_44716001的博客
06-08 671
【代码】vue+el-tree ----增加修改删除上下移动。
el-tree 异步树局部刷新（新增，删除，编辑，上下移动）
popstarqq的博客
09-07 2924
目录树数据绑定有两种方式，同步和异步。同步：一次性返回所有组织树数据，一次绑定；异步：点击节点，只返回该节点的第一级子节点数据进行绑定，其他节点数据需要点击对应的父节点获取； 同步树和异步树进行更新的方式自然也不同；比如实现如下增删改查上下移动操作 如果是同步树:对目录树进行增删改查操作后，要实现及时刷新效果，需要重新请求一次接口，然后通过设置展开属性 展开到编辑节点即可； 如果是异步树:目录树实现增删改查操作，要及时刷新效果，只能通过触发点击父节点load函数实现；怎么实现及时刷新效果呢；
VUE自定义树形结构组件.zip
04-21
vue可以自动以封装tree树形结构图，如高亮的背景色、字体颜色、树形图图标等。高亮demo使用的是name，如果有需要可以直接改为value
Bootstrap树形组件jqTree的简单封装
09-02
主要介绍了Bootstrap树形组件jqTree的简单封装，封装一个稍微完整点的树形组件，感兴趣的小伙伴们可以参考一下
vue element-ui之怎么封装一个自己的组件的详解
12-12
为什么要进行组件封装？ 封装的目的就是为了能够更加便捷、快速的进行业务...Vue中怎么封装一个自己的组件 想要封装好一个组件，必须要熟练掌握的三个技能：1.父组件传值到子组件（props） 2.子组件传值到父组件（$emi
Vue 实现树形结构非tree组件
11-26
Vue实现树形结构，不采用tree组件，利用循环方式得到；实现全选，勾选父节点自动勾选子节点，勾选子节点反勾选相应父节点功能
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 618
步骤很详细，直接上教程……
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 361
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue项目中异步组件的引入使用
Niucode的博客
04-26 249
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 272
vue echarts 柱状图 堆叠柱状图
原生Js封装一个树形组件
04-21
但如果您需要自己封装一个树形组件，可以考虑以下步骤： 1.设计数据结构：树形组件的核心是树形数据结构，您需要设计出一个能够表示树形结构的数据类型。可以使用 Object 表示树节点，每个节点包含若干个属性，例如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一个喜欢弹吉他的程序猿

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

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

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

打赏作者

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

抵扣说明：

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

余额充值