如何在ChipInput(material-ui-chip-input)中禁用特定值的删除选项

核心实现逻辑是给每个chip项增加标识字段区分远程预填充数据和用户新增数据，通过渲染逻辑和事件拦截实现预设值不可删除：

实现步骤 #

• 第一步：定义chip数据结构时新增isPreset字段，远程拉取到预填充数据后统一给每条数据加上isPreset: true的标记，用户手动新增的chip默认带isPreset: false标记
• 第二步：自定义chip的渲染模板，判断如果isPreset为true时，隐藏删除按钮/将删除按钮置为禁用状态
• 第三步：在全局删除事件回调中增加校验逻辑，拿到要删除的chip项如果isPreset为true，直接return终止删除逻辑，作为双重保险避免遗漏渲染层的控制

代码示例（以Ant Design Vue组件库为例） #

<template>
  <a-input-chip v-model:value="emailList" @remove="handleRemove">
    <template #chip="{ item, index, remove }">
      <a-chip :closable="!item.isPreset" @close="remove">
        {{ item.email }}
      </a-chip>
    </template>
  </a-input-chip>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const emailList = ref([])
// 模拟远程拉取预设数据
const fetchPresetEmail = async () => {
  const res = await api.getEmailList()
  // 给所有预设数据加不可删除标记
  emailList.value = res.data.map(item => ({...item, isPreset: true}))
}
// 双重保险删除拦截
const handleRemove = (removedItem) => {
  if (removedItem.isPreset) return
  // 此处写入普通chip的删除逻辑
}
onMounted(() => {
  fetchPresetEmail()
})
</script>

通用适配说明 #

如果你使用的是其他组件库或者自研组件，都可以复用该逻辑，只要能自定义chip的渲染内容、能拿到删除事件的回调权限，就可以通过加字段标识的方式实现区分控制，不需要组件官方原生提供禁用指定项删除的能力。

内容的提问来源于stack exchange，提问作者Suraj Pawar