❤
npm
Sign UpSign In

u-tree-view.vue

0.2.7 • Public • Published

树型视图（TreeView）

示例

基本形式

有两种书写方式，这里推荐使用Data方式，因为树型结构的数据有时非常多。

Tag方式

<u-tree-view>
    <u-tree-view-node text="节点1">
        <u-tree-view-node text="节点1.1"></u-tree-view-node>
        <u-tree-view-node text="节点1.2">
            <u-tree-view-node text="节点1.2.1"></u-tree-view-node>
            <u-tree-view-node text="节点1.2.2"></u-tree-view-node>
        </u-tree-view-node>
        <u-tree-view-node text="节点1.3"></u-tree-view-node>
        <u-tree-view-node text="节点1.4"></u-tree-view-node>
    </u-tree-view-node>
    <u-tree-view-node text="节点2"></u-tree-view-node>
    <u-tree-view-node text="节点3">
        <u-tree-view-node text="节点3.1"></u-tree-view-node>
        <u-tree-view-node text="节点3.2"></u-tree-view-node>
    </u-tree-view-node>
</u-tree-view>

Data方式

<u-tree-view :data="[
    { text: '节点1', children: [
        { text: '节点1.1' },
        { text: '节点1.2', children: [
            { text: '节点1.2.1' },
            { text: '节点1.2.2' },
        ] },
        { text: '节点1.3' },
        { text: '节点1.4' },
    ] },
    { text: '节点2' },
    { text: '节点3', children: [
        { text: '节点3.1' },
        { text: '节点3.2' },
    ] },
]"></u-tree-view>

自定义模板

但我们知道，Tag方式很容易自定义模板，而Data方式却不好扩展。我们提供了一个名为text的作用域插槽，可以很轻松地处理这个问题。

<u-tree-view :data="[
    { text: '文件夹1', type: 'directory', children: [
        { text: '文件夹1.1', type: 'directory' },
        { text: '文件夹1.2', type: 'directory', children: [
            { text: '文件1.2.1', type: 'file' },
            { text: '文件1.2.2', type: 'file' },
        ] },
        { text: '文件1.3', type: 'file' },
        { text: '文件1.4', type: 'file' },
    ] },
    { text: '文件夹2', type: 'directory' },
    { text: '文件夹3', type: 'directory', children: [
        { text: '文件3.1', type: 'file' },
        { text: '文件3.2', type: 'file' },
    ] },
]">
    <span slot="text" slot-scope="{ node, expanded, text }">
        {{ node.type === 'directory' ? (expanded ? '📂' : '📁') : '📄' }}
        {{ text }}
    </span>
</u-tree-view>

但text作用域插槽只支持扩展text文本内容，如果您的需求更加复杂，建议直接通过继承TreeView相关组件来实现。

选项值

Tag方式

<u-tree-view value="1.2">
    <u-tree-view-node text="节点1" value="1">
        <u-tree-view-node text="节点1.1" value="1.1"></u-tree-view-node>
        <u-tree-view-node text="节点1.2" value="1.2">
            <u-tree-view-node text="节点1.2.1" value="1.2.1"></u-tree-view-node>
            <u-tree-view-node text="节点1.2.2" value="1.2.2"></u-tree-view-node>
        </u-tree-view-node>
        <u-tree-view-node text="节点1.3" value="1.3"></u-tree-view-node>
        <u-tree-view-node text="节点1.4" value="1.4"></u-tree-view-node>
    </u-tree-view-node>
    <u-tree-view-node text="节点2" value="2"></u-tree-view-node>
    <u-tree-view-node text="节点3" value="3">
        <u-tree-view-node text="节点3.1" value="3.1"></u-tree-view-node>
        <u-tree-view-node text="节点3.2" value="3.2"></u-tree-view-node>
    </u-tree-view-node>
</u-tree-view>

Data方式

<u-tree-view value="1.2" :data="[
    { text: '节点1', value: '1', children: [
        { text: '节点1.1', value: '1.1' },
        { text: '节点1.2', value: '1.2', children: [
            { text: '节点1.2.1', value: '1.2.1' },
            { text: '节点1.2.2', value: '1.2.2' },
        ] },
        { text: '节点1.3', value: '1.3' },
        { text: '节点1.4', value: '1.4' },
    ] },
    { text: '节点2', value: '2' },
    { text: '节点3', value: '3', children: [
        { text: '节点3.1', value: '3.1' },
        { text: '节点3.2', value: '3.2' },
    ] },
]"></u-tree-view>

只读、禁用、禁用某一项

Tag方式

