Vue TDesign Select 选择器自定义 Tag 标签

自定义 Tag

使用#valueDisplay="{ value }"这个slot插槽（valueDisplay的值固定为value）。

这样可以根据option中的item，自定义每一个Tag标签。

<t-select
    :max="8"
    v-model="list"
    placeholder="请选择"
    multiple
    clearable
    @popup-visible-change="popupVisibleChange"
    :tagProps="{closable: true}"
>
  <template #valueDisplay="{ value }">
    <t-tag v-for="item in value" closable :color="item?.disabled ? 'red' : ''">{{item?.label}}</t-tag>
  </template>
  <t-option label="全选" :check-all="true" />
  <t-option v-for="item in prizes" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled"></t-option>
</t-select>

禁用 option item

如果禁用了option中的某几个item，此时这个item对应的Tag标签的closeable等于false。

如果希望Tag始终保持可以关闭，:tagProps="{closable: true}"加上这条属性即可。

<t-select
    :max="8"
    v-model="list"
    placeholder="请选择"
    multiple
    clearable
    @popup-visible-change="popupVisibleChange"
    :tagProps="{closable: true}"
>
  <t-option label="全选" :check-all="true" />
  <t-option v-for="item in prizes" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled"></t-option>
</t-select>