ZRAR-UI

树结构组件

基础用法

  • 示例：

  • 使用：

    • treeData 传入 treeData 数组，即可渲染对应的树样式

    • fieldNames 如想要自定义展示的字段，则传入 fieldNames 覆盖默认值

点击查看代码
<template>
  <z-tree :tree-data="treeData" :field-names="fieldNames"></z-tree>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'TreeDemo1',
  setup() {
    const treeData = ref([
      {
        name: 'parent 1',
        key: '0-0',
        children: [
          {
            name: 'parent 1-0',
            key: '0-0-0',
            children: [
              {
                name: 'leaf',
                key: '0-0-0-0',
              },
              {
                name: 'leaf',
                key: '0-0-0-1',
              },
            ],
          },
          {
            name: 'parent 1-1',
            key: '0-0-1',
            children: [
              {
                key: '0-0-1-0',
                name: 'sss',
              },
            ],
          },
        ],
      },
    ])
    const fieldNames = ref({ title: 'name' })
    return {
      treeData,
      fieldNames,
    }
  },
})
</script>

带编辑功能

  • 示例：

  • 使用：

    • isAddtype: Boolen 会影响所有的节点

    • isDeletetype: Boolen 会影响所有的节点

    • isEdittype: Boolen 会影响所有的节点

    在treeData中传入属性addable deleteable editable可以覆盖显示按钮的配置

    • addabletype: Boolen

    • deleteabletype: Boolen

    • editabletype: Boolen

    WARNING

    如果需要在点击时默认展开下级菜单，则需要传入expandedKeys

点击查看代码
<template>
  <z-tree
    :tree-data="treeData"
    :field-names="fieldNames"
    v-model:expandedKeys="expandedKeys"
    isAdd
    isDelete
    isEdit
  />
  <z-tree
    :tree-data="treeData1"
    :field-names="fieldNames"
    isAdd
    isDelete
    isEdit
  />
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'TreeDemo2',
  setup() {
    const expandedKeys = ref([])
    const treeData = ref([
      {
        name: 'parent 1',
        key: '0-0',
        addable: true,
        deleteable: true,
        children: [
          {
            name: 'parent 1-0',
            key: '0-0-0',
            children: [
              {
                name: 'leaf',
                key: '0-0-0-0',
              },
              {
                name: 'leaf',
                key: '0-0-0-1',
              },
            ],
          },
          {
            name: 'parent 1-1',
            key: '0-0-1',
            children: [
              {
                key: '0-0-1-0',
                name: 'sss',
              },
            ],
          },
        ],
      },
    ])
    const treeData1 = ref([
      {
        name: 'parent 1',
        key: '0-0',
        addable: false,
        deleteable: false,
        children: [
          {
            name: 'parent 1-0',
            deleteable: false,
            key: '0-0-0',
            children: [
              {
                name: 'leaf',
                key: '0-0-0-0',
              },
              {
                name: 'leaf',
                key: '0-0-0-1',
              },
            ],
          },
          {
            name: 'parent 1-1',
            addable: false,
            key: '0-0-1',
            children: [
              {
                key: '0-0-1-0',
                name: 'sss',
              },
            ],
          },
        ],
      },
    ])
    const fieldNames = ref({
      title: 'name',
    })
    return {
      expandedKeys,
      treeData,
      treeData1,
      fieldNames,
    }
  },
})
</script>

节点事件

  • 树组件自带处理方法，可以完成树的编辑，新增，删除。如需额外操作可以绑定节点事件

  • methods:

    addNode：点击新增icon触发

    editNode：点击编辑icon触发

    deleteNode：点击删除icon触发

    complateEdit：编辑状态下，点击完成icon触发

    cancleEdit：编辑状态下，点击取消icon触发

  • 示例：

点击查看代码
<!--
 * @Author: jixuanyu
 * @Date: 2022-04-18 15:43:46
 * @LastEditors: jixuanyu
 * @Description: file content
