【无标题】

已于 2024-05-10 15:29:48 修改
阅读量156 收藏
点赞数 2
文章标签： vue.js elementui javascript
于 2024-05-10 15:24:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53461589/article/details/138667788
版权

vue2+饿了么el-tree实现可新增、编辑、删除、拖拽节点的树形结构el-tree

效果图1

在这里插入图片描述

代码1

<template>
  <div class="custom-tree-container">
    <div class="block"
      style="width:300px">
      <p>使用 scoped slot</p>
      <el-tree :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="nodeclick"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag">
        <span class="custom-tree-node"
          slot-scope="{ node, data }">
          <!-- 如果是编辑状态 -->
          <template v-if="data.isEdit==1">
            <el-input ref="input"
              @blur="() => submitEdit(node,data)"
              v-model="newApiGroupName"
              style="height:20px line-height:20px"></el-input>
            <!-- 放弃、提交按钮废弃，改为失去焦点自动提交 -->
            <!-- <el-button type="text"
              size="mini"
              @click="() => cancelEdit(node,data)">C</el-button>
            <el-button type="text"
              size="mini"
              @click="() => submitEdit(node,data)">S</el-button> -->
          </template>
          <!-- 如果不是编辑状态 -->
          <span v-else
            v-text="data.apiGroupName"></span>
          <span>
            <el-button v-if="data.id!=1"
              type="text"
              size="mini"
              @click="() => edit(node,data)">
              E
            </el-button>
            <el-button type="text"
              size="mini"
              @click="() => append(node,data)">
              +
            </el-button>
            <el-button v-if="data.id!=1"
              type="text"
              size="mini"
              @click="() => remove(node, data)">
              D
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import { getApiGroup } from '@/api/appium'
import { updateApiGroup } from '@/api/appium'

// let id = 1000
export default {
  name: 'appiumTree1',
  data() {
    return {
      data: [],
      newApiGroupName: '',
      defaultProps: {
        children: 'children',
        apiGroupName: 'apiGroupName'
      }
    }
  },
  created() {
    this.getApiGroupData()
  },
  methods: {
    // 调api获取接口分组数据
    getApiGroupData() {
      getApiGroup(1)
        .then(response => {
          this.data = response
          console.log('data:', this.data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleDragStart(node, ev) {
      console.log('drag start', node.data.apiGroupName)
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('tree drag enter: ', dropNode.data.apiGroupName)
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log('tree drag leave: ', dropNode.data.apiGroupName)
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log('tree drag over: ', dropNode.data.apiGroupName)
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log(
        'tree drag end: ',
        dropNode && dropNode.data.apiGroupName,
        dropType
      )
      // 调后端更新
      this.updateApiGroup(this.data)
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.data.apiGroupName, dropType)
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.id === 1) {
        return false
      } else {
        return true
      }
    },
    allowDrag(draggingNode) {
      // 顶层默认分组不允许拖拽
      if (draggingNode.data.id === 1) {
        return false
      } else {
        return true
      }
      // return draggingNode.data.apiGroupName.indexOf('三级 3-2-2') === -1
    },

    append(node, data) {
      // var pid = data.parentApiGroupId + ':' + data.id
      var timestamp = new Date().getTime()
      const newChild = {
        id: timestamp,
        isEdit: 0,
        apiGroupName: 'T' + timestamp,
        children: []
      }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
      this.updateApiGroup(this.data)
    },

    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)
      this.updateApiGroup(this.data)
    },

    edit(node, data) {
      console.log(
        'before:',
        data.id,
        // data.parentApiGroupId,
        data.apiGroupName,
        data.isEdit
      )
      this.$set(data, 'isEdit', 1)
      this.newApiGroupName = data.apiGroupName
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
      console.log('after:', data.id, data.apiGroupName, data.isEdit)
    },

    submitEdit(node, data) {
      // console.log('点击了保存按钮')
      if (data.apiGroupName == this.newApiGroupName) {
        console.log('没有修改')
        this.newApiGroupName = ''
        this.$set(data, 'isEdit', 0)
      } else {
        this.$set(data, 'apiGroupName', this.newApiGroupName)
        this.newApiGroupName = ''
        this.$set(data, 'isEdit', 0)
        // console.log('after:', data.id, data.apiGroupName)
        // console.log(this.data)
        this.updateApiGroup(this.data)
      }
    },

    cancelEdit(node, data) {
      // console.log('放弃编辑')
      // console.log(data.id, data.apiGroupName)
      this.newApiGroupName = ''
      this.$set(data, 'isEdit', 0)
    },

    updateApiGroup(data) {
      console.log(data)
      updateApiGroup(1, data)
        .then(response => {
          console.log(response)
        })
        .catch(err => {
          console.log(err)
        })
    },

    nodeclick(node, data, obj) {
      console.log('点击了：', node.id, node.apiGroupName)
      this.$store.dispatch('appium/changeApiGroupId', node.id)
      console.log(this.$store.getters.apiGroupId)
    }
  }
}
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 20px;
}
/* 修改el-input高度，方案一： */
/* 某些预处理器(sass)无法识别>>>，建议使用方案二 */
/* >>> .el-input__inner {
  height: 20px;
} */
/* 修改el-input高度，方案二： */
/deep/ .el-input__inner {
  height: 20px;
}
</style>

