vue实现树形结构增删改查的示例代码

其实很多公司都会有类似于用户权限树的增删改查功能,正好最近我刚写了一个树形结构的增删改,在这里和大家分享一下,如果有不合理的地方欢迎评论,我会尽快优化~~ 先附上一下效果图

这个是没有点击编辑时,产品的需求是选中某个节点,取得该节点对应的设备数据,所以初始页面是下面这个样子的。

这个是点击了编辑之后,显示节点的编辑按钮

点击最上面的添加按钮,显示最外层父节点的添加画面

修改节点名称

因为我们的需求是编辑与非编辑两种状态,所以我用了两个树形组件,通过v-if进行控制。(v-if:该组件不存在,v-show:组件占用空间,只是不展示)

<el-tree
    v-if="treeSetData.editFlg"
     ref="tree"
     :key="treeSetData.tree_key"
     :data="treeSetData.treeData"
     node-key="id"
     :render-content="renderContent"
     :expand-on-click-node="false"
     :default-expand-all="treeSetData.defaultExpandAll"
     highlight-current
     @node-click="handleNodeClick"
     class="tree-style"
 ></el-tree>
 <el-tree
     v-else
     ref="tree"
     :key="treeSetData.tree_key"
     :data="treeSetData.treeData"
     node-key="id"
     :render-content="renderContent"
     :expand-on-click-node="false"
     :default-expand-all="treeSetData.defaultExpandAll"
     highlight-current
     class="tree-style"
 ></el-tree>

树形组件的字段说明我就不一一赘述了,可以通过element-ui的树形组件官网查看,但是我要单独说明一下以下方法,

  • render-content:自定义节点内容,renderContent:为方法名。
  • @node-click:节点点击时调用,因为只有在非编辑状态下才存在节点点击效果,因此该方法我只写在了非编辑的树形组件内

所需data说明

// 树形结构所需数据
treeSetData:{
  defaultExpandAll:true, // 是否默认展开
  editFlg:true, // 是否是编辑状态
  treeData: [], // 树形组件数据集
  // 编辑树形数组内容
  editList:[],
  // 删除树形数据数组内容
  deleteList:[],
  // 添加树形数据数组内容
  addList:[],
  // 是否添加flg
  addNodeFlg:false,
  // 默认的id
  defaultId:5000,
  // 新增的最外层节点名称
  newName:'',
  tree_key: 0,
},

说明一下最外层节点的添加方法,其实主要的核心思想是控制下方的输入框以及按钮的展示与否,然后点击确认按钮之后,在原有的树形组件data里新增一条数据。

实现画面

添加按钮的html代码

<el-button type="text" @click="add_new_Area" class="button-style"><i class="el-icon-plus" style="margin-right:5px"></i>添加</el-button>

添加按钮点击方法【add_new_Area】

add_new_Area() {
      this.treeSetData.addNodeFlg = true;
    },

文本框的代码片段

<el-row class="add_question" v-show="treeSetData.addNodeFlg">
    <el-col :span="11" style="margin:0px 5px">
         <el-input v-model="treeSetData.newName" placeholder="通行区域" size="mini"></el-input>
     </el-col>
     <el-col :span="12">
         <el-button size="mini" type="primary" plain @click.stop="add_area_sure">确定</el-button>
         <el-button size="mini" type="warning" plain @click.stop="add_area_cancel">取消</el-button>
     </el-col>
 </el-row>

确认按钮【add_area_sure】

add_area_sure() {
// 添加节点数据,因为是最上层,所以默认父ID是pid,id的话是我初始化设置的【defaultId】的自加,大家自己在data中加一下【defaultId】字段就可以了
  const nodeObj = {
    id: this.treeSetData.defaultId++,
    name: this.treeSetData.newName,
    isEdit: false,
    children: [],
    pid:0
  };
  this.treeSetData.treeData.push(nodeObj);
  this.treeSetData.addNodeFlg = false;
  this.treeSetData.addList.push(nodeObj);
},

取消按钮【add_area_cancel】

add_area_cancel() {
  this.treeSetData.addNodeFlg = false;
  this.treeSetData.newName = "";
},

至此就可以实现最外层节点的添加了。

