淘先锋技术网

首页 1 2 3 4 5 6 7

ElementUI之Tree树形控件使用

简介

以下列出的属性、事件、方法，可使用Tree控件实现节点的拖拽功能（可实现修改顺序、更换父级节点功能）、点击节点勾选复选框、只点击箭头图标展开和收缩节点、父子节点不级联勾选、默认展开全部节点功能

基础用法

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

常用属性

参数说明类型可选值默认值
data展示数据array是无
props配置选项，具体看下表object是无
check-strictly在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 falseboolean是false
check-on-click-node是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。boolean是false
expand-on-click-node是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。boolean是true
default-expand-all是否默认展开所有节点boolean是false
draggable是否开启拖拽节点功能boolean是false
show-checkbox节点是否可被选择（开启复选框）boolean是false

props

参数说明类型可选值默认值
label指定节点标签为节点对象的某个属性值string, function(data, node)是无
children指定子树为节点对象的某个属性值string是无

常用事件

事件名称说明回调参数
check-change节点选中状态发生变化时的回调共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
node-drag-end拖拽结束时（可能未成功）触发的事件共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event

常用方法

方法名说明参数
getCheckedNodes若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false