效果图2

在这里插入图片描述

代码2

<el-tree v-else :data="data" node-key="id" @node-click="nodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <!-- 如果是编辑状态 -->
                <template v-if="data.isEdit == 1">
                  <el-input clearable style="width: 100%; height: 32px; line-height: 32px" ref="input" v-model="data.label" />
                </template>
                <!-- 如果不是编辑状态 -->
                <span v-else v-text="data.label"></span>
                <span>
                  <el-button v-if="!firstIds.includes(data.id) && isEdit" type="text" size="mini" @click="() => remove(node, data)"
                    ><i class="el-icon-remove-outline"></i
                  ></el-button>
                </span>
              </span>
            </el-tree>

data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1"
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ], // 树形结构数据


updateApiGroup(data) {
      console.log(data);
    },
    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);
      this.updateApiGroup(this.data);
    },
    editAll() {
      this.isEdit = true;
      this.data.forEach((d) => {
        d.children.forEach((item) => {
          this.$set(item, "isEdit", 1);
        });
      });
    },
    submitEditAll() {
      this.isEdit = false;
      this.data.forEach((d) => {
        d.children.forEach((item) => {
          this.$set(item, "label", item.label);
          this.$set(item, "isEdit", 0);
        });
      });
      this.updateApiGroup(this.data);
    },
    nodeClick(node, data, obj) {
      console.log("点击了：", node.id, node.label);
      console.log(data, obj);
    },

::v-deep {
        .el-tree-node:focus > .el-tree-node__content {
          background: unset;
        }
        .el-tree-node__content {
          line-height: 32px;
          height: 32px;
          margin-bottom: 8px;
          &:hover {
            background: unset;
          }
          .is-leaf {
            display: none;
          }
        }
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 20px;
        span:first-child {
          color: #36425a;
          font-size: 14px;
        }
        ::v-deep .el-input {
          width: 220px !important;
          .el-input__inner:hover {
            border-color: var(--primary-color);
          }
        }
        .el-icon-remove-outline {
          color: #ced1d7;
          &:hover {
            color: var(--primary-color);
          }
        }
      }
      .el-tree-node__children {
        .custom-tree-node {
          span:first-child {
            color: #82868c;
            font-size: 14px;
          }
        }
      }
    }

保存接口在updateApiGroup函数写就行啦~~

