基于饿了么UI的el-tree进行两组数据的比较

爬墙少年_OC

于 2020-08-27 19:59:01 发布

阅读量1k

点赞数

分类专栏： Vue element-ui 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43795006/article/details/107955642

版权

本文介绍了如何基于Vue.js和JavaScript的饿了么UI库，通过递归迭代来比较两组树形结构数据，并根据内容差异实现节点颜色变化。当鼠标悬停在某节点上时，对应的数据会高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用递归迭代比较两组树形结构的内容，做出相应改变

在这里插入图片描述
1.一进来变色的效果（比较前后的两组数据，如果两条相对应数据中的属性只要有一项不同（图中为“数量”字段不同），则同时变色。）

compareTree() {
   
	  let preChangeObj = "";//变更前
      let changeObj = "";//变更后
      const filterData = (list) => {
   //list参数包括了Node和data数据
        if (Array.isArray(list))
          list.some((res) => {
   
          //定义两个变量，分表两组数据每次循环的标签的父标签，用于后面进行变色标识
            preChangeObj = document.getElementById(
              "preChangeObj" + res.data.materialId + res.parent.data.materialId
            ).parentNode;
            changeObj = document.getElementById(
              "changeObj" + res.data.materialId + res.parent.data.materialId
            ).parentNode;
            
            // console.log(
            //   filterData2(this.$refs.changeTree.root.childNodes, res),
            //   res.data
            // );
            let msg

最低0.47元/天解锁文章