聊聊关于element ui树形组件基本理解基于官方文档

原创 2018年04月15日 22:18:44
这里不对element ui做过多介绍,直接介绍工作最常用的一个动态加载树形组件的常用用法 

引入tree组件的代码如下:

<el-tree :data="data" :props="props" lazy @node-click="handleNodeClick" :load="loadNode"></el-tree>
    /*
    动态加载lazy参数和load方法是必选的,
    lazy:为节点store(TreeStore)中的属性,可输出当前节点进行查看
    load:加载子数据的方法,用法为function(node,reslove){}
    */
<script>
  export default {
    data() {      return {
        props:{        //配置父子树的属性名
          label:'parent',
          children:'sub'
        }
      };
    },
    methods: {    //点击节点的处理事件,可以更改显示节点的内容
      handleNodeClick(data){      //在这里改变加载的数据无法刷新树数据
        //to do something ,load data from server and show the data to the view
        if(data.label == 1){//判断点击节点,choose the node you clicked
        /*to do something*/
        }
        console.log(data.label)
        console.log(data)
      },
      loadNode(node, resolve){
        console.log(node);        if (node.level === 0) {          //初始第一层节点,初始化数据,根节点配置
          return resolve([{ label: '1' }, { label: '2' }, { label: '3' },]);
        }        var data = [];        if(node.data.label == 1){//点击树节点1的处理
          data = [{label:'1-1'},{label:'1-2'},{label:'1-3'}];
        }        if(node.data.label == 2){//点击树节点2的处理
          data = [{label:'2-1'},{label:'2-2'},{label:'2-3'}];
        }
        resolve(data)//加载下级数据!
      }
    }
  };
</script>

现在对tree的两个常用方法分析 

1、node-click:节点被点击时的回调,共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。即function(data,node,vuecomponent){}

node-clikc方法:function(data,node,vueComponent){        //可以进行常用的点击view层展示切换}
data:参数为我们点击的节点的数据对象
node:(node对象)    checked:false//是否选中
    childNodes:Array(3)//子节点
    data:Object//data数据对象
    expanded:true//是否可以展开
    id:1//node的id
    indeterminate:false//和checkbox结合的属性,选框的样式
    isLeaf:false
    level:1//点击的node层级
    loaded:true//加载完
    loading:false//加载中
    parent:Node//父级node
    store:TreeStore//树形数据的store
    text:null
    visible:(...)
    disabled:(...)
    icon:(...)
    key:(...)
    label:"1"
    __ob__:Observer {value: Node, dep: Dep, vmCount: 0}    get checked:ƒ reactiveGetter()    set checked:ƒ reactiveSetter(newVal)    get childNodes:ƒ reactiveGetter()    set childNodes:ƒ reactiveSetter(newVal)    get data:ƒ reactiveGetter()    set data:ƒ reactiveSetter(newVal)    get expanded:ƒ reactiveGetter()    set expanded:ƒ reactiveSetter(newVal)    get id:ƒ reactiveGetter()    set id:ƒ reactiveSetter(newVal)    get indeterminate:ƒ reactiveGetter()    set indeterminate:ƒ reactiveSetter(newVal)    get isLeaf:ƒ reactiveGetter()    set isLeaf:ƒ reactiveSetter(newVal)    get level:ƒ reactiveGetter()    set level:ƒ reactiveSetter(newVal)    get loaded:ƒ reactiveGetter()    set loaded:ƒ reactiveSetter(newVal)    get loading:ƒ reactiveGetter()    set loading:ƒ reactiveSetter(newVal)    get parent:ƒ reactiveGetter()    set parent:ƒ reactiveSetter(newVal)    get store:ƒ reactiveGetter()    set store:ƒ reactiveSetter(newVal)    get text:ƒ reactiveGetter()    set text:ƒ reactiveSetter(newVal)    get visible:ƒ reactiveGetter()    set visible:ƒ reactiveSetter(newVal)
    __proto__:Object
具体用法//node-click函数handleNodeClick(data,parent,child){    //to do something ,load data from server and show the data to the view
     if(data.label == 1){//判断点击节点,进行view层试图切换,choose the node you clicked
     /*to do something*/
     }
}

