使用el-tree自定义节点内容，更改节点内容时候只更改了最后添加的节点内容

最新推荐文章于 2024-05-28 17:11:58 发布
最新推荐文章于 2024-05-28 17:11:58 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： el-tree elementui vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52244931/article/details/128267247
版权
vue 同时被 3 个专栏收录
33 篇文章 0 订阅
订阅专栏
elementui
15 篇文章 0 订阅
订阅专栏
el-tree
2 篇文章 0 订阅
订阅专栏

背景

使用户自定义节点内容 ：element中的el-tree中的自定义节点内容 的例子 只是列出了添加节点内容和删除节点 ，并没有 修改节点内容的例子说明，我是以点击修改 弹窗的形式进行修改节点内容 。

问题

当一次性 新增数个节点时候（无论父子节点）
当点击编辑 弹窗 修改节点内容时候 ，无论点击的是那个节点 弹框弹的都是最后那个添加的节点的弹框，导致修改的时候，都是修改最后添加的那个节点的内容；以下请添加图片描述
是问题代码。

<template>
  <div class="custom-tree-container">
    <div class="block" style="width:50%">
      <p>使用 scoped slot</p>
      <el-tree
        :data="data"
        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="() => append(node, data)"
            >
              <i class="el-icon-plus"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              <i class="el-icon-delete"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => editor(node, data)"
            >
              <i class="el-icon-edit"></i>
            </el-button>
            <div>
              <el-dialog
                title="名称"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <el-input type="text" v-model="value"></el-input>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submit(node, data)"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </div>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
let id = 1000;
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "数据源",
        parentId: null,
      },
    ];

    return {
      value: "",
      newArr: [],
      abcd: [],
      dialogVisible: false,
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
    };
  },

  methods: {
    submit(node, data) {
      data.label = this.value;
      this.dialogVisible = false;
    },
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加
    append(node, data) {
      const newChild = {
        parentId: node.data.id,
        id: id++,
        label: "testtest",
        children: [],
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    // 移除
    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);
    },
    editor(node, data) {
      this.value = "";
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

上面的是将弹窗放在了el-tree中的 slot-scope下 当点击编辑的时，拿到的是对应节点的数据，但当点击弹框确定的时候 拿到的是最后添加节点的数据。
将 弹框从 el-tree中独立出来，点击编辑后取到对应节点数据，保存到本地data里面 ，点击确定的时候在赋值；以下是更改后的代码

<template>
  <div class="custom-tree-container">
    <div class="block" style="width:50%">
      <p>使用 scoped slot</p>
      <el-tree
        :data="data"
        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="() => append(node, data)"
            >
              <i class="el-icon-plus"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              <i class="el-icon-delete"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => editor(node, data)"
            >
              <i class="el-icon-edit"></i>
            </el-button>

          </span>
        </span>
      </el-tree>
      <div>
              <el-dialog
                title="名称"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <el-input type="text" v-model="value"></el-input>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submit"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </div>
    </div>
  </div>
</template>
<script>


let id = 1000;
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "数据源",
        parentId: null,
      },
    ];

    return {
      dataTree:'', //编辑的节点数据
      value: "",
      newArr: [],
      abcd: [],
      dialogVisible: false,
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
    };
  },

  methods: {
    submit() {
      this.dataTree.label = this.value;
      this.dialogVisible = false;
    },
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加
    append(node, data) {
      const newChild = {
        parentId: node.data.id,
        id: id++,
        label: "testtest",
        children: [],
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    // 移除
    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);
    },
    editor(node, data) {
      this.dataTree = data
      this.value = "";
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
w宇宙王
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-tree自定义树节点的内容
weixin_44173929的博客
09-17 1985
需求：el-tree的第一级是假数据，不可以点击，也就是屏蔽node-click事件。 <template> <div> <el-tree :data="data" node-key="id" @node-click="handleNodeClick" > <span class="custom-tree-node" slo
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
antd树状图tree点击加载子节点（新增修改删除树状图更新）
z1034243392的博客
02-02 553
antd的tree异步加载 新增修改删除 更新树状图
Vue el-tree主键id重复 添加自增id 以及相同节点同步勾选
最新发布
Jokerxiuka的博客
05-28 256
【代码】Vue el-tree主键id重复 添加自增id 以及相同节点同步勾选。
el-tree 自定义节点内容及样式修改记录
TangAcrab的博客
12-05 2171
el-tree自定义节点内容和样式修改
el-tree 自定义节点样式
m0_73353407的博客
01-08 1732
el-tree 自定义节点样式
element el-tree自定义图标和修改节点内容
热门推荐
yiyueqinghui的博客
11-19 1万+
element-ui中Tree 树形自定义节点内容render-content 使用render-content不显示树形组件问题解决方法 1， 需要安装transform-vue-jsx npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props bab...
el-tree自定义节点内容使用svg和文本
zhangzitengTJ的博客
03-01 615
最近在做需求的时候需要给el-tree的子级项和父级项增加不同的svg图标和文本，但官方给的icon-class属性只能使用官方图标且修改全部的节点，不满足公司需求，于是参考了官方给的自定义节点内容 scoped slot，使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。
el-tree 自定义节点使用
lanfeng_123_4的博客
09-21 180
renderContent(h, { node, data, store }) { return ( <span class="custom-tree-node"> <span>{node.label}</span> <span> <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button> <el-button size="mini" type="text" on-click={ ()
Elementui el-tree 自定义节点内容、图标右移、修改某一节点对应背景色、展开或关闭所有节点等常用问题
小猫爪子
05-06 9658
这里写目录标题去除子节点缩进自定义节点内容三角图标右移 去除子节点缩进 设置:indent="0" 自定义节点内容 使用slot，找到要修改neirong 的对应class，例如下面例子 el-tree-node、custom-tree-node，找到这些elementui自带的class，使用插槽进行修改。 三角图标右移 >>>.el-tree-node__expand-icon { position: absolute; right: 2%; } 例子 <temp.
实现 el-tree 自定义节点的新增、修改和删除
HuuXiaoTian的博客
09-11 1842
在网上找了好多代码，总是会有各种问题，成功只能靠自己呀。
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
总结，要确保Element-ui的`el-tree`组件在新增或删除节点后正确刷新，关键是正确地修改数据源，并根据情况更新受影响的节点状态。同时，确保使用的是支持这一功能的最新Element-ui版本。在实际开发中，遇到问题时，...
ElementUI中el-tree节点的操作的实现
10-15
在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 首先，让我们来看一下`el-tree`的基本配置。在HTML部分，`el-tree`组件接收`data`属性，这是树...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点...el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
Authorization头的作用
m0_52244931的博客
10-08 4873
Authorization头的作用
当使用element中的日期选择器el-time-picker，时间选不上
m0_52244931的博客
11-21 4397
当使用 el-time-picker 时 v-model绑定的 formInline.value1 默认值要是 为空数组 [] ,则这个时间选择器 滑动选择时间是有问题的，可以在数组中设置默认时间，解决这个问题 ，但是 当这个组件时 查询框的时候 首次是不应该存在默认值的 这时候 就可以 将 value1 初始化 为 null
XSS（跨域脚本攻击）
m0_52244931的博客
10-23 3937
XSS（跨域脚本go攻击
el-tree添加节点
09-09
对于 el-tree 添加节点，你可以使用 el-tree 的 API 中的 append 方法来实现以下是一个示例代码： ```html <el-tree :data="treeData" :props="defaultProps" ref="tree"></el-tree> <el-button @click="addNode...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值