next UI

# TagSelect 标签选择器

# 概述

对标签进行多选，带有折叠收起和展开更多的功能，常用于对列表进行筛选。
该组件支持 Form 校验。

# 代码示例

基础用法
基本的用法，方便的应用于筛选类目的业务场景中。
全部
选项一
选项二
选项三
选项四
选项五
选项六 
<template>
    <TagSelect v-model="value">
        <TagSelectOption name="tag1">选项一</TagSelectOption>
        <TagSelectOption name="tag2">选项二</TagSelectOption>
        <TagSelectOption name="tag3">选项三</TagSelectOption>
        <TagSelectOption name="tag4">选项四</TagSelectOption>
        <TagSelectOption name="tag5">选项五</TagSelectOption>
        <TagSelectOption name="tag6">选项六</TagSelectOption>
    </TagSelect>
</template>
<script>
    export default {
        data () {
            return {
                value: []
            }
        }
    }
</script>
Expand Copy
展开和收起
设置属性 expandable 可以让标签组收起，避免过高。
全部
选项一
选项二
选项三
选项四
选项五
选项六
选项七
选项八
选项九
选项十
选项十一
选项十二
选项十三
选项十四
选项十五
选项十六
选项十七
选项十八
选项十九
选项二十
展开 
<template>
    <TagSelect v-model="value" expandable>
        <TagSelectOption name="tag1">选项一</TagSelectOption>
        <TagSelectOption name="tag2">选项二</TagSelectOption>
        <TagSelectOption name="tag3">选项三</TagSelectOption>
        <TagSelectOption name="tag4">选项四</TagSelectOption>
        <TagSelectOption name="tag5">选项五</TagSelectOption>
        <TagSelectOption name="tag6">选项六</TagSelectOption>
        <TagSelectOption name="tag7">选项七</TagSelectOption>
        <TagSelectOption name="tag8">选项八</TagSelectOption>
        <TagSelectOption name="tag9">选项九</TagSelectOption>
        <TagSelectOption name="tag10">选项十</TagSelectOption>
        <TagSelectOption name="tag11">选项十一</TagSelectOption>
        <TagSelectOption name="tag12">选项十二</TagSelectOption>
        <TagSelectOption name="tag13">选项十三</TagSelectOption>
        <TagSelectOption name="tag14">选项十四</TagSelectOption>
        <TagSelectOption name="tag15">选项十五</TagSelectOption>
        <TagSelectOption name="tag16">选项十六</TagSelectOption>
        <TagSelectOption name="tag17">选项十七</TagSelectOption>
        <TagSelectOption name="tag18">选项十八</TagSelectOption>
        <TagSelectOption name="tag19">选项十九</TagSelectOption>
        <TagSelectOption name="tag20">选项二十</TagSelectOption>
    </TagSelect>
</template>
<script>
    export default {
        data () {
            return {
                value: []
            }
        }
    }
</script>
Expand Copy
受控模式
设置属性 hide-check-all 可以不显示 全部 按钮，并且可以自行控制数据。
选项一
选项二
选项三
选项四
选项五
选项六 
<template>
    <div>
        <Button @click="handleCheckAll">全部</Button>
        <TagSelect v-model="value" hide-check-all>
            <TagSelectOption name="tag1">选项一</TagSelectOption>
            <TagSelectOption name="tag2">选项二</TagSelectOption>
            <TagSelectOption name="tag3">选项三</TagSelectOption>
            <TagSelectOption name="tag4">选项四</TagSelectOption>
            <TagSelectOption name="tag5">选项五</TagSelectOption>
            <TagSelectOption name="tag6">选项六</TagSelectOption>
        </TagSelect>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value: []
            }
        },
        methods: {
            handleCheckAll () {
                this.value = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'];
            }
        }
    }
</script>
Expand Copy
标签颜色
设置属性 color 可以定制 Tag 的颜色，可选值同 iView Tag，也可以自定义颜色。
全部
选项一
选项二
选项三
选项四
选项五
选项六 
<template>
    <TagSelect v-model="value">
        <TagSelectOption name="tag1" color="magenta">选项一</TagSelectOption>
        <TagSelectOption name="tag2" color="red">选项二</TagSelectOption>
        <TagSelectOption name="tag3" color="green">选项三</TagSelectOption>
        <TagSelectOption name="tag4" color="blue">选项四</TagSelectOption>
        <TagSelectOption name="tag5" color="purple">选项五</TagSelectOption>
        <TagSelectOption name="tag6" color="orange">选项六</TagSelectOption>
    </TagSelect>
</template>
<script>
    export default {
        data () {
            return {
                value: []
            }
        }
    }
</script>
Expand Copy

# API

# TagSelect props

属性 说明 类型 默认值
value 指定选中项目的 value 值，可以使用 v-model 双向绑定数据。 Array []
expandable 是否显示 展开/收起 按钮 Boolean false
hide-check-all 隐藏 全部 按钮 Boolean false
locale 文案配置 Object {
collapseText: '收起',
expandText: '展开'
}

# TagSelect Events

事件名 说明 返回值
on-change 选项变化时触发，返回已选项 name 集合和当前项 name checkedNames, name
on-checked-all 全选状态变化时触发，返回全选状态 checked

# TagSelectOption props

属性 说明 类型 默认值
name 标签 name，必填 String, Number -
color Tag 的颜色，同 iView Tag 组件的 color String primary

← 城市选择器 →