动态生成 element-ui 级联的数据结构

2024年6月9日 182次阅读

将 dom.style.test 转换为特殊的可以级联选择的数据结构

// 采用了动态生成命名空间的函数
var MyApp = {};

MyApp.namespace = function (name) {
  var names = name.split('.');
  var current = MyApp;
  names.forEach(function (item) {
    // debugger
    if (!current[item]) {
      current[item] = {
        label: item,
        value: item
      };
    }
    current = current[item];
  });
}

// 测试数据
var arr = [
  { Id: "4", name: "",  url: "dom.style.css.width.test"}，
  { Id: "4", name: "",  url: "dom.click.fn.test" }，
  { Id: "3", name: "",  url: "window.document.body.test" },
  { Id: "3", name: "", url: "event.type.target.test" }
];

// 循环并过滤
var result = Object.keys(MyApp).map(item => {
  if (item === 'namespace') {
     return [];
   }
   return recursive(MyApp[item]);
 }).reduce((a, b) => {
   return a.concat(b);
 }, []);

// 递归实现
function recursive(object) {
   var keys = Object.keys(object);
   var hasChildren = keys.some(item => typeof  object[item] !== 'string');

   if (keys.length > 0 && hasChildren) {
     
     object.children =  [];

     keys.forEach(function (item) {
       if(typeof object[item] !== 'string') {
         object.children.push(deeps(object[item]));
         delete object[item]
       }
     })
   }
   return object;
 }
 
//result
点赞