<u-tree-view readonly>
    <u-tree-view-node text="节点1">
        <u-tree-view-node text="节点1.1"></u-tree-view-node>
        <u-tree-view-node text="节点1.2">
            <u-tree-view-node text="节点1.2.1"></u-tree-view-node>
            <u-tree-view-node text="节点1.2.2"></u-tree-view-node>
        </u-tree-view-node>
        <u-tree-view-node text="节点1.3"></u-tree-view-node>
        <u-tree-view-node text="节点1.4"></u-tree-view-node>
    </u-tree-view-node>
    <u-tree-view-node text="节点2"></u-tree-view-node>
    <u-tree-view-node text="节点3">
        <u-tree-view-node text="节点3.1"></u-tree-view-node>
        <u-tree-view-node text="节点3.2"></u-tree-view-node>
    </u-tree-view-node>
</u-tree-view>
<u-tree-view disabled>
    <u-tree-view-node text="节点1">
        <u-tree-view-node text="节点1.1"></u-tree-view-node>
        <u-tree-view-node text="节点1.2">
            <u-tree-view-node text="节点1.2.1"></u-tree-view-node>
            <u-tree-view-node text="节点1.2.2"></u-tree-view-node>
        </u-tree-view-node>
        <u-tree-view-node text="节点1.3"></u-tree-view-node>
        <u-tree-view-node text="节点1.4"></u-tree-view-node>
    </u-tree-view-node>
    <u-tree-view-node text="节点2"></u-tree-view-node>
    <u-tree-view-node text="节点3">
        <u-tree-view-node text="节点3.1"></u-tree-view-node>
        <u-tree-view-node text="节点3.2"></u-tree-view-node>
    </u-tree-view-node>
</u-tree-view>
<u-tree-view>
    <u-tree-view-node text="节点1">
        <u-tree-view-node text="节点1.1"></u-tree-view-node>
        <u-tree-view-node text="节点1.2" disabled>
            <u-tree-view-node text="节点1.2.1"></u-tree-view-node>
            <u-tree-view-node text="节点1.2.2"></u-tree-view-node>
        </u-tree-view-node>
        <u-tree-view-node text="节点1.3" disabled></u-tree-view-node>
        <u-tree-view-node text="节点1.4"></u-tree-view-node>
    </u-tree-view-node>
    <u-tree-view-node text="节点2" disabled></u-tree-view-node>
    <u-tree-view-node text="节点3">
        <u-tree-view-node text="节点3.1"></u-tree-view-node>
        <u-tree-view-node text="节点3.2"></u-tree-view-node>
    </u-tree-view-node>
</u-tree-view>

Data方式

<u-tree-view :data="[
    { text: '节点1', children: [
        { text: '节点1.1' },
        { text: '节点1.2', disabled: true, children: [
            { text: '节点1.2.1' },
            { text: '节点1.2.2'}
        ] },
        { text: '节点1.3', disabled: true  },
        { text: '节点1.4' },
    ] },
    { text: '节点2', disabled: true  },
    { text: '节点3', children: [
        { text: '节点3.1' },
        { text: '节点3.2'}
    ]}
]"></u-tree-view>

可取消

<u-tree-view cancelable>
    <u-tree-view-node text="节点1">
        <u-tree-view-node text="节点1.1"></u-tree-view-node>
        <u-tree-view-node text="节点1.2">
            <u-tree-view-node text="节点1.2.1"></u-tree-view-node>
            <u-tree-view-node text="节点1.2.2"></u-tree-view-node>
        </u-tree-view-node>
        <u-tree-view-node text="节点1.3"></u-tree-view-node>
        <u-tree-view-node text="节点1.4"></u-tree-view-node>
    </u-tree-view-node>
    <u-tree-view-node text="节点2"></u-tree-view-node>
    <u-tree-view-node text="节点3">
        <u-tree-view-node text="节点3.1"></u-tree-view-node>
        <u-tree-view-node text="节点3.2"></u-tree-view-node>
    </u-tree-view-node>
</u-tree-view>

多选

<template>
<u-tree-view ref="treeView" checkable :data="data"></u-tree-view>
<p>{{ data }}</p>
</template>

<script>
export default {
    data() {
        return {
            data: [
                { text: '节点1', expanded: true, checked: false, children: [
                    { text: '节点1.1', expanded: false, checked: false },
                    { text: '节点1.2', expanded: true, checked: false, children: [
                        { text: '节点1.2.1', expanded: false, checked: false },
                        { text: '节点1.2.2', expanded: false, checked: false }
                    ] },
                    { text: '节点1.3', expanded: false, checked: false },
                    { text: '节点1.4', expanded: false, checked: false },
                ] },
                { text: '节点2', expanded: false, checked: false },
                { text: '节点3', expanded: false, checked: false },
            ],
        };
    },
};
</script>

