在渲染element plus 中的el-tree 通过判断渲染数据的状态来进行特定颜色的变化

 在处理el-tree的这个渲染问题最重要的就是数据结构的类型，在这个小项目中，我所处理的后端数据是一个一维的对象数组，每一项数组的children中包含了一个数组。

在我通过dom来操作想要改变el-tree的css样式的同时，发现获取到的是空数组，数据没有如愿的获取到的情况有很多，在这里遇到的是渲染是基于后端数据接口调用完成后在调用a（）函数，而解决的办法是通过async和await来进行处理的，在处理完成后继续来看我们获取到的数据，我们发现获取到的是一个htmlcollection，即一个动态类型的数组，那么我们在下面生成的htmlCollectionToArray函数就是来进行处理htmlcollection成为一个array数组，在数组的数据类型基础上，在进行操作处理。

处理成数组后会发现一个是一维数组，一个是二维数组（不太严谨但可以这么理解），通过flattenArray函数（代码块第三个函数）来将二维数组转换成一维数组，再通过遍历结合判断语句来进行赋值操作。

最后处理好之后，通过arrayToHtmlCollection来将array转成htmlcollection动态数组

//通过a来进行调用函数
const a= async () => {
  let tree = document.getElementsByClassName("想要修改的class");
 let array = htmlCollectionToArray(tree);
  let newnode = flattenArray(treedata.value.value);
  for (let i = 0; i < newnode.length; i++) {
    if (newnode[i].auditResult == false) {
      array[i][0].style.color = "black";
    }
    if (newnode[i].auditResult == true) {
      array[i][0].style.color = "green";
    }
  }
  tree = arrayToHtmlCollection(array);
};
//数组扁平化
function flattenArray(array) {
  let result = [];
  let beforeResult = ["1"];
  for (let i = 0; i < array.length; i++) {
    console.log(i, "i的值");
    console.log(typeof array[i] ==="undefined");
     result = result.concat(beforeResult);
    if (typeof array[i].children !=="undefined") {
      console.log("进来");
     
      result = result.concat(array[i].children);
    }
      console.log(result,"result");
  }
  return result;
}
// 将array转换成htmlcollection
function arrayToHtmlCollection(array) {
  let collection = document.createDocumentFragment();
  for (let i = 0; i < array.length; i++) {
    let element = document.createElement("div");
    element.innerHTML = array[i].join("");
    collection.appendChild(element);
 }
  return collection;
}//将htmlcollection转换成array
function htmlCollectionToArray(collection) {
  let result = [];
  for (let i = 0; i < collection.length; i++) {
    let elements = collection[i].getElementsByTagName("*") result.push(Array.from(elements));
  }
  return result;
}    

代码007普通

打赏 收藏 海报 链接