-->
<template>
  <z-tree
    :tree-data="treeData"
    :field-names="fieldNames"
    isAdd
    isDelete
    isEdit
    @addNode="addNode"
    @editNode="editNode"
    @deleteNode="deleteNode"
    @complateEdit="complateEdit"
    @cancleEdit="cancleEdit"
  />
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'TreeDemo3',
  setup() {
    const treeData = ref([
      {
        name: 'parent 1',
        key: '0-0',
        children: [
          {
            name: 'parent 1-0',
            key: '0-0-0',
            children: [
              {
                name: 'leaf',
                key: '0-0-0-0',
              },
              {
                name: 'leaf',
                key: '0-0-0-1',
              },
            ],
          },
          {
            name: 'parent 1-1',
            key: '0-0-1',
            children: [
              {
                key: '0-0-1-0',
                name: 'sss',
              },
            ],
          },
        ],
      },
    ])
    const treeData1 = ref([
      {
        name: 'parent 1',
        key: '0-0',
        children: [
          {
            name: 'parent 1-0',
            key: '0-0-0',
            children: [
              {
                name: 'leaf',
                key: '0-0-0-0',
              },
              {
                name: 'leaf',
                key: '0-0-0-1',
              },
            ],
          },
          {
            name: 'parent 1-1',
            key: '0-0-1',
            children: [
              {
                key: '0-0-1-0',
                name: 'sss',
              },
            ],
          },
        ],
      },
    ])
    const fieldNames = ref({
      title: 'name',
    })
    const addNode = (node) => {
      console.log('addNode', node)
    }
    const editNode = (node) => {
      console.log('editNode', node)
    }
    const deleteNode = (node) => {
      console.log('deleteNode', node)
    }
    const complateEdit = (node) => {
      console.log('complateEdit', node)
    }
    const cancleEdit = (node) => {
      console.log('cancleEdit', node)
    }
    return {
      treeData,
      treeData1,
      fieldNames,
      addNode,
      editNode,
      deleteNode,
      complateEdit,
      cancleEdit,
    }
  },
})
</script>
  • beforeDeleteNode:
点击查看代码
<!--
 * @Author: jixuanyu
 * @Date: 2022-04-24 15:37:29
 * @LastEditors: jixuanyu
 * @Description: file content
-->
<!--
 * @Author: jixuanyu
 * @Date: 2022-04-18 15:43:46
 * @LastEditors: jixuanyu
 * @Description: file content
-->
<template>
  <div>
    <z-tree
      :tree-data="treeData"
      :field-names="fieldNames"
    >
      <template #operateIcon="{ node, parentKey, key }">
        <z-button @click="editNode(node, parentKey, key)">编辑</z-button>
      </template>
    </z-tree>
    <z-tree
      :tree-data="treeData"
      :field-names="fieldNames"
      isAdd
      isDelete
      isEdit
      :beforeDeleteNode="beforeDeleteNode"
      @addNode="addNode"
      @editNode="editNode"
      @deleteNode="deleteNode"
      @complateEdit="complateEdit"
      @cancleEdit="cancleEdit"
    />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { Modal } from 'ant-design-vue';

export default defineComponent({
  name: 'TreeDemo4',
  setup() {
    const treeData = ref([
      {
        name: 'parent 1',
        key: '0-0',
        children: [
          {
            name: 'parent 1-0',
            key: '0-0-0',
            children: [
              {
                name: 'leaf',
                key: '0-0-0-0',
              },
              {
                name: 'leaf',
                key: '0-0-0-1',
              },
            ],
          },
          {
            name: 'parent 1-1',
            key: '0-0-1',
            children: [
              {
                key: '0-0-1-0',
                name: 'sss',
              },
            ],
          },
        ],
      },
    ])
    const fieldNames = ref({
      title: 'name',
    })
    const beforeDeleteNode = (node, parentKey) => {
      console.log(node, parentKey,'节点 beforeDeleteNode')
      return new Promise((resolve,reject) => {
        Modal.confirm({
          title: 'Confirm',
          content: '确认删除当前节点？',
          okText: '确认',
          cancelText: '取消',
          onOk: ()=> {
            console.log('点击确认');
            resolve()
          }
        });
      })
    }
    const addNode = (node) => {
      console.log('addNode', node)
    }
    const editNode = (node, parentKey, key) => {
      console.log('editNode', node, parentKey, key)
    }
    const deleteNode = (node) => {
      console.log('deleteNode', node)
    }
    const complateEdit = (node) => {
      console.log('complateEdit', node)
    }
    const cancleEdit = (node) => {
      console.log('cancleEdit', node)
    }
    return {
      treeData,
      fieldNames,
      beforeDeleteNode,
      addNode,
      editNode,
      deleteNode,
      complateEdit,
      cancleEdit,
    }
  },
})
</script>

插槽

  • 使用自定义插槽可以个性化显示内容

    • switcherIcon
    • title 自定义标题
    • operateArea 固定在每行尾部，默认接受三个参数 node key parentKey

    DANGER

    operateArea是title插槽的子集如果使用title插槽会覆盖operateArea

