Tree 树形组件

使用指南

用于多层级目录的展示与选择，最多支持5个层级；节点项分为层级节点与叶子节点两个类型。

层级节点

• 用于层级分组， 最多支持五级分组
• 点击触发展开/收起的操作

代码演示

查看代码

<template>
  <div class="list">
    <div style="height: 16px" />
    <h3-tree :treeData="treeData" @clickNode="clickNode" >
      <!-- 文件icon -->
      <template #fileIcon="{ node }">
        <h3-icon type="IconPlusStroke" :size="16" color="#fff" />
      </template>
      <!-- 文件夹icon -->
      <template #folderIcon>
        <h3-icon type="IconDeleteStroke" :size="16"  color="#fff" />
      </template>

      <!-- <template #meh>
        234
      </template>
      <template #custom="{ node }">
        {{ node.name }}
      </template> -->
    </h3-tree>
  </div>
</template>

<script>
import H3Tree from '@/components/h3-tree/';
import _ from 'lodash';
import H3Icon from '@/components/h3-icon/';
export default {
  components: {
    H3Tree,
    H3Icon,
  },
  data() {
    return {
      toast: this.$toast,
      treeData: [
        {
          name: '根目录节点',
          key: '1',
        },
        {
          name: '一级分组',
          key: '2',
          isDir: true,
          isOpen: true,
          nodeInfo: {
            key: 'value',
          },
          children: [
            {
              name: '一级分组节点',
              isSelected: true,
              key: '2-1',
              slots: { icon: 'meh' },
            },
            {
              name: '二级分组',
              isDir: true,
              key: '2-2',
              children: [
                {
                  name: '二级分组节点',
                  key: '2-2-1',
                  scopedSlots: { icon: 'custom' }
                  
                },
                {
                  name: '三级分组',
                  isDir: true,
                  key: '2-2-2',
                  children: [
                    {
                      name: '三级分组节点',
                      key: '2-2-2-1',
                    },
                    {
                      name: '四级分组',
                      isDir: true,
                      key: '2-2-2-2',
                      children: [
                        {
                          name: '四级分组节点',
                          key: '2-2-2-2-1',
                        },
                        {
                          name: '五级分组',
                          isDir: true,
                          key: '2-2-2-2-2',
                          children: [
                            {
                              name: '五级分组节点',
                              key: '2-2-2-2-2-1',
                            },
                          ]
                        },
                      ]
                    }
                  ]
                },
              ],
            },
            {
              name: '一级分组节点',
              key: '2-3',
            },
            // {
            //   name: '二级分组',
            //   isDir: true,
            //   key: '2-3',
            //   children: [],
            // },
          ],
        },
        {
          name: '根目录节点',
          key: '3',
        },
         {
          name: '无内容目录节点',
          key: '4',
          isDir: true,
          
        },
      ],
    };
  },
  methods: {
    clickNode(node) {
      let eventText = JSON.stringify(node);
      console.log('onTouch, event: ' + eventText);
      if (!node.isSelected) return;
      let treeData = _.cloneDeep(this.treeData);
      const walk = (tree, depth = 1) => {
        tree.isSelected = tree.key === node.nodeInfo.key ? true : false;
        if (tree.children) {
          tree.children.forEach(node => {
            walk(node, depth + 1);
          });
        }
      };
      treeData.forEach(item => {
        walk(item);
      });

      this.$set(this, 'treeData', treeData);
      console.log(this.treeData)

      // this.toast.show({ text: eventText });
    },
  },
};
</script>

API

Prop

属性	说明	类型	默认值
treeData	参数，数组类型，数组内的对象类型为 { name: String, isDir: Boolean, isOpen: Boolean, isSelected: Boolean, children: Array }	Array	无

treeData 内数据

属性	说明	类型	默认值
name	层级几点或叶子节点名称层级几点或叶子节点名称	String	-
isDir	区分节点类型，默认为false即叶子节点，true时为层级节点	Boolean	false
children	与treeData结构相同，仅在层级节点时有用点	Array	-
isOpen	是否展开	Boolean	false
isSelected	是否选中，仅作用与叶子节点	Boolean	false

Event

事件名	说明	参数
clickNode	树形结构节点点击（触摸）事件	{ idDir: boolean, isOPen: boolan, nodeInfo: { ...当前节点信息 } } , idDir表示节点是否为目录；isOPen表示（若是目录）是否展开；nodeInfo为节点信息

Slots

属性	说明	参数
folderIcon	自定义层级节点图标	node
fileIcon	自定义叶子节点图标	node