Tree 树形控件

示例

尺寸

可供选用的尺寸 ui 属性值：m / s。

Normal size

Infused

Small size

Infused

<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-tree
      ui="m"
      :datasource="datasource"
    />
  </section>
  <section>
    <h4>Small size</h4>
    <veui-tree
      ui="s"
      :datasource="datasource"
    />
  </section>
</article>
</template>

<script>
import { Tree } from 'veui'

export default {
  components: {
    'veui-tree': Tree
  },
  data () {
    return {
      datasource: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

section {
  width: 45%;
}
</style>

控制展开、选中状态

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-tree
      v-model="checked"
      :datasource="coffees"
      :expanded.sync="expanded"
      checkable
      selectable
      :selected.sync="selected"
    />
  </section>
  <section>
    <h4>Expanded items</h4>
    {{ expanded }}
    <h4>Checked items</h4>
    {{ checked }}
    <h4>Selected item</h4>
    {{ selected }}
  </section>
</article>
</template>

<script>
import { Tree } from 'veui'

export default {
  components: {
    'veui-tree': Tree
  },
  data () {
    return {
      expanded: ['infused', 'brewed'],
      checked: [],
      selected: null,
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered',
                  disabled: true
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          disabled: true,
          children: [
            {
              label: 'Percolated',
              value: 'percolated'
            },
            {
              label: 'Turkish',
              value: 'turkish'
            },
            {
              label: 'Moka',
              value: 'moka'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo',
              disabled: true
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro'
            },
            {
              label: 'Doppio',
              value: 'doppio'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

h4 {
  margin: 0;
}
h4 + h4 {
  margin-top: 20px;
}

section {
  width: 45%;
}
</style>

自定义内容

Custom label

Infused
Boiled
Espresso
Milk coffee

Custom item

Infused
Boiled
Espresso
Milk coffee

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <h4>Custom label</h4>
    <veui-tree
      :datasource="coffees"
      item-click="toggle"
    >
      <template #item-label="{ item }">
        <i>{{ item.label }}</i>
      </template>
    </veui-tree>
  </section>
  <section>
    <h4>Custom item</h4>
    <veui-tree
      :datasource="coffees"
      item-click="toggle"
      class="custom-item"
    >
      <template #item="{ children, expanded, label }">
        <template v-if="children && children.length">
          <veui-button
            ui="aux icon"
            class="custom-toggle"
          >
            <veui-icon :name="expanded ? 'minus' : 'plus'"/>
          </veui-button>
          {{ label }}
        </template>
      </template>
    </veui-tree>
  </section>
</article>
</template>

<script>
import { Tree, Button, Icon } from 'veui'
import 'veui-theme-dls-icons/plus'
import 'veui-theme-dls-icons/minus'

export default {
  components: {
    'veui-tree': Tree,
    'veui-button': Button,
    'veui-icon': Icon
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          children: [
            {
              label: 'Percolated',
              value: 'percolated'
            },
            {
              label: 'Turkish',
              value: 'turkish'
            },
            {
              label: 'Moka',
              value: 'moka'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro'
            },
            {
              label: 'Doppio',
              value: 'doppio'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

h4 {
  margin-top: 0;
}

section {
  width: 45%;
}

.custom-toggle {
  margin-right: 4px;
}
</style>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`s`	小尺寸样式。
`m`	中尺寸样式。

datasource

Array<Object>

[]

数据源数组，每个项目类型为 {label, value, disabled, children, ...}。

名称	类型	描述
`label`	`string`	节点的文字描述。
`value`	`string`	节点对应的值。
`disabled`	`boolean`	节点是否被禁用。
`children`	`Array<Object>`	节点的子节点数组，数组项类型同 `datasource` 数组项。

expanded

Array

[]

.sync

指定当前展开的节点，是一个对应于 datasource 中节点数据中 value 属性的数组。

checkable boolean false 子节点是否可勾选。

checked

Array

[]

v-model

当前被勾选的叶节点的值，是一个对应于 datasource 中节点数据中 value 属性的数组。

selectable boolean false 点击整个节点区域时是否选中该节点。

selected

string

.sync

当前被选中的叶节点的值，是一个对应于 datasource 中节点数据中 value 属性的数组。

merge-checked

string

keep-all

选中值的合并策略。

值	描述
`keep-all`	父子节点都会在选中值中。
`upwards`	尽可能往祖先方向合并选中值。
`downwards`	尽可能往后代方向合并选中值。

include-indeterminate boolean false 是否将半选状态的节点加入已选项。datasource 节点中的非叶子节点若有部分子孙节点被选中，则为半选状态。

插槽

名称描述

item

每个节点的整个内容区域。

名称	类型	描述
`label`	`string`	节点的文本描述。
`value`	`string`	节点的值。
`disabled`	`boolean`	节点是否被禁用。
`children`	`Array<Object>`	节点的子节点数组，数组项类型同 `datasource` 数组项。
`index`	`number`	当前数据节点在共父节点层级的索引。
`depth`	`number`	当前数据节点在树种的深度。

另外，datasource 内数据项中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到插槽参数上。

item-label 每个节点的文本区域。插槽参数与 item 插槽一致。

item-before 每个节点的文本之前的区域。插槽参数与 item 插槽一致。

item-after 每个节点的文本之后的区域。插槽参数与 item 插槽一致。

事件

名称描述

click

点击节点触发，回调参数为 (item, parents, index, depth)。

名称	类型	描述
`item`	`Object`	节点数据。数组项类型与 `datasource` 项目相同。
`parents`	`Array<Object>`	从根节点到当前节点父节点的路径。数组项类型与 `datasource` 项目相同。
`index`	`number`	当前节点在自己所属层级的索引。
`depth`	`number`	当前节点在树形层级中的深度。

expand

节点展开时触发。回调参数为 (item, index, depth)。

名称	类型	描述
`item`	`Object`	节点数据。数组项类型与 `datasource` 项目相同。
`index`	`number`	当前节点在自己所属层级的索引。
`depth`	`number`	当前节点在树形层级中的深度。

collapse

点击收起图标或者整个节点时触发，由 item-click 属性决定，回调参数为 (item, index, depth)。

名称	类型	描述
`item`	`Object`	节点数据。数组项类型与 `datasource` 项目相同。
`index`	`number`	当前节点在自己所属层级的索引。
`depth`	`number`	当前节点在树形层级中的深度。

check

v-model

勾选状态变化后触发，回调参数为 (value: Array)。value 为当前勾选中的叶节点的 value 字段组成的数组（受 keys 属性影响）。

图标

名称	描述
`expand`	收起状态，点击后展开。
`collapse`	展开状态，点击后收起。

在 GitHub 上编辑此页面编辑