Tree 树形控件 ^2.10.0

代码演示

基础用法

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

<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>

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

节点过滤

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

<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.indexOf(keyword.value) !== -1 : true
}

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

<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