zoukankan      html  css  js  c++  java
  • 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);
    },
    
    
  • 相关阅读:
    document
    reg() replace
    BOM和DOM的区别
    注册表
    实现移动端通过下拉菜单栏实现pc端的导航栏
    通过ajax获取api,并且通过jquery获取自定义属性
    git的使用
    当盒子不设置width,而设置max-width遇到的问题
    CSS之position
    JavaScript之数组常用的方法
  • 原文地址:https://www.cnblogs.com/media/p/14397055.html
Copyright © 2011-2022 走看看