RegionPicker

Demos

Chinese Regions

Selected IDs: -
<template>
<article>
  <h4>Chinese Regions</h4>
  <section>
    <veui-region-picker
      v-model="selected"
      :datasource="region"
    />
  </section>
  <section>Selected IDs: {{ result }}</section>
</article>
</template>

<script>
import { RegionPicker } from 'veui'
import region from '@/common/region'

export default {
  components: {
    'veui-region-picker': RegionPicker
  },
  data () {
    return {
      region,
      selected: null
    }
  },
  computed: {
    result () {
      return (this.selected || []).join(', ') || '-'
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
datasourceArray<Object>[]

The datasource of the region picker. The type of node item is {label, value, disabled, children, ...}.

NameTypeDescription
labelstringThe descriptive label of the node.
valuestringThe value of the node.
disabledboolean=Whether the node is disabled.
childrenArray<Object>=The child nodes of the node. The node type is the same as datasource items.
selectedArray<string>-

v-model

The array of selected values.

include-indeterminatebooleanfalseWhether to include indeterminate node into selected nodes. Non-leaf nodes inside datasource will be in indeterminate state if their descendant nodes are partially selected.
disabledbooleanfalseWhether the region picker is disabled.
readonlybooleanfalseWhether the region picker is read-only.

Slots

NameDescription
label

The label content of each node. Displays the label property of each item by default.

NameTypeDescription
labelstringThe descriptive label of the node.
valuestringThe value of the node.
disabledboolean=Whether the node is disabled.
childrenArray<Object>=The child nodes of the node. The node type is the same as datasource items.
levelnumberThe depth of the node within the tree structure. 0 stands for the top level.
overlayboolean=Whether the node is displayed inside the overlay.

Additionally, custom properties apart from the listed ones will also be passes into the scope object via v-bind.

When level is 2 and overlay is true, the information of selected node count vs total node count will be displayed after the node label.

Events

NameDescription
select

v-model

Triggered when the selection changed. The callback parameter list is (value: Array). The type of value is the same as the selected prop.