编辑状态下的几点增删改的话,其实就是通过自定义节点内容的【renderContent】这个方法实现的,快下班了我就不一一说明了,有时间再补吧,先把主要代码提出来~

// 通行区域树操作group node,
    renderContent(h, { node, data, store }) {
        if(this.treeSetData.editFlg == false){
            return (
                <span class="tree-span">
                    <span>{this.showOrEdit(data)}</span>
                    <div class="tree_node_op">
                        <i class="el-icon-edit" on-click={ev => this.nodeEdit(ev, store, data)} style="padding-left: 10px;"></i>
                        <i class="el-icon-circle-plus" on-click={() => this.nodeAdd(node, data)} style="margin-left: 5px;"></i>
                        <i class="el-icon-remove" on-click={() => this.nodeDelete(node, data)} style="margin-left: 5px;"></i>
                    </div>
                </span>
            );
        } else {
            return (
                <span class="tree-span">
                    <span>{this.showOrEdit(data)}</span>
                    <div class="tree_node_op">
                    </div>
                </span>
            );
        }
    },

    // 节点编辑
    showOrEdit(data) {
      if (data.isEdit) {
        return (
          <el-input
            type="text"
            value={data.name}
            on-blur={ev => this.edit_sure(ev, data)}
            size="mini"
            class="input-style"
          ></el-input>
        );
      } else {
        return <span className="node_labe">{data.name}</span>;
      }
    },
    nodeEdit(ev, store, data) {
      data.isEdit = true;
      this.$nextTick(() => {
        const $input =
          ev.target.parentNode.parentNode.querySelector("input") ||
          ev.target.parentElement.parentElement.querySelector("input");
        !$input ? "" : $input.focus();
      });
    },

    // 确认编辑
    edit_sure(ev, data) {
        const $input =
            ev.target.parentNode.parentNode.querySelector("input") ||
            ev.target.parentElement.parentElement.querySelector("input");
        if (!$input) {
            return false;
        } else {
            data.name = $input.value;
            data.isEdit = false;
        }
        // 修改编辑树形数据的内容
        let editFilter = this.treeSetData.editList.filter((item)=>item.id == data.id);
        if (editFilter.length == 0){
            this.treeSetData.editList.push(data);
        } else {
            this.treeSetData.editList.forEach((item,i)=>{
                if(item.id == data.id) {
                    this.treeSetData.editList[i].name = data.name;
                }
            })
        }
    },

    // 增加节点
    nodeAdd(node, data) {
      if (data.pid !== 0){
        this.$message({type:'error',message:'通行区域最多只能有两级层次结构。'});
        return false;
      } else {
          const newChild = { id: this.treeSetData.defaultId++, name: '新增的通行区域', isEdit:false, pid:data.id, children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
          this.treeSetData.addList.push(newChild);
      }
    },

    // 节点删除
    nodeDelete(node, data) {
      this.treeSetData.deleteList.push(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);
    },

然后将上面处理完的数据(要增加的数据:addList,要修改的数据:editList,要删除的数据:deleteList)整体提交给后台去做数据库处理就可以了,但是需要注意一下以下的几种情况。

// 先添加,后修改的数据整合
this.treeSetData.addList.forEach((item,i)=>{
    let editFilter = this.treeSetData.editList.filter((value)=>value.id == item.id);
    if(editFilter.length !== 0){
        this.treeSetData.addList[i] = editFilter[0];
        this.treeSetData.editList = this.treeSetData.editList.filter((value)=>value.id !== item.id);
    }
})
// 先添加,后删除的数据整合
this.treeSetData.deleteList.forEach((item,i)=>{
    let addFilter = this.treeSetData.addList.filter((value)=>value.id == item.id);
    if(addFilter.length !== 0){
        this.treeSetData.deleteList = this.treeSetData.deleteList.filter((value)=>value.id !== item.id);
        this.treeSetData.addList = this.treeSetData.addList.filter((value)=>value.id !== item.id);
    }
})
// 先编辑,后删除的数据整合
this.treeSetData.deleteList.forEach((item,i)=>{
    let editFilter = this.treeSetData.editList.filter((value)=>value.id == item.id);
    if(editFilter.length !== 0){
        this.treeSetData.editList = this.treeSetData.editList.filter((value)=>value.id !== item.id);
    }
})

树形组件样式

<style lang="less">
.el-message-box {width: 450px;}
.button-style {padding: 0px}
.input-style {height: 15px;width: 140px;}
.through-panel-body {
  padding-top:12px;
  width: 100%;
  display: flex;
  .panel-area-left {
    position: relative;
    width: 360px;
    border:2px solid rgba(240,240,240,1);
    border-radius: 5px;
    .head-title {
        display:flex;justify-content: space-between;padding:10px 10px;
        h5{border-left:solid 3px #FB8742;padding-left:5px;height: 20px;line-height:20px;font-size:16px;}
    }
    .area-tree {
        width: 100%;
        .tree-style {
            margin: 0px 0px 10px 10px;
            height:88%;
            overflow-y: auto;
        }
        .el-tree-node__content {
            padding-left: 10px;display: flex;width: 100%;
            .tree-span {
                display: flex; width: 100%;
                .tree_node_op {
                    margin-left: 10px;color: #D3D3D3;
                }
            }
        }
    }
    .add_question {
        margin: 10px 0px;
    }
    .foot-style{
        padding-right:5px;
        height: 40px;
        text-align: right;
    }
  }
  .panel-area-right {
    margin-right: 5px;
    width: 100%;
    padding-left: 15px;
    height: 100%;
    .el-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .located-class {
        width: 50%;
      }
      .device-floor-class {
        width: 50%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>

到此这篇关于vue实现树形结构增删改查的示例代码的文章就介绍到这了,更多相关vue 树形结构增删改查内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue.js与element-ui实现菜单树形结构的解决方法

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

  • VUE 无限层级树形数据结构显示的实现

    目录 组件递归调用 使用render方法 在做项目中,会遇到一些树形的数据结构,常用在左侧菜单导航,或者评论引用等地方,这种数据结构有个特点是不知道它会嵌套多少层,所以用template去展示这样的数据时就有点棘手,这篇文章梳理两种展示这种数据结构的方法. 文章中用到的数据是下面这个: mainData: { value: "root", children:[{ value: "层级1-1", children:[{ value: "层级2-1"

  • vue树形结构获取键值的方法示例

    本文介绍了vue树形结构获取键值的方法示例,分享给大家,具体如下: 把键值文件放入 引入控件 import { getTypeValue } from '@/api/dict/dictValue/index'; 点击搜索,打开弹窗 <el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"> <el-input readonly type="text&qu

  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta

  • vue开发树形结构组件(组件递归)

    本文实例为大家分享了vue开发树形结构组件的具体代码,供大家参考,具体内容如下 需求 一个页面,要显示商品分类,同时每个分类下面还拥有若干子类,子类也可以有子类. 要实现全选单选,子类被逐个全选父类也要标记选中. 第一反应就是树形结构,和递归调用.曾经在做WPF时记得有现成的组件,也学着写过对应的后台.这次我要自己写一个前端的组件了. 这只是我自己花了点时间写的一个vue组件,尚可优化及拓展.仅此与大家分享一下. 效果 实现 <template> <div id="TreeMe

  • vue实现的树形结构加多选框示例

    本文实例讲述了vue实现的树形结构加多选框.分享给大家供大家参考,具体如下: 前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组里push选项,并在左边显示出来,然后左边进行拖拽排序,拖拽排序上一篇文章我已经介绍过了,在这我就不介绍了,如何用阿里巴巴矢量图标库我也有相关文章,也不介绍了,本节主要介绍vue树形结构加多选框,并实现一定的逻辑,比如全选,单选,全选和单选之间的联动 先看下目录结构 下面我直接贴下代码 首先是pages文件夹中tree.vue页面中引用

  • vue实现树形结构样式和功能的实例代码

    一.主要运用element封装的控件并封装成组件运用,如图所示 代码如图所示: 下面是子组件的代码: <template> <ul class="l_tree"> <li class="l_tree_branch" v-for="item in model" :key="item.id"> <div class="l_tree_click"> <butt

  • vue实现树形结构增删改查的示例代码

    其实很多公司都会有类似于用户权限树的增删改查功能,正好最近我刚写了一个树形结构的增删改,在这里和大家分享一下,如果有不合理的地方欢迎评论,我会尽快优化~~ 先附上一下效果图 这个是没有点击编辑时,产品的需求是选中某个节点,取得该节点对应的设备数据,所以初始页面是下面这个样子的. 这个是点击了编辑之后,显示节点的编辑按钮 点击最上面的添加按钮,显示最外层父节点的添加画面 修改节点名称 因为我们的需求是编辑与非编辑两种状态,所以我用了两个树形组件,通过v-if进行控制.(v-if:该组件不存在,v-

  • c#对XML文档的创建与增删改查的示例代码

    一.创建的第一种方式 //1.创建一个XML文档 XmlDocument doc = new XmlDocument(); //2.创建第一行描述信息 XmlDeclaration dec = doc.CreateXmlDeclaration("1.0", "utf-8", null); //3.将创建的第一行描述信息添加到文档中 doc.AppendChild(dec); //4.给文档添加根节点 XmlElement Books = doc.CreateElem

  • 基于PHP实现原生增删改查的示例代码

    目录 一.代码 1.sql 2.列表页(index.php) 3.delete.php 4.update.php 5.create.php 二.效果图 一.代码 1.sql -- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: 2022-03-19 19:16:40 -- 服务器版本:10.1.13-MariaDB -- PHP

  • ASP.NET实现Hadoop增删改查的示例代码

    本文介绍了ASP.NET实现Hadoop增删改查的示例代码,分享给大家,具体如下: packages.config <?xml version="1.0" encoding="utf-8"?> <packages> <package id="Microsoft.AspNet.WebApi.Client" version="4.0.20505.0" targetFramework="net

  • Python连接Mysql进行增删改查的示例代码

    Python连接Mysql 1.安装对应的库 使用Python连接Mysql数据库需要安装相应的库 以管理员身份运行cmd,输入命令 pip install mysql.connector 安装完成后建立 test.py 写入 import mysql.connector 保存后运行 python test.py 用以测试模块库是否安装完成,如果不报错,说明安装完成 2.进行连接测试 编写connectTest.py文件 文件内容: import mysql.connector connect

  • Python连接mysql数据库及简单增删改查操作示例代码

    1.安装pymysql 进入cmd,输入 pip install pymysql: 2.数据库建表 在数据库中,建立一个简单的表,如图: 3.简单操作 3.1查询操作 #coding=utf-8 #连接数据库测试 import pymysql #打开数据库 db = pymysql.connect(host="localhost",user="root",password="root",db="test") #使用cursor

  • spring boot集成mongodb的增删改查的示例代码

    添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> properties配置 spring.data.mongodb.host=127.0.0.1 spring.data.mongodb.port=27017 spring

  • Go语言实现切片增删改查的示例代码

    目录 引言 一.切片的基础语法 1. 语法 2. 示例 3. 切片的长度和容量 二.切片的初始化 1. 直接初始化 2. 使用数组初始化 3. 使用数组的部分元素初始化(切片表达式) 4. 空(nil)切片 三.切片的遍历 1. for 循环遍历 2. for range遍历 四.切片元素的添加和删除copy 1. 添加元素 2. 删除元素 3. 修改切片元素 4. 查找切片元素 5. 拷贝切片 引言 Golang 的数组是固定长度,可以容纳相同数据类型的元素的集合. 但是当长度固定了,在使用的

  • Python+Django+MySQL实现基于Web版的增删改查的示例代码

    前言 本篇使用Python Web框架Django连接和操作MySQL数据库学生信息管理系统(SMS),主要包含对学生信息增删改查功能,旨在快速入门Python Web,少走弯路.效果演示在项目实战最后一节,文章结尾有整个项目的源码地址. 开发环境 开发工具:Pycharm 2020.1 开发语言:Python 3.8.0 Web框架:Django 3.0.6 数据库:MySQL5.7 操作系统:Windows 10 项目实战 1. 创建项目 File->New Project->Django

  • 基于Koa(nodejs框架)对json文件进行增删改查的示例代码

    想使用nodejs(koa)搭建一个完整的前后端,完成数据的增删改查,又不想使用数据库,那使用json文件吧. 本文介绍了基于koa的json文件的增.删.改.查. 代码准备 const Koa = require('koa') const bodyParser = require('koa-bodyparser') const Router = require('koa-router') const fs = require('fs') const path = require('path')

随机推荐