TreeSelect

When there are deep of options, use tree selectors is more suitable than ordinary select

Tip

You can choose ElTreeSelect instead of this component

Use

Basic Use

Set data attribute will automatic generate options (same like Select Group)

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
    clearable
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const data = ref([
      {
        label: '1',
        value: 1,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1' }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1' }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

Disabled State

Set the disabled attribute in prop data

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const data = ref([
      {
        label: '1',
        value: 1,
        disabled: true,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            disabled: true,
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1', disabled: true }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1', disabled: true }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

Configure binding data key

Set config attribute. value- v-model bind key; label- display key; disabled- Disabled key; children- children key

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
    :config="config"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const config = ref({ value: 'label', label: 'value' })
    const data = ref([
      {
        label: '1',
        value: 1,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1' }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1' }],
          },
        ],
      },
    ])

    return {
      select,
      config,
      data,
    }
  },
})
</script>

Basic multiple select

Set multiple attribute to enable multiple mode. In this case, the value of v-model will be an array of selected options

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
    multiple
    clearable
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      {
        label: '1',
        value: 1,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1' }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1' }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

Hide extra tags

You can collapse tags to a text by using collapse-tags attribute. You can check them when mouse hover collapse text by using collapse-tags-tooltip attribute.

collapse-tags:
collapse-tags-tooltip:
<template>
  <div>
    <span>collapse-tags: </span>
    <pro-tree-select
      v-model="select"
      :data="data"
      multiple
      collapse-tags
    />
  </div>
  <div>
    <span>collapse-tags-tooltip: </span>
    <pro-tree-select
      v-model="select"
      :data="data"
      multiple
      collapse-tags
      collapse-tags-tooltip
    />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      {
        label: '1',
        value: 1,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1' }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1' }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

Disabled State on multiple select

Same like default select. Set the disabled attribute in prop data

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
    multiple
    default-expand-all
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      {
        label: '1',
        value: 1,
        disabled: true,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            disabled: true,
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1', disabled: true }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1', disabled: true }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

Check Strictly

Set check-strictly attribute to checked state of a node not affects its father and child nodes

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
    multiple
    check-strictly
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      {
        label: '1',
        value: 1,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1' }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1' }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

Only Select Leaf

Set only-select-leaf attribute to only the data of child nodes will be selected

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
    multiple
    only-select-leaf
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      {
        label: '1',
        value: 1,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1' }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1' }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

Custom node content

Use default slot to enable custom node content. Note: In the single select mode, you need to refer to the following content to customize the class to achieve control disabled item styles

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
  >
    <template #default="{ node, item, multiple }">
      <p
        :class="node.disabled && !multiple ? 'is-disabled' : ''"
        class="custom-tree-node"
      >
        <span>{{ item.label }}</span>
        <em>{{ item.value }}</em>
      </p>
    </template>
  </pro-tree-select>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const data = ref([
      {
        label: '1',
        value: 1,
        disabled: true,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            disabled: true,
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1', disabled: true }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1', disabled: true }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.custom-tree-node em {
  padding-right: 15px;
}
</style>

Tree node filtering

Set filterable attribute to enable node filtering. Enter text in the input, the content of the tree node will be filtered

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
    multiple
    filterable
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      {
        label: '1',
        value: 1,
        children: [
          {
            value: 11,
            label: '1-1',
            children: [{ value: 111, label: '1-1-1' }],
          },
        ],
      },
      {
        value: 2,
        label: '2',
        children: [
          {
            value: 21,
            label: '2-1',
            children: [{ value: 211, label: '2-1-1' }],
          },
          {
            value: 22,
            label: '2-2',
            children: [{ value: 221, label: '2-2-1' }],
          },
        ],
      },
      {
        value: 3,
        label: '3',
        children: [
          {
            value: 31,
            label: '3-1',
            children: [{ value: 311, label: '3-1-1' }],
          },
          {
            value: 32,
            label: '3-2',
            children: [{ value: 321, label: '3-2-1' }],
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

Lazy Mode

Same like ElTree, set lazy and load attribute to enable lazy mode

<template>
  <pro-tree-select
    v-model="select"
    :data="data"
    :load="loadNode"
    lazy
    multiple
    filterable
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = []

    function loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([
          {
            label: 'region',
            value: 'region',
            isLeaf: true,
          },
        ])
      }
      if (node.level > 2) return resolve([])

      setTimeout(() => {
        const data = [
          {
            label: 'leaf-' + node.level,
            value: 'leaf-' + node.level,
            isLeaf: node.level <= 2,
          },
          {
            label: 'zone-' + node.level,
            value: 'zone-' + node.level,
          },
        ]
        resolve(data)
      }, 500)
    }

    return {
      select,
      data,
      loadNode,
    }
  },
})
</script>

