el-tree树添加向下移动按钮,前端界面调整顺序

news2024/9/22 10:08:24

需求:树上添加向下按钮,再不调用接口的情况下,调整树的顺序结构

遇到的问题:第一次点击更新的,数据和视图是调整好的,再次点击页面调整顺序,只有数据被调整了,视图没有发生改变。

     <el-tree
            ref="tree"
            :data="treeData"
            highlight-current
            node-key="id"
            :props="props"
            :default-expanded-keys="showList"
            @node-click="clicktree"
          >
            <span slot-scope="{node, data }" class="custom-tree-node">
              <img v-if="data.seq_img" :src="hanleImgShow(data?.seq_img)" width="20" height="20">
              <span style="display:inline-block;padding-left:5px;">{{ data?.seq_name_chn }}</span>
              <el-button v-if="data.seq_img" type="text" icon="el-icon-arrow-down" @click="moveDown(node,data,data?.seq_num)" />
            </span>
          </el-tree>
    moveDown(node, data, num) {
      const seqNum = Number(num)
      const childrenLength = node.parent.data.children.length
      const childrenList = node?.parent?.data?.children
      //     seqNum  这个值去判断
      if (childrenLength == seqNum) {
        return this.$message.warning('不可以下移')
      }

      const treeList = this.treeCreatedData // 存放数据的, 这个里面的children是存放的序数据
      const targetIndex = childrenList.findIndex(item => item.seq_num == num)
      if (targetIndex !== -1) {
        this.moveItemAndUpdateSeqNum(childrenList, targetIndex) // 将第三项移动到第一位
      }
    },
    moveItemAndUpdateSeqNum(list, index) {
      if (index < list.length - 1 && index >= 0) {
        const temp = list[index]
        list[index] = list[index + 1]
        list[index + 1 ] = temp

        this.$nextTick(() => {
          for (let i = index; i <= index + 1; i++) {
            list[i].seq_num = (i + 1).toString()
          }
          console.log(list, 'list382')
          this.treeCreatedData[0].children[0].children = list
          this.treeData = this.treeCreatedData
          this.$forceUpdate() 
        })
      }
    },

 这样写,只会更新第一次的视图,后续点击 视图没有发生改变;最后找到的方法是使用ref找树的方法 去修改。

 moveItemAndUpdateSeqNum(list, index) {
      if (index < list.length - 1 && index >= 0) {
        const temp = list[index]
        list[index] = list[index + 1]
        list[index + 1 ] = temp

        this.$nextTick(() => {
          for (let i = index; i <= index + 1; i++) {
            list[i].seq_num = (i + 1).toString()
          }
          console.log(list, 'list382')
          this.treeCreatedData[0].children[0].children = list
          this.treeData = this.treeCreatedData
          this.$refs.tree.root.setData(this.treeData) //使用这个 去更新树节点的数据
        })
      }
    },

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1947933.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【音视频之SDL2】bmp图片与绘制bmp

文章目录 前言BMP是什么SDL2绘制BMP的原理SDL2绘制BMP的流程SDL_LoadBMP作用函数原型参数返回值示例代码 SDL_BlitSurface作用函数原型参数返回值 示例代码效果展示总结 前言 在现代多媒体应用中&#xff0c;图像的处理和显示是非常重要的一部分。无论是在游戏开发还是在视频处…

Qt SQLite数据库编程学习总结

到此为止&#xff0c;就使用Qt进行SQLite数据库的操作&#xff0c;做一次总结 1. Qt中数据库操作的相关概念和类 Qt 数据库编程相关基本概念https://blog.csdn.net/castlooo/article/details/140497177 2.表的只读查询--QSqlQueryModel QSqlQueryModel单表查询的使用总结htt…

Nuxt.js 环境变量配置与使用

title: Nuxt.js 环境变量配置与使用 date: 2024/7/25 updated: 2024/7/25 author: cmdragon excerpt: 摘要&#xff1a;“该文探讨了Nuxt.js框架下环境变量配置的详细过程&#xff0c;涉及.env文件配置、运行时访问、安全性考量、在不同场景下的实践&#xff08;如Vue应用、…

华为OD机试 - 分配土地 (Java 2024年C卷D卷)

华为OD机试&#xff08;C卷D卷&#xff09;2024真题目录(Java & c & python) 题目描述 从前有个村庄&#xff0c;村民们喜欢在各种田地上插上小旗子&#xff0c;旗子上标识了各种不同的数字。 某天集体村民决定将覆盖相同数字的最小矩阵形的土地分配给村里做出巨大贡…

本地电脑连接阿里云

系列文章目录 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、方法1二、使用步骤1.引入库 前言 一、方法1 本地连接远程服务器的时候提示出现身份验证错误的几种解决方法 二、使用步骤 …

巴黎奥运启幕 PLM系统助力中国制造闪耀全球

2024巴黎奥运会将于法国当地时间7月26日在塞纳河畔正式开幕。即将亮相巴黎奥运会赛场的除了中国运动员之外&#xff0c;还有一批批中国制造企业为奥运会设计并制造的体育设备也将惊艳亮相&#xff0c;成为赛场上另一道亮丽的风景线。 在新时代的浪潮中&#xff0c;中国制造业坚…

大道云行,位居中国分布式存储市场挑战者象限!

