Tree 树形控件 ^2.10.0

代码演示

基础用法

<script setup>
import { ref } from 'vue'
import { Tree as XTree } from '@/components/index.js'

const defaultExpandAll = ref(false)
const blockNode = ref(false)
const checkable = ref(false)
const switcher = ref(true)
const treeData = ref([
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', title: 'sss' }],
      },
    ],
  },
])
</script>

<template>
  <div>
    <div class="mb-4 flex items-center gap-3 flex-wrap">
      <div>
        默认展开：
        <a-switch v-model:checked="defaultExpandAll" />
      </div>
      <div>
        节点占一行：
        <a-switch v-model:checked="blockNode" />
      </div>
      <div>
        显示复选框：
        <a-switch v-model:checked="checkable" />
      </div>
      <div>
        显示 switcher：
        <a-switch v-model:checked="switcher" />
      </div>
    </div>
    <x-tree
      :block-node="blockNode"
      :checkable="checkable"
      :default-expand-all="defaultExpandAll"
      :switcher="switcher"
      :tree-data="treeData"
    />
  </div>
</template>

<style lang="less" scoped></style>

节点过滤

<script setup>
import { ref } from 'vue'
import { Tree as XTree } from '@/components/index.js'
import { tree2list } from '@/utils'

const keyword = ref('')
const keepChildNodes = ref(false)
const expandedKeys = ref([])
const treeData = ref([
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', title: 'sss' }],
      },
    ],
  },
])

function onFilterMethod(record) {
  return keyword.value ? record.title.includes(keyword.value) : true
}

function onChange() {
  if (keyword.value) {
    expandedKeys.value = tree2list(treeData.value).map(item => item.key)
  }
  else {
    expandedKeys.value = []
  }
}
</script>

<template>
  <div>
    <div class="flex items-center gap-3 mb-2">
      <a-input
        v-model:value="keyword"
        :style="{ width: '240px' }"
        placeholder="请输入关键字"
        @change="onChange"
      />
      <span>
        筛选结果保留子节点：
        <a-switch v-model:checked="keepChildNodes" />
      </span>
    </div>
    <x-tree
      :tree-data="treeData"
      :keep-child-nodes="keepChildNodes"
      :expanded-keys="expandedKeys"
      :filter-method="onFilterMethod"
    />
  </div>
</template>

<style lang="less" scoped></style>

API

Props

参数	说明	类型	默认值
tree-data	数据源，与 Ant Design Vue 保持一致	array	-
default-expand-all	默认展开所有树节点，为了解决 Ant Design Vue 树组件中需要重新实例化才能展开，在这里进行的拓展	boolean	true
switcher	显示树节点的展开/折叠图标	boolean	true
filter-method	按需筛选树节点，返回 true	boolean	-
keep-child-nodes	保留子节点，配合 filter-method 使用，设置为 true 时，筛选后的数据中不移除子节点（即便子节点不符合匹配条件）	boolean	true

TIP

其他属性请参考 Ant Design Vue