Zm-tree NPM | npm.io

zm-tree

基于vue3 + ts封装的树形组件

How to use

// 在mian.ts中引入并使用
import { createApp } from 'vue'
import ZmTree from 'zm-tree'
import 'zm-tree/css'
const app = createApp(App)
app.use(ZmTree)

//基础使用
<template>
    <zm-tree :data="data" @node-click="handleNodeClick"></zm-tree>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface treeData {
  label: string
  id: number | string
  children: treeData[]
}
const arr: treeData[] = [
  {
    label: '第一层1',
    id: 1,
    children: [
      {
        label: '第一层11',
        id: 11,
        children: [
          {
            label: '第一层111',
            id: 111,
            children: []
          }
        ]
      }
    ]
  },
  {
    label: '第二层2',
    id: 2,
    children: [
      {
        id: 22,
        label: '第二层22',
        children: []
      }
    ]
  }
]
let data = ref(arr)
const handleNodeClick = (data: treeData) => {
  console.log(data)
}
</script>

//使用复选框
<template>
    <zm-tree :data="data" show-checkbox ref="treeRef"></zm-tree>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface treeData {
  label: string
  id: number | string
  children: treeData[]
}
const arr: treeData[] = [
  {
    label: '第一层1',
    id: 1,
    children: [
      {
        label: '第一层11',
        id: 11,
        children: [
          {
            label: '第一层111',
            id: 111,
            children: []
          }
        ]
      }
    ]
  },
  {
    label: '第二层2',
    id: 2,
    children: [
      {
        id: 22,
        label: '第二层22',
        children: []
      }
    ]
  }
]
let data = ref(arr)

//获取选择值的id
 const treeRef = ref()
 const getCheckedNodes = () => {
  console.log(treeRef.value!.getCheckedKeys())
 }
</script>

//自定义节点内容 && 获取选择中值的id
<template>
    <zm-tree :data="data">
      <template #default="{ scoped: { node, data } }">
        <span class="append-btn" @click="appendFn(data)">Append</span>
        <span class="append-btn" @click="deleteFn(node, data)">Delete</span>
      </template>
    </zm-tree>
    <button @click="getCheckedNodes">获取节点</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface treeData {
  label: string
  id: number | string
  children: treeData[]
}
const arr: treeData[] = [
  {
    label: '第一层1',
    id: 1,
    children: [
      {
        label: '第一层11',
        id: 11,
        children: [
          {
            label: '第一层111',
            id: 111,
            children: []
          }
        ]
      }
    ]
  },
  {
    label: '第二层2',
    id: 2,
    children: [
      {
        id: 22,
        label: '第二层22',
        children: []
      }
    ]
  }
]
let data = ref(arr)
const appendFn = item => {
  let num = Math.random().toFixed(2)
  const newChild = {
    label: 'test' + num,
    id: num,
    children: []
  }
  if (!item.children) {
    item.children = []
  }
  item.children.push(newChild)
}

const deleteFn = (node, item) => {
  let id = item.id
  node.splice(
    node.findIndex(item => item.id === id),
    1
  )
}
</script>

<style scoped lang="scss">
.append-btn,
.delete-btn {
  color: #409eff;
  margin-left: 10px;
  cursor: pointer;
}
</style>

配置项

属性名	说明	类型	可选值	默认值
data	展示数据	array	-	-
indent	相邻级节点间的水平缩进，单位为像素	number	-	18
show-checkbox	节点是否可被选择	boolean	-	false
check-strictly	目前严格的遵循父子不互相关联的做法，默认为 true(不支持父子相互关联)	boolean	-	true
default-checked-keys	默认勾选的节点的 key 的数组	array	-	-
default-expand-all	是否默认展开所有节点	boolean	-	false
default-expanded-keys	默认展开的节点的 key 的数组	array	-	-
isDrag	是否开启拖拽功能	boolean	-	False