点击查看代码
<template>
  <div>
    <z-tree
      :tree-data="treeData"
      :field-names="fieldNames"
    >
      <template #operateArea="{ node, parentKey, key }">
        <edit-outlined @click="editNode(node, parentKey, key)"/>
      </template>
    </z-tree>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'TreeDemo5',
  setup() {
    const treeData = ref([
      {
        name: 'parent 1',
        key: '0-0',
        children: [
          {
            name: 'parent 1-0',
            key: '0-0-0',
            children: [
              {
                name: 'leaf',
                key: '0-0-0-0',
              },
              {
                name: 'leaf',
                key: '0-0-0-1',
              },
            ],
          },
          {
            name: 'parent 1-1',
            key: '0-0-1',
            children: [
              {
                key: '0-0-1-0',
                name: 'sss',
              },
            ],
          },
        ],
      },
    ])
    const fieldNames = ref({
      title: 'name',
    })
    const editNode = (node, parentKey, key) => {
      console.log('editNode', node, parentKey, key)
    }
    return {
      treeData,
      fieldNames,
      editNode,
    }
  },
})
</script>

Tree props

参数说明类型默认值版本
autoExpandParent是否自动展开父节点booleanfalse
blockNode是否节点占据一行booleanfalse
checkable节点前添加 Checkbox 复选框booleanfalse
checkedKeys(v-model)（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置checkable和checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联string[] | number[] | {checked: string[] | number[], halfChecked: string[] | number[]}[]
checkStrictlycheckable 状态下节点选择完全受控（父子节点选中状态不再关联）booleanfalse
defaultExpandAll默认展开所有树节点, 如果是异步数据，需要在数据返回后再实例化，建议用 v-if="data.length"；当有 expandedKeys 时，defaultExpandAll 将失效booleanfalse
disabled将树禁用boolfalse
draggable设置节点可拖拽booleanfalse
expandedKeys(v-model)（受控）展开指定的树节点string[] | number[][]
fieldNames替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段object{children:'children', title:'title', key:'key' }
filterTreeNode按需筛选树节点（高亮），返回 truefunction(node)-
loadData异步加载数据function(node)-
loadedKeys（受控）已经加载的节点，需要配合 loadData 使用string[] | number[][]
multiple支持点选多个节点（节点本身）booleanfalse
selectable是否可选中booleantrue
selectedKeys(v-model)（受控）设置选中的树节点string[] | number[]-
showIcon是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式booleanfalse
showLine是否展示连接线boolean | {showLeafIcon: boolean}(3.0+)false
switcherIcon自定义树节点的展开/折叠图标slot-
title自定义标题slot
treeDatatreeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）TreeNode[]--
virtual设置 false 时关闭虚拟滚动booleantrue
isAdd全局开启新增按钮，可被treeNode的 addable 参数覆盖booleanfalse0.2.6
isEdit全局开启编辑按钮，可被treeNode的 editable 参数覆盖booleanfalse0.2.6
isAdd全局开启新增按钮，可被treeNode的 deleteable 参数覆盖booleanfalse0.2.6
operateArea固定在每行尾部，默认接受三个参数node key parentKeyslot-0.2.7

事件

事件名称说明回调参数
check点击复选框触发function(checkedKeys, e:{checked: bool, checkedNodes, node, event})
dragenddragend 触发时调用function({event, node})
dragenterdragenter 触发时调用function({event, node, expandedKeys})
dragleavedragleave 触发时调用function({event, node})
dragoverdragover 触发时调用function({event, node})
dragstart开始拖拽时调用function({event, node})
dropdrop 触发时调用function({event, node, dragNode, dragNodesKeys})
expand展开/收起节点时触发function(expandedKeys, {expanded: bool, node})
load节点加载完毕时触发function(loadedKeys, {event, node})
rightClick响应右键点击function({event, node})
select点击树节点触发function(selectedKeys, e:{selected: bool, selectedNodes, node, event})
addNode点击树节点新增icon触发function(node)
editNode点击树节点编辑icon触发function(node)
deleteNode点击树节点删除icon触发function(node)
complateEdit编辑状态下，点击树节点完成icon触发，返回值为当前节点，和完整树目录结构function(node, treeData)
cancleEdit点击树节点新增icon触发，返回值为当前节点，和完整树目录结构function(node, treeData)

TreeNode

参数说明类型默认值版本
checkable当树为 checkable 时，设置独立节点是否展示 Checkboxboolean-
class节点的 classstring-
disableCheckbox禁掉 checkboxbooleanfalse
disabled禁掉响应booleanfalse
icon自定义图标。可接收组件，props 为当前节点 propsslot|slot-scope-
isLeaf设置为叶子节点(设置了loadData时有效)booleanfalse
key被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！string | number内部计算出的节点位置
selectable设置节点是否可被选中booleantrue
style节点的 stylestring|object-
title标题string'---'
addable开启节点新增功能booleanfalse0.2.6
editable开启节点编辑功能booleanfalse0.2.6
deleteable开启节点删除功能booleanfalse0.2.6

DirectoryTree props

参数说明类型默认值
expandAction目录展开逻辑，可选 false 'click' 'dblclick'stringclick
Last Updated:
Contributors: jixuanyu