Ant Design of Vue的树形控件Tree的使用及说明

Ant Design 是一款优秀的 React UI 库，它的 Vue 版本 Ant Design of Vue 同样也是备受欢迎的UI框架之一。Ant Design of Vue中提供了一种常用的可展开、可收起的树形控件 Tree，下面我来详细介绍如何使用及说明。

安装

可以通过 npm 或 yarn 安装 Ant Design of Vue。

使用 npm：

npm install --save ant-design-vue

使用 yarn：

yarn add ant-design-vue

导入组件

在需要使用 Tree 的文件中，导入 Tree 组件：

import { Tree } from 'ant-design-vue';

基础用法

下面展示一个简单的 Tree，包含三个 TreeNode。可以通过 key 取到节点对象，然后自定义节点的内容。示例代码如下：

<template>
  <a-tree :default-expanded-keys="['0-0-0', '0-0-1']">
    <a-tree-node title="parent 1" key="0-0">
      <a-tree-node title="parent 1-0" key="0-0-0">
        <a-tree-node title="leaf" key="0-0-0-0"></a-tree-node>
        <a-tree-node title="leaf" key="0-0-0-1"></a-tree-node>
      </a-tree-node>
      <a-tree-node title="parent 1-1" key="0-0-1">
        <a-tree-node title="<span style='color:red'>html can be used</span>" key="0-0-1-0" />
      </a-tree-node>
    </a-tree-node>
  </a-tree>
</template>

default-expanded-keys 属性定义了展开的节点，值为所有已知的展开节点的 key 组成的数组；
title 为节点标题，可以是一个字符串或 HTML 标签。

使用说明

基本属性

treeData：接受一个对象数组，对象必须包含 title 和 key 两个属性，其中 key 是必须的。支持通过 slots 具体渲染每个节点，可自定义节点 UI。
checkable：添加这个属性可以开启树形节点的选择框。用访问 checkedKeys 接口来获取全选和半选的节点 keys。
selectable：添加这个属性可以使树形节点可选择。用访问 selectedKeys 接口来获取选中节点的 keys。
expandedKeys：设置展开指定的树形节点，只控制（非受控）可展开的节点。（默认受控，值通过 defaultExpandedKeys 设置）
defaultExpandedKeys：设置默认展开的某个树形节点，只在初始渲染时有效。可以是一个字符串数组或函数返回字符串数组，数组元素是树节点的 key 值。
autoExpandParent：是否自动展开父节点。
defaultExpandAll：默认展开全部树节点。
showIcon：是否展示 TreeNode 节点前的图标，没有默认样式，如需展示更多图标可以自行添加 style。
switcherIcon：自定义 switcher 图标，同时也接受一个数组，分别为关闭和打开状态
showLine：是否展示 TreeNode 之间的虚线。
draggable：开启上传并启动拖拽功能。
blockNode：节点是否独占一行，（默认开启，需要设置具体数值的时候使用）。
virtualListProps：懒加载的虚拟树（只在大数据量情况下使用）。

常用事件

onSelect: 选择树节点时触发，参数为 (selectedKeys, e:{selected: bool, selectedNodes, node, event})，其中 selectedKeys 为当前被选中节点的 key 的数组，selectedNodes 为当前被选中的节点的节点实例的引用的数组。
onCheck: 节点选框选中或取消时触发，返回选中节点的 keys。
onExpand: 展开/收起节点时触发，返回当前节点的 key，布尔值 expanded 和结合 excludeExpandEvents 的事件 Flags。
onLoad: 节点被加载时触发。
onRightClick: 右键单击节点时触发，返回 rightClickNode 和事件对象。

示例说明

示例1：默认展开子节点和半选中节点的树形控件

<template>
  <a-tree
    :tree-data="treeData"
    show-icon
    checkable
    :checked-keys="checkedKeys"
    :default-expanded-keys="['0-0', '0-0-0']"
    @check="onCheck"
  >
    <template slot="title" slot-scope="{ title }">
      <a :title="title">{{ title }}</a>
    </template>
  </a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: '父节点1',
          key: '0-0',
          children: [
            {
              title: '父节点1-1',
              key: '0-0-0',
              children: [
                {
                  title: '子节点1',
                  key: '0-0-0-0',
                  disableCheckbox: true
                },
                {
                  title: '子节点2',
                  key: '0-0-0-1'
                }
              ]
            },
            {
              title: '父节点1-2',
              key: '0-0-1',
              disableCheckbox: true
            }
          ]
        }
      ],
      checkedKeys: ['0-0-0']
    };
  },
  methods: {
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    }
  }
};
</script>

根据示例代码，当前共有3个节点，其中父节点1默认展开，子节点1被半选中。

示例2：自定义树形节点内容

<template>
  <a-tree :tree-data="treeData" :default-expanded-keys="['0-0']">
    <template slot="title" slot-scope="{ title }">
      <div>{{ title }}</div>
    </template>
  </a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: '父节点1',
          key: '0-0',
          children: [
            {
              title: '子节点1',
              key: '0-0-0'
            },
            {
              title: '子节点2',
              key: '0-0-1'
            }
          ]
        }
      ]
    };
  }
};
</script>

根据示例代码，每个节点信息的 title 都是字符串类型，并且使用了 div 标签包裹，代表自定义节点内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ant Design of Vue的树形控件Tree的使用及说明 - Python技术站