TagSelect

Filter tags, suitable for list query pages.

Basic Usage

Pass in options to automatically generate options

<script lang="ts" setup>
import { ref } from 'vue'

const tagSelect = ref(1)
const options = [
  { label: 'Tag 1', value: 1 },
  { label: 'Tag 2', value: 2 },
  { label: 'Tag 3', value: 3 },
  { label: 'Tag 4', value: 4 },
]
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :options="options"
  />
</template>

Title

Pass title to configure title, supports string, string with Slot and render function

<script lang="ts" setup>
import { ref } from 'vue'

const tagSelect = ref(1)
const options = [
  { label: 'Tag 1', value: 1 },
  { label: 'Tag 2', value: 2 },
  { label: 'Tag 3', value: 3 },
  { label: 'Tag 4', value: 4 },
]
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :options="options"
    title="Filter:"
  />
</template>

Multiple Selection

Set multiple to true to enable multiple selection functionality By default adds All tag, set all to false to disable (All tag only exists in multiple mode)

<script lang="ts" setup>
import { ref } from 'vue'

const tagSelect = ref([1])
const allTagSelect = ref([1])
const options = [
  { label: 'Tag 1', value: 1 },
  { label: 'Tag 2', value: 2 },
  { label: 'Tag 3', value: 3 },
  { label: 'Tag 4', value: 4 },
]
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :multiple="true"
    :options="options"
    title="Filter 1:"
  />
  <z-tag-select
    v-model="allTagSelect"
    :multiple="true"
    :all="false"
    :options="options"
    title="Filter 2:"
  />
</template>

Expand/Collapse

When tag width exceeds parent width, it will automatically collapse. Click Expand to expand all tags

<script lang="ts" setup>
import { ref } from 'vue'

const tagSelect = ref(1)
const options = [
  { label: 'Tag 1', value: 1 },
  { label: 'Tag 2', value: 2 },
  { label: 'Tag 3', value: 3 },
  { label: 'Tag 4', value: 4 },
  { label: 'Tag 5', value: 5 },
  { label: 'Tag 6', value: 6 },
  { label: 'Tag 7', value: 7 },
  { label: 'Tag 8', value: 8 },
  { label: 'Tag 9', value: 9 },
  { label: 'Tag 10', value: 10 },
  { label: 'Tag 11', value: 11 },
  { label: 'Tag 12', value: 12 },
  { label: 'Tag 13', value: 13 },
  { label: 'Tag 14', value: 14 },
  { label: 'Tag 15', value: 15 },
  { label: 'Tag 16', value: 16 },
  { label: 'Tag 17', value: 17 },
  { label: 'Tag 18', value: 17 },
  { label: 'Tag 19', value: 19 },
  { label: 'Tag 20', value: 20 },
  { label: 'Tag 21', value: 21 },
  { label: 'Tag 22', value: 22 },
  { label: 'Tag 23', value: 23 },
  { label: 'Tag 24', value: 24 },
]
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :options="options"
    title="Filter:"
  />
</template>

Events

Configure onClick and onClose in option to listen to tag click and close events

<script lang="ts" setup>
import { ref } from 'vue'

const tagSelect = ref([1])
const options = [
  {
    label: 'Tag 1',
    value: 1,
    onClick: (option) => { console.log(option, 'click') },
    closable: true,
    onClose: (option) => { console.log(option, 'close') },
  },
  { label: 'Tag 2', value: 2 },
  { label: 'Tag 3', value: 3 },
  { label: 'Tag 4', value: 4 },
]

const handleChange = (val) => {
  console.log(val, 'change')
}
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :options="options"
    :multiple="true"
    @change="handleChange"
  />
</template>

Tag Groups

Configure children in options items to generate tag groups Pass object to modelValue, field field in option configuration is the key of the object

<script lang="ts" setup>
import { h, ref } from 'vue'
const tagSelect = ref({
  aaa: [1],
  bbb: [2],
})

const options = ref([
  {
    title: () => h('span', 'Tag Name:'),
    field: 'aaa',
    children: [
      { label: 'Tag 1', value: 1 },
      { label: 'Tag 2', value: 2 },
      { label: 'Tag 3', value: 3 },
      { label: 'Tag 4', value: 4 },
    ],
  },
  {
    title: 'titleSlot',
    field: 'bbb',
    children: [
      { label: 'Label', value: 1 },
      { label: 'Suzhou', value: 2 },
      { label: 'Wuxi', value: 3 },
      { label: 'Lianyungang', value: 4 },
    ],
  },
])
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :options="options"
    :multiple="true"
  >
    <template #titleSlot>
      <span>City Name:</span>
    </template>
  </z-tag-select>
