elementUI Tree 树形控件的官方使用文档

ElementUI Tree 树形控件是基于Vue.js的一款可折叠的树形菜单组件，用于显示有层次结构的数据。以下是官方使用文档的完整攻略：

树形控件的基本使用

可以使用<el-tree> 标签将树形控件引入到页面中，并传入相应的数据。 其中需要传入的数据包括data和props。

以下是一个简单的示例:

<template>
  <el-tree :data="treeData" :props="defaultProps"></el-tree>
</template>
<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children', 
        label: 'label'
      },
      treeData: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

• :data 传递树形结构的数据
• :props 配置节点字段，用于显示节点数据

选项配置

Props

可以通过 props 属性自定义显示的 key 值和菜单节点属性的 key 值。

defaultProps 属性中可以配置以下内容：

• children: 指定子节点属性
• label: 指定显示属性
• disabled: 指定禁用属性
• isLeaf: 指定节点是否为叶子节点属性

示例如下：

<template>
  <el-tree :data="treeData" :props="customProps"></el-tree>
</template>
<script>
export default {
  data() {
    return {
      customProps: {
        children: 'childs',
        label: 'title',
        disabled: 'isDisabled',
        isLeaf: 'isLeaf'
      },
      treeData: [
        {
          title: '一级 1',
          childs: [
            {
              title: '二级 1-1',
              childs: [
                {
                  title: '三级 1-1-1',
                  isDisabled: true
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

Tree Attributes

可以通过 tree-attributes 属性设置树的属性。

以下是一些支持的属性：

• indent: 单个缩进的大小
• show-checkbox: 是否显示 checkbox
• default-expand-all: 是否默认展开所有节点
• expand-on-click-node: 是否点击节点展开子节点

示例如下：

<template>
  <el-tree :data="treeData" :props="customProps" :tree-attributes="customAttributes"></el-tree>
</template>
<script>
export default {
  data() {
    return {
      customProps: {
        children: 'childs',
        label: 'title'
      },
      customAttributes: {
        'default-expand-all': true,
        'show-checkbox': true,
        'expand-on-click-node': false
      },
      treeData: [
        {
          title: '一级 1',
          childs: [
            {
              title: '二级 1-1',
              childs: [
                {
                  title: '三级 1-1-1'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

示例

勾选后获取拥有选中状态节点的 Key 值

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :checked-keys="checkedKeys"
    @check="handleCheckChange"
  ></el-tree>
</template>
<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 11,
          label: '二级 1-1',
          children: [{
            id: 111,
            label: '三级 1-1-1'
          }]
        }, {
          id: 12,
          label: '二级 1-2',
          children: [{
            id: 121,
            label: '三级 1-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      checkedKeys: []
    }
  },
  methods: {
    handleCheckChange(checkedKeys) {
      this.checkedKeys = checkedKeys;
    }
  }
}
</script>

添加自定义展开图标

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    node-key="id"
    :render-content="renderContent"
  ></el-tree>
</template>
<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 11,
          label: '二级 1-1',
          children: [{
            id: 111,
            label: '三级 1-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    renderContent(h, { node, data }) {
      return (
        <span>
          <span>{node.label}</span>
          {node.isLeaf ? '' : <span class="expand-icon el-icon-plus" onClick={() => this.$refs.tree.$emit('node-expand', data)}></span>}
        </span>
      )
    }
  }
}
</script>