el-tree树组件的封装 (运用递归对接口返回当前菜单数据为对象处理)

有时候在写树组件时，接口返回数据并不是我们element-ui中所预想的那样:

期望值：
data: [{
    label: '一级 1',
    children: [{
        label: '二级 1-1',
        children: [{
            label: '三级 1-1-1'
        }]
    }]
}]

显示中:

data: [{
    current: {nodeName:'一级1'，id:'01'}, // 针对当前菜单数据 是对象的处理
    children: [{
        current:{nodeName:'二级菜单',id:'02'}
        children: [{
            current;{nodeName:'三级菜单'，id：'03'}
        }]
    }]
}]

tree树注意的两个点，

1.props配置选项
2.通过vuex调取的接口的数据处理

<el-tree

  :expand-on-click-node="false" //点击箭头收缩与展开
  :data="data"
  :props="defaultProps"
  class="filter-tree"
 @node-click="handleNodeClick"
/>

1.props配置选项:配置接口返回数据所对应的字段可减少vuex中对数据的处理

defaultProps: {
  children: 'children',
  label: 'nodeName',
  id: 'id',
  url: 'url'
}
2.组件可接收父组件传入的在computed中进行处理

data: function() {
  if (this.parentsData && this.parentData.length > 0) {
    return this.dataChange(this.parentData); // dataChange() 方法为递归函数可放在methods中
  } else {
    return [];
  }
}

methods: // 递归函数的处理是根据接口返回数据进行使用

dataChange(data) {
  data.map(item => {
    item.name = item.current.nodeName || '';
    item.id = item.current.id || '';
    if (item.children.length) {
      this.menuChange(item.children);
    }
  });
  return data;
}

handleNodeClick(data) { // 被点击
  this.$emit('handleNodedClick', data);
},