Props

NameDescriptionTypeOptionsDefault
v-modelbinding valuearray--
databinding dataarray--
configconfig the key of dataobject-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, children: ‘children’ }
multiplewhether multiple-select is activatedboolean-false
disabledwhether disabledboolean-false
sizecomponent sizestringlarge / default /small-
clearablewhether clearableboolean-false
collapse-tagswhether to collapse tags to a text when multiple selectingboolean-false
collapse-tags-tooltipwhether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be trueboolean-false
namethe name attribute of select inputstring--
autocompletethe autocomplete attribute of select inputstringon / offoff
placeholderplaceholderstring-Select
only-select-leafwhether to select only child leafboolean-false
filterablewhether Select is filterableboolean-false
reserve-keywordwhen multiple and filter is true, whether to reserve current keyword after selecting an optionboolean-false
teleportedwhether select dropdown is teleported to the bodyboolean-true
automatic-dropdownfor non-filterable Select, this prop decides if the option menu pops up when the input is focusedboolean-false
clear-iconCustom clear icon classstring / Component-CircleClose
fit-input-widthwhether the width of the dropdown is the same as the inputbooleanfalse
suffix-iconCustom suffix icon componentstring / ComponentArrowUp
tag-typetag typestringsuccess / info / warning / dangerinfo
render-after-expandwhether to render child nodes only after a parent node is expanded for the first timebooleantrue
loadmethod for loading subtree data, only works when lazy is truefunction(node, resolve)
render-contentrender function for tree nodeFunction(h, { node, data, store })
default-expand-allwhether to expand all nodes by defaultbooleanfalse
expand-on-click-nodewhether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.booleantrue
check-on-click-nodewhether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox.booleanfalse
auto-expand-parentwhether to expand father node when a child node is expandedbooleantrue
default-expanded-keysarray of keys of initially expanded nodesarray
check-strictlywhether checked state of a node not affects its father and child nodes when show-checkbox is truebooleanfalse
filter-node-methodthis function will be executed on each node when use filter method. if return false, tree node will be hidden.Function(value, data, node)
accordionwhether only one node among the same level can be expanded at one timebooleanfalse
indenthorizontal indentation of nodes in adjacent levels in pixelsnumber16
icon-classcustome tree node iconstring--
lazywhether to lazy load leaf node, used with load attributebooleanfalse
draggablewhether enable tree nodes drag and dropbooleanfalse
allow-dragthis function will be executed before dragging a node. If false is returned, the node can not be draggedFunction(node)
allow-dropthis function will be executed before the dragging node is dropped. If false is returned, the dragging node can not be dropped at the target node. type has three possible values: ‘prev’ (inserting the dragging node before the target node), ‘inner’ (inserting the dragging node to the target node) and ‘next’ (inserting the dragging node after the target node)Function(draggingNode, dropNode, type)
validate-eventwhether to trigger form validationboolean-true

Events

NameDescriptionParameters
changetriggers when the selected value changescurrent selected value
visible-changetriggers when the dropdown appears/disappearstrue when it appears, and false otherwise
remove-tagtriggers when a tag is removed in multiple moderemoved tag value
cleartriggers when the clear icon is clicked in a clearable Select
blurtriggers when Input blurs(event: Event)
focustriggers when Input focuses(event: Event)
node-clicktriggers when a node is clickedthree parameters: node object corresponding to the node clicked, node property of TreeNode, TreeNode itself
node-contextmenutriggers when a node is clicked by right buttonfour parameters: event, node object corresponding to the node clicked, node property of TreeNode, TreeNode itself
check-changetriggers when the selected state of the node changesthree parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node’s subtree has selected nodes
checktriggers after clicking the checkbox of a nodetwo parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys
current-changetriggers when current node changestwo parameters: node object corresponding to the current node, node property of TreeNode
node-expandtriggers when current node openthree parameters: node object corresponding to the node opened, node property of TreeNode, TreeNode itself
node-collapsetriggers when current node closethree parameters: node object corresponding to the node closed, node property of TreeNode, TreeNode itself
node-drag-starttriggers when dragging startstwo parameters: node object corresponding to the dragging node, event.
node-drag-entertriggers when the dragging node enters another nodethree parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event.
node-drag-leavetriggers when the dragging node leaves a nodethree parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.
node-drag-overtriggers when dragging over a node (like mouseover event)three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.
node-drag-endtriggers when dragging endsfour parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be undefined), node drop type (before / after / inner), event.
node-droptriggers after the dragging node is droppedfour parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event.

Slots

NameDescription
-Custom content for tree nodes. The scope parameter is { node, item, multiple }