Tree 树形控件

示例

尺寸

可选的尺寸 ui 属性值:m / s

Normal size

  • Infused

Small size

  • Infused
在 GitHub 上编辑此页编辑
<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>

控制展开、选中状态

  • Infused
    • Brewed
      • Drip brewed
      • Filtered
      • Pour-over
      • Immersion brewed
    • French press
    • Cold brew
  • Boiled
  • Espresso
  • Milk coffee

Expanded items

[ "infused", "brewed" ]

Checked items

[]

Selected item

在 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

属性

名称类型默认值描述
uistring=-

预设样式。

描述
s小尺寸样式。
m中尺寸样式。
datasourceArray<Object>[]

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

名称类型描述
labelstring节点的文字描述。
valuestring节点对应的值。
disabledboolean=节点是否被禁用。
childrenArray<Object>=节点的子节点数组,数组项类型同 datasource 数组项。
expandedArray[]

.sync

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

checkablebooleanfalse子节点是否可勾选。
checkedArray[]

v-model

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

selectablebooleanfalse点击整个节点区域时是否选中该节点。
selectedstring-

.sync

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

merge-checkedstringkeep-all

选中值的合并策略。

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

插槽

名称描述
item

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

名称类型描述
labelstring节点的文本描述。
valuestring节点的值。
disabledboolean=节点是否被禁用。
childrenArray<Object>=节点的子节点数组,数组项类型同 datasource 数组项。
indexnumber当前数据节点在共父节点层级的索引。
depthnumber当前数据节点在树种的深度。

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

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

事件

名称描述
click

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

名称类型描述
itemObject节点数据。数组项类型与 datasource 项目相同。
parentsArray<Object>从根节点到当前节点父节点的路径。数组项类型与 datasource 项目相同。
indexnumber当前节点在自己所属层级的索引。
depthnumber当前节点在树形层级中的深度。
expand

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

名称类型描述
itemObject节点数据。数组项类型与 datasource 项目相同。
indexnumber当前节点在自己所属层级的索引。
depthnumber当前节点在树形层级中的深度。
collapse

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

名称类型描述
itemObject节点数据。数组项类型与 datasource 项目相同。
indexnumber当前节点在自己所属层级的索引。
depthnumber当前节点在树形层级中的深度。
check

v-model

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

图标

名称描述
expand收起状态,点击后展开。
collapse展开状态,点击后收起。
在 GitHub 上编辑此页编辑