近日&#xff0c;中国市场咨询机构赛迪顾问发布了《中国分布式存储市场研究报告&#xff08;2024&#xff09;》&#xff08;简称“报告”&#xff09;。报告基于对中国分布式存储市场的深入研究&#xff0c;从发展现状、厂商竞争力、未来趋势入手&#xff0c;结合新环境、新规…

【RHCE】综合真机实验(shell完成)

目录 题目&#xff1a; 需求描述 实操 一、服务端&#xff08;servera&#xff09; 1.ip配置 2.更改主机名 3.创建本地仓库 4.DNS服务 1.下载软件包和防火墙允许 2.配置主配置文件 3.配置区域文件 1.named.exam 2.named.fangxiang 4.重启服务 5.验证结果&#x…

OCDM水下通信仿真代码

一、代码介绍 MATLAB实现&#xff0c;基于OCDM水下基带通信仿真&#xff0c;对比了不同子载波激活的下OCDM水下通信性能&#xff0c;引入多径信道&#xff0c;采用相同信道估计方法,并对比了不同子载波数下的MMSE均衡效果。 信道估计方法参考论文 Robust Channel Estimation …

一款基于Cortex-M0+的单片机音频编解码 - CJC2100

USBCodec芯片可以对数字音频信号进行多种处理&#xff0c;例如增加音量、均衡调节、音效处理等。这些处理可以通过耳机的控制按钮来实现&#xff0c;让用户可以根据自己的喜好来调整音频效果。USBCodec芯片还可以控制噪声和失真的水平&#xff0c;以提供高品质的音频输出。噪声…

单证不一致清关难题 | 国际贸易综合服务平台 | 箱讯科技

什么是单证一致&#xff1f; 单证一致出口方所提供的所有单据要严格符合进口方开证银行所开信用证的要求&#xff0c;或者说出口方制作和提供的所有与本项货物买卖有关的单据&#xff0c;与进口方申请开立的信用证对单据的要求完全吻合&#xff0c;没有矛盾。 添加图片注释&am…

batch norm记录

文章目录 概要整体架构流程训练阶段推理阶段模型中使用的注意事项 概要 面试百度时候被问到了BN 内部详细的训练阶段&#xff0c;推理阶段的计算过程。没回答好&#xff0c;来记录一下 推荐一下b站up: Enzo_Mi。视频做的确实不错 bn 讲解视频 整体架构流程 训练阶段 均值和标…

多模态大模型技术白皮书 2024

不同于语言大模型只对文本进行处理&#xff0c;多模态大模型将文本、语音、图像、视频等多模态数据联合起来进行学习。多模态大模型融合了多种感知途径与表达形态&#xff0c;能够同时处理和理解来自不同感知通道&#xff08;例如视觉、听觉、语言和触觉等&#xff09;的信息&a…

构建生成工具cmake的使用(1)

ps:本文是对cmake的基础讲解&#xff0c;掌握后解决70-80%情况是足以应对的&#xff0c;后续会对cmake有进阶内容。 一 前言 CMake 是一个工具&#xff0c;帮助开发者管理和自动化软件项目的构建过程。它使用一个叫做CMakeLists.txt 的文本文件来描述项目的组织结构、编译选项…

matlab实验:实验六MATLAB 数值计算与符号运算

题目1&#xff1a;&#xff08;线性方程组数值求解&#xff09; 1&#xff0e; 用不同的方法求解下面方程&#xff1a;&#xff08;方程原式参考 P369 实验 10&#xff0c;第 1 题&#xff09; 第 1 种&#xff0c;左除和求逆函数(inv) 第 2 种 &#xff0c; 用 符 号 运 算 的…

大语言模型-对比学习-Contrastive Learning

一、对比学习概念 对比学习是一种特殊的无监督学习方法。 旨在通过拉近相关样本的距离并且推远不相关样本的距离&#xff0c;来学习数据表示。 通常使用一种高自由度、自定义的规则来生成正负样本。在模型预训练中有着广泛的应用。 二、对比学习小案例 对比学习主要分为三个…

C#使用Clipper2进行多边形合并、相交、相减、异或的示例

Clipper2库介绍 开源库介绍&#xff1a; Clipper2在Github上的地址&#xff1a;https://github.com/AngusJohnson/Clipper2 Clipper2库对简单和复杂多边形执行交集&#xff08;Intersection&#xff09;、并集&#xff08;Union&#xff09;、差分&#xff08;Difference&…

Llama 3.1超大405B!AI巨浪再掀新高潮

前沿科技速递&#x1f680; Meta公司宣布开放的Llama 3.1系列模型&#xff0c;以其惊人的128K上下文长度、对八种语言的支持以及业界领先的405B开放式最前沿AI模型&#xff0c;瞬间吸引了全球科技界的目光。该系列模型不仅在通用知识、可控性、数学、工具使用和多语言翻译等方面…

探索算法系列 - 双指针

目录 移动零&#xff08;原题链接&#xff09; 复写零&#xff08;原题链接&#xff09; 快乐数&#xff08;原题链接&#xff09; 盛最多水的容器&#xff08;原题链接&#xff09; 有效三角形的个数&#xff08;原题链接&#xff09; 查找总价格为目标值的两个商品&…

鸿蒙开发—黑马云音乐之广告页

目录 1.页面布局 2.点击按钮跳转 3.倒计时自动跳转 接下来是项目实战&#xff0c;项目选用传智的黑马云音乐。 效果图如下&#xff1a; 1.页面布局 Entry Component struct ADPage {State message: string Hello Worldbuild() {Stack({alignContent:Alignment.TopEnd}) {…