案例

多选

<template>
<u-tree-view ref="treeView" checkable :data="data"></u-tree-view>
<u-button @click="checkAll(true)">全部选中</u-button>
<u-button @click="checkAll(false)">全部取消</u-button>
<u-button @click="toggleAll(true)">全部展开</u-button>
<u-button @click="toggleAll(false)">全部取消</u-button>
<p>{{ data }}</p>
</template>

<script>
export default {
    data() {
        return {
            data: [
                { text: '节点1', expanded: true, checked: false, children: [
                    { text: '节点1.1', expanded: false, checked: false },
                    { text: '节点1.2', expanded: true, checked: false, children: [
                        { text: '节点1.2.1', expanded: false, checked: false },
                        { text: '节点1.2.2', expanded: false, checked: false }
                    ] },
                    { text: '节点1.3', expanded: false, checked: false },
                    { text: '节点1.4', expanded: false, checked: false },
                ] },
                { text: '节点2', expanded: false, checked: false },
                { text: '节点3', expanded: false, checked: false },
            ],
        };
    },
    methods: {
        checkAll(checked) {
            this.$refs.treeView.checkAll(checked);
        },
        toggleAll(expanded) {
            this.$refs.treeView.toggleAll(expanded);
        }
    },
};
</script>

TreeView API

Attrs/Props

Attr/Prop Type Default Description
data Array<{ text, value }> Data书写方式中的数据列表
value.sync, v-model Any 当前选择的值
field String 'text' 显示文本字段
cancelable Boolean false 是否可以取消选择
checkable Boolean false 是否可以选中/取消
readonly Boolean false 是否只读
disabled Boolean false 是否禁用

Slots

(default)

在插槽中插入<u-tree-view-node>子组件

Events

@before-select

选择某一项前触发

Param Type Description
$event.value Any 选择项的值
$event.oldValue Any 旧的值
$event.node Object 选择项相关对象
$event.nodeVM TreeViewNode 选择项子组件
$event.preventDefault Function 阻止选择流程

@input

选择某一项时触发

Param Type Description
$event Any 选择项的值

@select

选择某一项时触发

Param Type Description
$event.value Any 改变后的值
$event.oldValue Any 旧的值
$event.node Object 选择项相关对象
$event.nodeVM TreeViewNode 选择项子组件

@toggle

展开/收起某节点时触发

Param Type Description
$event.expanded Boolean 展开/收起状态
$event.node Object 节点相关对象
$event.nodeVM TreeViewNode 节点组件

@check

选中/取消节点时触发

Param Type Description
$event.checked Boolean 选中/取消状态
$event.oldChecked Boolean 旧的选中/取消状态
$event.node Object 节点相关对象
$event.nodeVM TreeViewNode 节点组件

Methods

toggleAll(expanded)

展开/收起所有节点

Param Type Description
expanded Boolean 展开/收起

checkAll(checked)

选中/取消所有节点

Param Type Description
expanded Boolean 选中/取消

TreeViewNode API

Attrs/Props

Attr/Prop Type Default Description
value Any 此项的值
expanded.sync Any 展开/收起状态
checked.sync Any 选中/取消状态
disabled Boolean false 禁用此项
node Object 相关对象。当选择此项时，抛出的事件会传递该对象，便于开发

Slots

(default)

在插槽中插入文本或HTML

Events

@before-select

选择此项前触发

Param Type Description
$event.value Any 此项的值
$event.node Object 此项的相关对象
$event.nodeVM TreeViewNode 此组件
$event.preventDefault Function 阻止选择流程

@before-toggle

展开/收起此节点前触发

Param Type Description
$event.expanded Boolean 展开/收起状态
$event.node Object 节点相关对象
$event.nodeVM TreeViewNode 节点组件
$event.preventDefault Function 阻止选择流程

@toggle

展开/收起某节点时触发

Param Type Description
$event.expanded Boolean 展开/收起状态
$event.node Object 节点相关对象
$event.nodeVM TreeViewNode 节点组件

@check

选中节点时触发

Param Type Description
$event.checked Boolean 选中状态
$event.oldChecked Boolean 旧的选中状态
$event.node Object 节点相关对象
$event.nodeVM TreeViewNode 节点组件

Readme

Keywords

Package Sidebar

Install

npm i u-tree-view.vue

Repository

github.com/vusion/proto-ui

Homepage

vusion.github.io

Weekly Downloads

0

Version

0.2.7

License

MIT

Last publish

Collaborators

  • rainfore
Try on RunKit
Report malware