ant-design-vue/components/select/demo/responsive.vue

<docs>
---
order: 24
title:
  zh-CN: 最多显示多少个选项及选项最大长度
  en-US: set maxTagCount or maxTagTextLength
---

## zh-CN

设置一个数字，超过后自动折叠。

maxTagCount 也可以设置成响应式，但响应式对性能有所消耗，不推荐在大表单场景下使用。

## en-US

Set a number and automatically fold after exceeding.

`maxTagCount` can also be set to responsive, but responsive consumes performance and is not recommended for use in large-form scenarios.
</docs>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-space>
      <a-button type="primary" @click="maxTagCount++">maxTagCount++</a-button>
      <a-button type="primary" @click="maxTagCount--">maxTagCount--</a-button>
    </a-space>

    <h2>maxTagCount: {{ maxTagCount }}</h2>
    <a-select
      v-model:value="value"
      mode="multiple"
      style="width: 100%"
      placeholder="Select Item..."
      :max-tag-count="maxTagCount"
      :options="options"
    >
      <template #maxTagPlaceholder="omittedValues">
        <span style="color: red">+ {{ omittedValues.length }} ...</span>
      </template>
    </a-select>
    <h2>maxTagCount: responsive</h2>
    <a-select
      v-model:value="value"
      mode="multiple"
      style="width: 100%"
      placeholder="Select Item..."
      max-tag-count="responsive"
      :options="options"
    ></a-select>
    <a-space>
      <a-button type="primary" @click="maxTagTextLength++">maxTagTextLength++</a-button>
      <a-button type="primary" @click="maxTagTextLength--">maxTagTextLength--</a-button>
    </a-space>
    <h2>maxTagTextLength: {{ maxTagTextLength }}</h2>
    <a-select
      v-model:value="value"
      mode="multiple"
      style="width: 100%"
      placeholder="Select Item..."
      :max-tag-text-length="maxTagTextLength"
      :options="options"
    ></a-select>
  </a-space>
</template>
<script lang="ts">
import type { SelectProps } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const options = ref<SelectProps['options']>([]);

    for (let i = 10; i < 36; i++) {
      const value = i.toString(36) + i;
      options.value.push({
        label: `Long Label: ${value}`,
        value,
      });
    }
    const maxTagCount = ref(2);
    const maxTagTextLength = ref(10);
    return {
      value: ref(['a10', 'c12', 'h17', 'j19', 'k20']),
      options,
      maxTagCount,
      maxTagTextLength,
    };
  },
});
</script>