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 |

组件缺点（待完善）如何您可以接受(问题：[email protected])

会给原数据添加三个属性hierarchy、isUnfold、nextLevel

本人才疏学浅，定有差池，还请各位前辈多加斧正，小子必定受用无穷