</template>

Field Path

The field field in option configuration can be configured as field path

<script lang="ts" setup>
import { ref } from 'vue'

const tagSelect = ref({
  aaa: {
    aaa: [1],
  },
  bbb: [2],
})

const alias = {
  label: 'title',
  value: 'data.key',
}

const options = ref([
  {
    title: 'Tag Name:',
    field: 'aaa.aaa',
    children: [
      { title: 'Tag 1', data: { key: 1 } },
      { title: 'Tag 2', data: { key: 2 } },
      { title: 'Tag 3', data: { key: 3 } },
      { title: 'Tag 4', data: { key: 4 } },
    ],
  },
  {
    title: 'City Name:',
    field: 'bbb',
    children: [
      { title: 'Label', data: { key: 1 } },
      { title: 'Suzhou', data: { key: 2 } },
      { title: 'Wuxi', data: { key: 3 } },
      { title: 'Lianyungang', data: { key: 4 } },
    ],
  },
])
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :options="options"
    :multiple="true"
    :alias="alias"
  />
</template>

Title Width

Pass titleWidth to configure title width

<script lang="ts" setup>
import { ref } from 'vue'
const tagSelect = ref({
  aaa: [1],
  bbb: [2],
})

const options = ref([
  {
    title: 'Tag Name Tag Name:',
    field: 'aaa',
    children: [
      { label: 'Tag 1', value: 1 },
      { label: 'Tag 2', value: 2 },
      { label: 'Tag 3', value: 3 },
      { label: 'Tag 4', value: 4 },
    ],
  },
  {
    title: 'City Name:',
    field: 'bbb',
    children: [
      { label: 'Label', value: 1 },
      { label: 'Suzhou', value: 2 },
      { label: 'Wuxi', value: 3 },
      { label: 'Lianyungang', value: 4 },
    ],
  },
])
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :options="options"
    :multiple="true"
    title-width="115px"
  />
</template>

Tag Style

You can pass type, round, effect and other attributes to set tag style

<script lang="ts" setup>
import { ref } from 'vue'
const tagSelect = ref({
  aaa: [1],
  bbb: [2],
})

const options = ref([
  {
    title: 'Tag Name:',
    field: 'aaa',
    children: [
      { label: 'Tag 1', value: 1, round: true },
      { label: 'Tag 2', value: 2, type: 'success' },
      { label: 'Tag 3', value: 3, effect: 'light' },
      { label: 'Tag 4', value: 4, effect: 'plain' },
    ],
  },
  {
    title: 'City Name:',
    field: 'bbb',
    children: [
      { label: 'Label', value: 1, round: true },
      { label: 'Suzhou', value: 2, type: 'success' },
      { label: 'Wuxi', value: 3, effect: 'light' },
      { label: 'Lianyungang', value: 4, effect: 'plain' },
    ],
  },
])
</script>

<template>
  <z-tag-select
    v-model="tagSelect"
    :options="options"
    :multiple="true"
  />
</template>

z-tag-select Attributes

Attribute	Description	Type	Default
modelValue	Binding value of selected items	array / string / number	—
options	Configurable options	array	—
alias	Field path customization	object	{ label: 'label', value: 'value' }
multiple	Multiple selection	boolean	false
all	All tag (only effective in multiple mode)	boolean	true
titleWidth	Title width	string / number	—
size	Tag size	enum	—

z-tag-select Events

Event Name	Description	Callback Parameters
change	Triggered when selected value changes	val, current selected value

z-tag-select Option Item Configurable Attributes

Attribute	Description	Type	Default
title	Title	string	—
field	Binding data field name	string	—
children	Configurable options	array	—
multiple	Multiple selection	boolean	false
all	All tag (only effective in multiple mode)	boolean	true
titleWidth	Title width	string / number	—
size	Tag size	enum	—

z-tag-select children Item Configurable Attributes

Attribute	Description	Type	Default
label	Tag content	string	''
value	Tag binding value	string / value	''
closable	Whether closable	boolean	false
type	Tag type	enum	''
disable-transitions	Whether to disable transition animations	boolean	false
hit	Whether has border stroke	boolean	false
color	Background color	string	''
size	Tag size	enum	''
effect	Tag theme	enum	light
round	Whether Tag is round	boolean	false
onClick	Tag click event	(option) => void	—
onClose	Tag close event	(option) => void	—