2、load方法 

load:加载子数据的方法,一般形式为function(node,reslove){},运用了promise记得进行promise兼容

loadNode(node, resolve){
    console.log(node);        
    if (node.level === 0) {          
    //初始第一层节点,根节点
        return resolve([{ 'parent': '1' }, { 'parent': '2' }, {'parent': '3' },]);
    }        
    var data = [];        
    if(node.data.parent == 1){        
        //对点击节点加载内容处理
        //一次只能处理一层,sub属性数据被忽略
        data = [{'parent':'1-1','sub':[{ 'parent':'1-1-1' }]},{'parent':'1-2'},{'parent':'1-3'}];
    }        
    if(node.data.parent == 2){
        data = [{'parent':'2-1'},{'parent':'2-2'},{'parent':'2-3'}];
    }        
    //内容更新
    resolve(data)
}

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yh869585771/article/details/79954242

VB.NET Data Types

VB.NET Data Typesby Budi Kurniawan07/30/2001 The new version of Visual Basic, VB7 (or VB.NET), is a ...
  • sonicdater
  • sonicdater
  • 2002-04-05 09:20:00
  • 1152

vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table,treeTable

该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install...
  • s8460049
  • s8460049
  • 2017-03-11 16:43:45
  • 25944

基于vue.js 2.0,不使用webpack的nodejs服务,只在浏览器上单独使用在Element UI的Tree树形控件

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还...
  • l741210724
  • l741210724
  • 2017-04-13 19:17:50
  • 13831

vue+element-ui,树形表格,可以做权限管理模块,可折叠,全选,部分全选

html部分: class="role-table col-xs-offset-2 col-md-offset-1 col-sm-offset-2"> class="header"> ...
  • u010214074
  • u010214074
  • 2017-07-13 18:04:25
  • 8693

element ui 的树形组件上手

官方文档地址:http://element.eleme.io/#/zh-CN/component/tree 这里不对element ui做过多介绍,直接介绍工作最常用的一个动态加载树形组件的常用用法...
  • dylan_zeng92
  • dylan_zeng92
  • 2017-09-10 17:15:22
  • 749

elementui树形组件的自定义增删节点

elementUI树新增和删除的功能 vue项目 elementui树 el-tree新增和删除节点 elementui新增和删除节点树 el-tree新增和删除节点图标 vue和elemenui树...
  • mutouafangzi
  • mutouafangzi
  • 2018-01-03 17:31:06
  • 2635

Element-Ui组件(二十五)Tree 树形控件

Element-Ui组件(二十五)Tree 树形控件 本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/tree ...
  • sps900608
  • sps900608
  • 2018-03-06 11:21:16
  • 235

Vue2.0权限树组件

项目使用的饿了么的Element-Ui,权限树使用其树形控件: 刚开始没有特殊需求,三级分支,效果看着还可以。但是接下来的新需求:增加页面操作按钮权限,即达到四级分支,同时要求四级权限布局方...
  • archer119
  • archer119
  • 2017-06-10 22:49:59
  • 2896

Element-Ui组件(十九)ColorPicker 颜色选择器

Element-Ui组件(十九)ColorPicker 颜色选择器 本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/componen...
  • sps900608
  • sps900608
  • 2018-03-05 20:53:45
  • 136

Element-ui树形控件el-tree使用过程中遇到的问题

今天在使用el-tree树形控件的时候遇到了一个问题,在某个页面中我有两个地方用到了el-tree树形控件,在用getCheckedKey()方法获取选中的选项时,发现只有第二个el-tree的值的获...
  • fenghui187
  • fenghui187
  • 2017-11-28 13:41:22
  • 3129
收藏助手
不良信息举报
您举报文章:聊聊关于element ui树形组件基本理解基于官方文档
举报原因:
原因补充:

(最多只允许输入30个字)