monkey-papa
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
vc++取掉窗口的 -无标题 字样
无标题jsjshshhshshshs
05-09
无标题jsjshshhshshshs
Qt无标题窗口
05-21
一个比较简单的Qt无标题窗口，基本实现了现在默认窗口自带的功能，可以用于界面美化自绘标题栏。
无标题gitcdscvscvsd
10-20
无标题gitcdscvscvsd
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化和关闭窗口的功能，因此本程序自定义了一个关闭窗口的方法，那就是长按ESC键可关闭本窗口。 运行环境：Windows/Delphi7
Qt-无标题窗口
学而思
05-21 7235
        今天学习了下无标题窗口，于是来记录下我的学习过程首先建立一个Qt Widgets Application继承QWidget类创建完后直接运行就得到了如下效果那么，既然是无标题窗口就要去掉窗口栏啊，于是加上setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);去掉标题栏，但是这样整个窗口就不能移动...
C# 移动无标题栏无边框窗体的3种方法
SabreWulf
03-13 2223
目录 第一种：手工移动 第二种：调用系统API 1.引入下面代码 前提需要引入命名空间using System.Runtime.InteropServices 2.增加鼠标按下事件发送消息，让系统误以为按下是标题栏 第三种，重写 WndProc 第一种：手工移动 直接通过修改窗体位置从而达到移动窗体的效果 //定义一个位置信息Point用于存储鼠标位置 private Point mPoint; /// <summary>
Qt实现改变无标题栏窗体大小及移动窗体
danshiming的博客
11-10 2919
Qt实现鼠标左键拖动无标题栏窗体右下角改变窗体大小及移动窗体
Chrome 无标题 哭脸 已崩溃
wkj52719的博客
05-24 4164
谷歌浏览器chrome突然打开后任何页面均显示为无标题，哭脸。鼠标选中sheet页面时，提示已崩溃。 无法打开设置、开发工具箱 经过检查，是chrome的Userdata数据出错，导致页面加载无法正常展示页面。 修复办法： 打开文件夹C:\Users\{privateUserId}\AppData\Local\Google\Chrome，删除User data文件夹，如果需要备份UserData,请备份User Data到其他地方。 ...
无标题123111113332
最新发布
05-11
123
VC去掉'无标题'字样的方法.zip
11-21
Visual c++去掉'无标题'字样的方法.zip
vue-tree:基于vue element-ui的tree控件改装的可编辑，添加，删除带线性结构的tree组件
04-30
vue-tree A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 1.总体预览 2.编辑 3.新增 4.删除 5.提示
c#实现无标题栏窗口的拖动
09-05
本篇文章是对c#中实现无标题栏窗口拖动的方法进行了详细的分析介绍，需要的朋友参考下
无标题
02-12
无标题
qt无标题栏设置
xiatiankuaizou的专栏
01-25 3866
1.设置没有标题栏 this-&gt;setWindowFlags(Qt::FramelessWindowHint); 2.鼠标移动大小 void Dialog::resizeEvent(QResizeEvent *event) { ui-&gt;Button-&gt;setGeometry(0, 0, (82*this-&gt;width())/1366, (48*this-&...
android设置无标题栏 、 状态栏
z1web的博客
11-22 6567
设置无标题栏，状态栏的方式有三种 第一种：在java文件中修改(注意：如果改成隐藏标题栏，那么MainActivity必须继承Activity) public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { ...
如何用Qt实现一个无标题栏、半透明、置顶（悬浮）的窗口
xktesla的专栏
02-17 1807
在Qt框架中，要实现一个无标题栏、半透明、置顶（悬浮）的窗口，需要一些特定的设置和技巧。废话不多说，下面我将以DrawClient软件为例，介绍一下实现这种效果的四个要点。在窗口的构造函数中设置窗口的样式，在强调一下，一定要找构造函数中设置，否则有些平台可能无效。
【QT学习】如何移动无标题栏窗口?（图文详解）
孤生i的博客
10-05 1739
本篇，作者将分享如何移动无标题栏的窗口。
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值